1、什么是 TS?
- 定义
- TS 是 JavaScript 的一个超集,主要提供了 类型系统 和 对 ES6 的支持
- TS 可以编译成纯 JavaScript 运行于任何浏览器上
- TS 编译工具可以运行在任何服务器和系统上
- TS 是开源的
- 优点
- 增加了代码的可读性和可维护性
- 包容性非常好
- 拥有活跃的社区
- 缺点
- 学习成本偏高,需要理解接口、泛型、类、枚举类型等概念
- 短期会增加开发成本
- 集成到构建流程需要一定的工作量
- 可能和一些库结合的不太好
2、安装 TS
安装命令: npm install -g typescript
,该命令会在全局环境下安装 tsc 命令。
编译 TS 文件方式:tsc hello.ts
。
TS 编写的文件以 .ts
为后缀。
TS 中使用 : 指定变量类型,: 前后有无空格都可以。
3、基础
JavaScript 类型分为两种:
- 原始数据类型
- 布尔值
new Boolean() 返回的是 Boolean 对象;Boolean() 返回 boolean 类型。
- 数值
- 字符串
- null
- undefined
undefined 类型只能赋值为 undefined, null 类型的变量只能赋值为 null。与 void 的区别是,undefined 和 null 是所有类型的子类型。
- ES6 中的新类型 Symbol
- 对象类型
空值(void): JS 没有空值的概念,在 TS 中用空值表示没有任何返回值的函数;声明 void 类型的变量只能将它赋值为 undefined 和 null。
任意值(Any)
- 表示允许赋值为任意类型。
- 声明一个变量为任意值之后,对它的任何操作,返回内容的类型都是任意值。
- 变量在声明的时候,未指定其类型,会被识别为任意值类型。
类型推论
- TS 会在没有明确指定类型的时候推测出一个类型
- 如果定义的时候没有赋值,会被推测成 any 类型,而不会被类型检查
联合类型
- 表示取值只能是多种类型中的一种,类型之间用 | 分隔
- 当 TS 不确定一个联合类型的变量是哪个类型时,只能访问此联合类型的所有类型里共有的属性或方法
对象的类型——接口
- 在 TS 中使用接口定义对象的类型
- 接口是对行为的抽象,具体如何行动需要由类去实现接口
- 对对象的形状进行描述:赋值的时候,变量的形状必须和接口的形状保持一致,多、少都不行
- 可选属性:属性名称?: 类型
- 任意属性:一旦定义了任意属性,那么确定属性和可选属性都必须是它的子属性,
[propName: string]: string
- 只读属性:只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候
数组类型
- 类型 + 方括号
let numArray : number[] = [1, 2, 3]
; 数组内只能是数字类型。
- 数组泛型
Array<elemType>
let array: Array<number> = [1,2,3]
- 使用接口表示数组
interface NumberArray {
[index: number]: number;
}
let array: NumberArray = [1,2,3];
只要 index 的类型是 number,值必须是 number 类型
- any 表示数组中允许出现任意类型
let list: any[] = ['Liu', 25, { website: 'http://liu.com' }];
- 类数组不是数组类型,有自己的接口定义,如 IArguments,NodeList,HTMLCollection 等
function sum() {
let args: IArguments = arguments;
}
函数类型
function sum(x: number, y: number): number {
return x + y;
}
sum(2, 6);
输入参数多或者少都会报错。
let mySum: (x: number, y?: number) => number = function (x: number, y: number): number {
if(y) {
return x + y;
} else {
return x;
}
};
在 TS 中 => 表示函数的定义, 左边是输入类型,右边是输出类型;y 是可选参数,且必须位于必选参数后面; TS 会将添加了默认值的参数识别为可选参数
类型断言
- 手动指定值的类型
<类型>值
或值 as 类型
- 类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的
声明文件
内置对象
用 TS 写 node.js 需要引入第三方声明文件npm install @types/node --save-dev
请发表评论