typescript

已于 2024-05-25 19:35:36 修改
阅读量134 收藏 1
点赞数
分类专栏： javascript 文章标签： typescript javascript 前端
于 2019-10-09 17:40:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31403519/article/details/102458843
版权

  目录：

  一、环境配置

  二、ts的类型

  三、ts中的函数

  四、ts中的接口定义

  五、ts中的泛型

  六、ts中的命名空间

  七、ts中的装饰器

环境配置

  1、全局安装typescript：npm i -g typescript

  2、在cmd中进入到ts文件夹内，运行tsc --init，创建tsconfig.json文件，修改文件里的outDir选项（生成的js文件的地址）

  3、在vsCode中选择终端->运行任务->监视tsconfig.json，ts文件变化时会自动生成对应的js文件

typesrcipt类型：

1、分类：布尔类型：boolean、数字类型：number、字符串类型：string、数组类型：array、元组类型：tuple、枚举类型enmu、任意类型：any、undefined和null、void类型、never类型

 2、语法：变量名:类型 = 赋值

let b: boolean = true;
// b = "ss";  //赋值其他类型的值时会报错
let s: string = "string";
let n: number = 2;
console.log(b, s, n);

//数组类型
let arr: number[] = [1, 2];
let arr1: Array<number> = [1, 2]; //第二种写法

//元组类型：是array类型中的一种，给每一个元素指定一个类型
let t: [number, string] = [1, "1"]; //必须一一对应
let t1: any[] = [1, "s", true]; //元素可以为任意类型
console.log(arr, t);

//枚举类型，如果不给元素赋值则它的值为对应的下标（下标从0开始），如果某项赋值了，并且为整数，则其后面的选项会在此值上累加，如果是非整数，则其后面的元素必须赋值，否则会报错
enum Color {
  blue,
  green = 3,
  red
}
//enum Color {blue,green='green',red};    //报错
let bc: Color = Color.blue;
let gc: Color = Color.green;
let rc: Color = Color.red;
console.log(bc);
console.log(gc);
console.log(rc); //green的值被初始化为3，则red对应累加，变成4

//any类型,相当于放弃了ts的类型检查，可以随意转化类型
var a: any = { a: "aa" };
a = "sss";
console.log(a);

//undefined和null,定义变量但未赋值时使用，可以给一个变量设置多个类型
var n: number | undefined | null; //num可能为number类型，可能是undefined，也可能是null
n = 22;
console.log(n);

//void类型：表示没有任何类型，一般用于没有返回值的方法
function voidFn(): void {
  console.log("voidFn");
}
voidFn();

ts中的函数

1、指定参数的类型，可以设置默认值，可以设置是否可选

 2、指定返回值的类型

function run(name: string, age: number): string {
  return name + "：" + age + "岁";
}
console.log(run("张三", 22));

//使用?来设置是否可选，可选参数必须放置在必选参数之后
function run(age: number, name?: string): string {
  return name ? name + age : "陌生人" + age;
}
console.log(run(20, "张三")); //张三
console.log(run(20)); //陌生人

//设置默认值
function run(name: string = "默认名字"): string {
  return name;
}
console.log(run("张三")); //张三
console.log(run()); //默认名字

ts中的接口定义：使用interface关键字

1、接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法

 2、属性类接口

 3、函数类型接口

 4、类类型接口

 5、接口的继承

//属性类接口
//iPerson接口必须有name（string类型）属性，可以有age（number类型）属性
interface iPerson {
  name: string;
  age?: number;
}
let person: iPerson = {
  name: "张三",
  age: 20
  // sex: "man"     //报错，接口中没有sex属性
};
console.log(person);
//TIPS:如果不能确定最后的传参是否比接口有更多的参数，可以使用'字符串索引签名'([propName: string])来绕开多余参数的检查
interface iPerson {
  name: string;
  age?: number;
  [propName: string]: any;    //定义了属性名为string类型，属性值为any类型
}
let person: iPerson = {
  name: "张三",
  age: 20,
  sex: "man"     //使用了字符串索引签名，不会报错
};
console.log(person);

//函数类型接口
// iFn接口定义了参数和返回值规范
interface iFn {
  (name: string, age?: number): string;
}
let man: iFn = function(name: string, age?: number): string {
  let n = "man" + name;
  return age ? n + age : n;
};
let woman: iFn = function(name: string, age?: number): string {
  let n = "woman" + name;
  return age ? n + age : n;
};
console.log(man("张三"));
console.log(woman("韩梅梅"));

