TypeScript 学习笔记

 

TypeScript(以下简称 TS)

 

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]
• 使用接口表示数组

 

1. interface NumberArray {
2. [index: number]: number;
3. }
4. let array: NumberArray = [1,2,3];

只要 index 的类型是 number,值必须是 number 类型

• any 表示数组中允许出现任意类型 let list: any[] = ['Liu', 25, { website: 'http://liu.com' }];
• 类数组不是数组类型，有自己的接口定义，如 IArguments，NodeList，HTMLCollection 等

 

1. function sum() {
2. let args: IArguments = arguments;
3. }

函数类型

• 在 TS 中需要对函数的输入和输出进行约束

 

1. function sum(x: number, y: number): number {
2. return x + y;
3. }
4. sum(2, 6);

输入参数多或者少都会报错。

 

1. let mySum: (x: number, y？: number) => number = function (x: number, y: number): number {
2. if(y) {
3. return x + y;
4. } else {
5. return x;
6. }
7. };

在 TS 中 => 表示函数的定义， 左边是输入类型，右边是输出类型；y 是可选参数，且必须位于必选参数后面; TS 会将添加了默认值的参数识别为可选参数

类型断言

• 手动指定值的类型 <类型>值或值 as 类型
• 类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的

声明文件 
内置对象 
用 TS 写 node.js 需要引入第三方声明文件npm install @types/node --save-dev