//类类型接口，约束类的属性和方法
//定义了iPerson接口，必须包含name、age属性和setAge方法
interface iPerson {
  name: string;
  age: number | undefined;
  setAge(age: number): void;
}
//使用关键字implements，Person类必须满足iPerson接口的格式
class Person implements iPerson {
  name: string;
  age: number | undefined; //未在初始化时给age赋值，所以age的类型需要加上undefined
  constructor(name: string) {
    this.name = name;
  }
  setAge(age: number) {
    this.age = age;
  }
}
let p = new Person("张三");
p.setAge(20);
console.log(p);

//接口的继承,使用extends关键字
interface iPerson {
  name: string;
}
interface iMan extends iPerson {
  sex: string;
}
let m: iMan = {
  name: "张三",
  sex: "man"
};
console.log(m);

ts中的泛型，使用<>来定义泛型

1、当没有办法确定数据类型时，除了用any（any相当于放弃了数据类型检查），还可以使用泛型。泛型就是解决对不确定数据类型的支持，在调用时才确定数据类型

  2、方法中的泛型

  3、类中的泛型

  4、接口中的泛型

  5、作为参数的泛型类

//方法中的泛型，在调用时才确定T的类型
//test方法，规定了传入的参数和函数返回值都是T的类型
function test<T>(value: T): T {
  return value;
}
console.log(test<number>(20)); //T为number类型，则传入的值和返回值也要为number类型
console.log(test<string>("s")); //T为string类型
// test<number>('s');    //错误，传入的值不是number类型

//类中的泛型，在创建Test实例时确定T的数据类型
class Person<T> {
  names: T[] = [];
  add(value: T): void {
    this.names.push(value);
  }
}

var p = new Person<string>(); //规定了T为string类型，则Person类中所有的T都要为string类型
p.add("张三");
p.add("李四");
p.add("韩梅梅");
console.log(p);

//在接口中的泛型
interface iPerson<T> {
  name: string;
  data: T;
}
interface iBaseInfo {
  age: number;
  sex: string;
}

let p: iPerson<iBaseInfo> = {
  //泛型T的类型为iBaseInfo，因此data的数据结构必须符合接口iBaseInfo的结构
  name: "张三",
  data: {
    age: 20,
    sex: "man"
  }
};
console.log(p);

//作为参数的泛型类
class User {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
class People<T> {
  list: T[] = [];
  add(p: T): void {
    this.list.push(p);
  }
}
let p = new People<User>(); //把user类作为参数传给People类，People的泛型为user，所以add传的参数只能是User类型
let u = new User("张三", 20);
p.add(u);
console.log(p);

ts中的命名空间

1、使用namespace关键字定义命名空间

2、命名空间内的变量是私有的，如果要访问，需要使用export导出

namespace nPerson {
  interface iN {
    name: string;
  }
  export class People {
    name: iN;
    constructor(name: iN) {
      this.name = name;
    }
  }
}
var p = new nPerson.People({ name: "张三" });
console.log(p);

ts中的装饰器，使用@使用装饰器，装饰器必须放在被装饰的前面，并且不能加分号

  1、装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、属性、参数上，以此改变他们的行为。通俗地讲，装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展他们的功能。

  2、装饰器的分类：普通装饰器（无法传参），装饰器工厂（可传参，一般使用这种）

  3、类装饰器

  4、属性装饰器

  5、方法装饰器

  6、参数装饰器

//类装饰器：类装饰器在类声明之前被声明（紧挨着类声明），类装饰器应用于类构造函数，可以在不修改类的前提下拓展类的功能
function logClass(param: string) {
  return function(target: any) {
    //target指向类
    //拓展属性
    target.prototype.sex = param;
    //拓展方法
    target.prototype.getSex = function() {
      console.log(this.sex);
    };
  };
}

//属性装饰器：属性装饰器表达式会在运行时当做函数被调用，传入2个参数：1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象，2、属性名
function logProperty(param: number) {
  return function(target: any, attr: any) {
    target[attr] = param; //修改了target下的attr属性的值
  };
}

//方法装饰器：它会被应用到方法的属性描述符上，可以用来监视、修改、替换方法定义，传入3个参数：1、对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象。2、方法名。3、成员的属性描述
function logMethod(param?: any) {
  return function(target: any, name: string, desc: any) {
    //修改原方法
    var oMethod = desc.value;
    desc.value = function(...args: any[]) {
      console.log(param);
      return oMethod.apply(this, args); //继续执行原方法里的代码
    };
  };
}

//参数装饰器：参数装饰器表达式会在运行时当做函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，传入3个参数：1、对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象。2、方法的名字。3、参数在函数参数列表中的索引位置。
function logParam(param?: any) {
  return function(target: any, methodName: string, paramIndex: number) {
    console.log("logParam:::", target);
    console.log("logParam:::", methodName);
    console.log("logParam:::", paramIndex);
  };
}

@logClass("man")
class People {
  @logProperty(22)
  age: number | undefined;
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  @logMethod("方法装饰器")
  getName(): string {
    return this.name;
  }
  setName(@logParam("获取参数") name: string) {
    this.name = name;
  }
}
let p: any = new People("张三"); //变量p需定义为any类型，否则获取装饰器里的属性和方法时会报错
console.log(p.age);
p.getSex();
console.log(p.getName()); //p.getName()的值为方法修饰器方法里返回的值
p.setName("李四");
console.log(p.name);

Anne的前端之路
关注
专栏目录
TypeScript 介绍和开发环境搭建
老司机的后备箱
08-18 314
TypeScript（简称TS） 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，因为它扩展了 JavaScript，有 JavaScript 没有的东西TypeScript 向 JS 语言添加了可选的静态类型和基于类的面向对象编程。JavaScript 是弱类型，很多错误只有在运行时才会被发现，而 TypeScript 提供了一套静态检测机制,，可以帮助我们在编译时就发现错误。...
【TypeScript】通过node-cmd使用代码，执行cmd命令行
VirusScanLog的博客
11-29 2695
使用第三方库 node-cmd 执行 cmd 命令行命令 具体实现代码如下： const cmdShell = require('node-cmd') async function cmd(domainName: string) { /** * @description: 连接 cmd ，使用cmd命令 * @param {*} * @return {*} */ // 切换编码格式 -> utf8 await cmdShell.get
基于 TypeScript 的 Node.js 交互式命令行应用
weixin_33814685的博客
08-29 252
八月！！！ 要月底了~ 博客还没有写。啊啊啊啊....... 写点啥？不知道啊！好吧，去咖啡店找点灵感吧。 灵感来了 最近一不小心，发布第一 NPM 包，gcli_。它是个怎么样存在？ 平时撸代码时，有时候需要写一下小工具，帮助更好的完成一些功能。比如说，爬数据，查看一些 github 的 数据.... 交互式命令行应用程序 码农圈...
typescript 深入理解装饰器
一袋米要扛几楼_
09-20 2099
安装 // cmd cnpm i -g typescript 配置 // cmd tsc --init 将tsconfig.json的experimentalDecorators设为true, 启动实验阶段的装饰器功能 代码 新建文件test.ts // 装饰器调用顺序 // 属性装饰器>方法参数装饰器>方法装饰器>静态属性装饰器>静态方法装饰器>类装饰器 // ...
TypeScript---tsc命令需在cmd命令窗口执行，vscode切换为cmd命令窗口
maidu_xbd的博客
02-13 1320
最近比较颓了，也提不起深挖技术的兴致，又碰上春节假期不能回家，实在是不想动脑o(╥﹏╥)o，那就利用这个假期简单学学typeScript 注意：tsc命令需在cmd命令窗口执行，不能在powershell中执行，若在vscode中终端powershell中执行tsc相关命令，结果如下图 解决方法：切换默认Shell，具体操作见下图 ...
Typescript类型脚本课件.pptx
06-19
Typescript类型脚本课件 Typescript是一种静态类型检查的JavaScript超集语言，由Microsoft开发，代码开源于GitHub上。Typescript的主要特点是提供了类型系统和对JS新标准的支持（ES6/7/8）。 Typescript可以帮助...
typescript版 vconsole 代码
最新发布
03-24
**typescript版 vconsole 代码详解** 在移动应用开发中，我们常常需要在手机上调试前端代码，vConsole 是一个轻量级的移动端 Web 开发调试工具，它可以在真实设备上模拟 Chrome DevTools 的一些功能。当我们将 ...
TypeScript
01-15
TypeScript是微软开发的一种开源编程语言，它是JavaScript的超集，提供了可选的静态类型和基于类的面向对象编程。作为一种静态类型语言，TypeScript在编译成JavaScript之前，能够检查数据类型，这有助于在代码编写...
TypeScript教程
02-22
### TypeScript 数据类型详解 #### 基础数据类型 在 TypeScript 中，基础数据类型是构建更复杂类型的基础。这些类型包括但不限于布尔值、数字、字符串等。 ##### 布尔值（boolean） 布尔值用于表示逻辑实体，在 ...
《TypeScript》电子pdf版
05-05
### TypeScript 入门知识点概述 #### 1. TypeScript 概述 - **定义**: TypeScript 是 JavaScript 的一个静态类型的超集，它可以编译成纯 JavaScript。这意味着任何现有的 JavaScript 代码库都可以立即作为 ...
Typescript 构建命令行工具上手指南
weixin_34278190的博客
11-29 443
这篇小教程里演示使用 TypeScript 构建命令行工具，利用 async/await 进行非阻塞操作，利用 mocha 自动化测试以及 travis-ci 进行持续集成。 Intro 最近 TJ 发布了 node-prune 进行对 node_modules 里冗余文件的清理，但项目由 Go 写成，于是我移植了一个 JavaScrip...
Typescript的三种运行方式
热门推荐
HaiJing1995的博客
04-29 3万+
Typescript的三种编译运行方式一、在线complier这种方式最简单，不需在本地做任何配置安装，只需进入Typescript的官网，点击里面的playground就可以直接写代码了。但这种方式只适用于测试而不适用于开发。二、本地命令行编译1、在本地编译运行Typescript需要使用npm下载typescript npm install -g typescript 至于n
如何在TypeScript中命令行输出带颜色
xerysherryx的博客
01-11 3444
TypeScript 命令行输出颜色库 如何获得？ 首先，可以使用npm安装 npm install colors.ts 或者git克隆它 git clone https://github.com/xerysherry/colors.ts.git 或者在https://github.com/xerysherry/colors.ts这里下载它 如果你克隆或者下载，那么就需要
typescript学习笔记
cmd2018的博客
02-02 227
Typescript 学习 ⦁ 基础语法 安装： typescript全局安装 ts-node全局安装 编译：tsc demo1.ts 生成js文件 初始化： tsc –init 生成tsconfig.json 使用：ts-node index.ts 并行命令：concurrently插件 打包工具： parcel 插件： reflect-metedata ⦁ Typescript是静态类型 ⦁ 数组 ⦁ constnumbers:number[]=[1,2,3]; ⦁...
Typescript安装及编译《CMD命令行方法》
CSD15138668634的博客
09-05 398
一、CDM命令工具 npm i -g typescript 二、创建一个app.ts的Typescript的文件（文件名随便取），然后在里面写上 ((num) => { console.log(num +1) })(2); 三、在CMD命令行输入 tsc app.ts 四、第三部执行完之后会生成一个app，js的文件，然后里面的内容变成了这...
什么是typescript以及如何使用
u014527697的博客
07-07 8381
TypeScript TypeScript 是由微软开发的一款开源的编程语言 。TypeScript 是 Javascript 的超级， 遵循最新的 ES6、 Es5 规范。 TypeScript 从语言层面上扩展了JavaScript的语法。TypeScript 更像后端 java这样的面向对象语言可以让 js 开发大型企业项目 。应用：谷歌也在大力支持 Typescript 的推广， 谷歌的 ...
vue+vuex+eslint+typescript
qq_31403519的博客
10-15 2114
安装依赖 安装开发依赖： npm i -D @vue/cli-plugin-eslint @vue/eslint-config-standard @vue/eslint-config-typescript eslint eslint-loader eslint-plugin-node eslint-plugin-vue typescript ts-loader 安装项目依赖 npm i...
js之音频和视频：audio和video
qq_31403519的博客
07-05 1781
HTML5引入了audio和video标签来嵌入音频和视频，而不再像以前一样需要使用插件（如FLASH）才能使用音视频。用法： //因为各个浏览器未能在对标准音频和视频编解码器支持上达成一致，因此通常需要是有source元素来为指定不同格式的媒体源，浏览器会依次使用source里的资源，直到找到适合自己的 <audio> <source src="test.mp3" ...
js之document对象
qq_31403519的博客
06-21 754
document对象叫做文档对象模型（DOM），它代表和操作文档的内容。 1、选取文档元素 用指定的id属性：document.getElementById(...) 用指定的name属性:document.getElementsByName(...) 用指定的标签名字:document.getElementsByTagName(...)，特殊情况：document.body代表body元...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值