TypeScript 从基础知识到类型编程

date

Mar 13, 2020

slug

ywgdlrpx

status

Published

到底为什么要学习 TypeScript？

反对声音：

静态语言会丧失 JavaScript 的灵活性

静态类型不是银弹，大型项目依然可以用 JavaScript 编写

TypeScript 必定赴 coffeescript 后尘，会被标准取代

优势：

规避大量低级错误，避免时间浪费，省时

减少多人协作项目的成本，大型项目友好，省力

良好代码提示，不用反复文件跳转或者翻文档，省心

虽说有 eslint，但在多人协作时，静态检查 + eslint，会更能产生优良代码。如果是旧项目，可以逐步由 AnyScript 到 TypeScript。

开始使用 TypeScript

yarn global add typescript  // 全局安装mkdir demo && cd demotouch index.tsyarn init   // 初始化项目环境tsc --init  // 初始化 ts，文件目录下多了一个tsconfig.json

// tsconfig.json{  "compilerOptions": {    "target": "es5",                            // 指定 ECMAScript 目标版本: 'ES5'    "module": "commonjs",                       // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'    "moduleResolution": "node",                 // 选择模块解析策略    "experimentalDecorators": true,             // 启用实验性的ES装饰器    "allowSyntheticDefaultImports": true,       // 允许从没有设置默认导出的模块中默认导入。    "sourceMap": true,                          // 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件    "strict": true,                             // 启用所有严格类型检查选项    "noImplicitAny": true,                      // 在表达式和声明上有隐含的 any类型时报错    "alwaysStrict": true,                       // 以严格模式检查模块，并在每个文件里加入 'use strict'    "declaration": true,                        // 生成相应的.d.ts文件    "removeComments": true,                     // 删除编译后的所有的注释    "noImplicitReturns": true,                  // 不是函数的所有返回路径都有返回值时报错    "importHelpers": true,                      // 从 tslib 导入辅助工具函数    "lib": ["es6", "dom"],                      // 指定要包含在编译中的库文件    "typeRoots": ["node_modules/@types"],    "outDir": "./dist",    "rootDir": "./src"  },  "include": [                                  // 需要编译的ts文件一个*表示文件匹配**表示忽略文件的深度问题    "./src/**/*.ts"  ],  "exclude": [    "node_modules",    "dist",    "**/*.test.ts",  ]}// package.json"scripts": {    "build": "tsc", // 编译    "build:w": "tsc -w" // 监听文件，有变动即编译  },

Typescript 的原始类型

布尔类型：boolean

数字类型：number

字符串类型：string

空值：void

Null 和 Undefined：null 和 undefined

Symbol 类型：symbol

BigInt 大数整数类型：bigint

function warnUser(): void {  alert("This is my warning message");}const a: void = undefined || null; // 只有null和undefined可以赋给void

默认情况下 null 和 undefined 是所有类型的子类型，就是说你可以把 null 和 undefined 赋值给 number 类型的变量。但是在正式项目中一般都是开启 –strictNullChecks 检测的，即 null 和 undefined 只能赋值给 void 和它们各自，可以规避非常多的问题。

let u: undefined = undefined;let n: null = null;

Typescript 中其他常见类型

any：不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。

unknown：是 TypeScript 3.0 引入了新类型,是 any 类型对应的安全类型。区别在于对 unknown 类型的值执行大多数操作之前，我们必须进行某种形式的检查。

never：表示那些永不存在的值的类型，never 类型是任何类型的子类型，可赋值给任何类型。但没有类型（包含 any）是 never 的子类型或可以赋值给 never 类型（除了 never 本身之外）。

// 抛出异常的函数永远不会有返回值function error(message: string): never {  throw new Error(message);}// 空数组，而且永远是空的const empty: never[] = [];

数组

// 泛型const list: Array<number> = [1, 2, 3];// 非泛型const list: number[] = [1, 2, 3];

元组（Tuple）：元组中包含的元素，必须与声明的类型一致，而且不能多、不能少，顺序也必须匹配。元组继承于数组，但是比数组拥有更严格的类型检查。

let x: [string, number];x = ["hello", 10]; // OKx = [10, "hello"]; // Errorx = ["hello", 10, false]; // Errorx = ["hello"]; // Error

Object：表示非原始类型，也就是除 number，string，boolean，symbol，null 或 undefined 之外的类型。

深入理解枚举类型

数字枚举：默认类型，且默认从 0 开始，后面逐步递增。

字符串枚举：（无）。

异构枚举：混合有数字、字符串的枚举。

常量枚举：类似宏定义，被性能优化编译后，直接是“宏替换”了，只是可读性更好。

枚举的本质，可以看成一个 JavaScript 对象，而由于其特殊的构造，导致其拥有正反向同时映射的特性：name <=> value。所以enumXX[name] = value ，enumXX[value] = name。

枚举的高阶用法

联合枚举类型，即用枚举类型去声明变量后，那么该变量的值只能是对应枚举中的一个。

枚举合并，当定义多个相同名称的枚举时，会自动合并内部所有成员。（注，name 不能相同，value 可以一样！）。。好像只能在单文件中进行合并？不同文件是不同模块了？所以用处也不大。

借助 namespace 命名空间，可以给枚举添加静态方法。（不常用，跳过。）

接口(interface)

可选属性：?。如果实参中多了一个与可选属性一样类型的属性，那么会引发属性检查。可采用下面方式解决：

// 示例：interface Config {  width?: number;}function  CalculateAreas(config: Config): { area: number} {  let square = 100;  if (config.width) {      square = config.width * config.width;  }  return {area: square};}let mySquare = CalculateAreas({ width: 5 });// 方法一：使用类型断言let mySquare = CalculateAreas({ width: 5 } as Config);// 方法二：添加字符串索引签名。（即：可索引类型）interface Config {   width?: number;   [propName: string]: any;}// 方法三：将字面量赋值给另外一个变量。（慎用！！！）let options = { width: 5 };let mySquare = CalculateAreas(options);

只读属性：readonly。

函数类型：

// 内部定义interface User {    name: string    age?: number    readonly isMale: boolean    say: (words: string) => string}// 外部定义interface Say {    (words: string) : string}interface User {    name: string    age?: number    readonly isMale: boolean    say: Say}interface Other {    address: string}

继承接口，interface 可同时继承一个或多个，但 class 仅能同时继承一个。

interface VIPUser extends User, SupperUser, Other {  broadcast: () => void;}

如果要继承多个，且要使用 class 的特性，就要利用对象合并，同时使用 interface 和 class。

// 不使用class特性（见上一个interface）// 使用class特性，下面interface和class的VIPUser会进行合并interface VIPUser extends User, SupperUser {  broadcast: () => void;}class VIPUser extends Other {  other: string = "";  // 其他class特性}// 或将extends全部放在interfaceinterface VIPUser extends User, SupperUser, Other {}class VIPUser {  broadcast: () => void;  other: string = "";  // 其他class特性}

类(Class)

abstract 关键字是用于定义抽象类，和在抽象类内部定义抽象方法。

abstract class Animal {    abstract makeSound(): void;    move(): void {        console.log('roaming the earch...');    }}

TypeScript 中有三类访问限定符，分别是: public、private、protected。

相比 interface 作为类型声明时，class 具有类的特性，所以实际应用中要多使用 class。

// props的类型export default class Props {  public children: Array<React.ReactElement<any>> | React.ReactElement<any> | never[] = []  public speed: number = 500}// 类型当着默认值使用public static defaultProps = new Props()

函数(Function)

显式定义函数类型：

const add: (a: number, b: number) => number = (a: number, b: nuber) => a + b;// 等效于interface IAdd {  (a: number, b: number): number;}const add: IAdd = (a: number, b: nuber) => a + b;

可选参数、默认参数、剩余参数（rest 是个数组）。

函数重，根据传入不同的参数而返回不同类型的数据。TS 函数重载

// 上边是声明function add (arg1: string, arg2: string): stringfunction add (arg1: number, arg2: number): number// 因为我们在下边有具体函数的实现，所以这里并不需要添加 declare 关键字// 下边是实现function add (arg1: string | number, arg2: string | number) {  // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 arg1 + arg2  if (typeof arg1 === 'string' && typeof arg2 === 'string') {    return arg1 + arg2  } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {    return arg1 + arg2  }}

泛型（generic）的妙用

// 泛型变量function returnItem<T>(para: T): T {  return para;}const a = returnItem("a");const b = returnItem(1);a.length, b.toFixed(2); // 1 '1.00'// 多个类型参数function swap<T, U>(tuple: [T, U]): [U, T] {  return [tuple[1], tuple[0]];}swap([7, "seven"]); // ['seven', 7]// 泛型变量function getArrayLength<T>(arg: Array<T>) {  console.log(arg.length); // ok  return arg;}

泛型类

class Stack<T>{    private arr: T[] = []    public push(item: T) {        this.arr.push(item)    }    public pop() {        this.arr.pop()    }}

泛型约束 - 类

type Params = number | string;class Stack<T extends Params> {}const stack1 = new Stack<number>();     // okconst stack2 = new Stack<boolean>();    // error

泛型约束 - 索引类型。用索引类型 keyof T 把传入的对象的属性类型取出生成一个联合类型，这里的泛型 U 被约束在这个联合类型中。如一个函数接受两个参数，一个参数为对象，另一个参数为对象上的属性，我们通过这两个参数返回这个属性的值：

function getValue<T extends object, U extends keyof T>(obj: T, key: U) {  return obj[key]}const a = { name: 'xiaomuzhu', id: 1 }getValue(a, 'id')  // ok。key 的类型被约束为一个联合类型 name | idgetValue(a, 'xxx') // error

多重类型的泛型约束，即要先定义多重类型为一个类型。

interface ChildInterface extends FirstInterface, SecondInterface {}class Demo<T extends ChildInterface> {}

泛型 - new。通过制定 new() 返回的类型，以实现泛型的构造函数。

function factory<T>(type: { new(): T }): T {  return new type(); // ok}class BeeKeeper {  hasMask: boolean = false;}factory(BeeKeeper); // okfactory(string); // error。难道不接受原始类型？

类型守卫

类型守卫就是缩小类型的范围，使用 instanceof、in、字面量类型守卫等。

class Person {  name = "xiaomuzhu";  age = 20;}class Animal {  name = "petty";  color = "pink";}function getSometing(arg: Person | Animal) {  if (arg instanceof Animal) {    console.log(arg.color); // ok    console.log(arg.age); // Error  }  if (arg instanceof Person) {    console.log(arg.age); // Error    console.log(arg.color); // ok  }}function getSometing(arg: Person | Animal) {  if ("age" in arg) {    console.log(arg.color); // error    console.log(arg.age); // ok  }  if ("color" in arg) {    console.log(arg.age); // error    console.log(arg.color); // ok  }}getSometing(new Person()); // 20getSometing(new Animal()); // pinktype Foo = {  kind: "foo", // 字面量类型  foo: number,};type Bar = {  kind: "bar", // 字面量类型  bar: number,};function doStuff(arg: Foo | Bar) {  if (arg.kind === "foo") {    console.log(arg.foo); // ok    console.log(arg.bar); // Error  } else {    console.log(arg.foo); // Error    console.log(arg.bar); // ok  }}

高级类型

交叉类型，将多个类型合并为一个类型。这让我们可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

const x: Aa & Bb = {  /* Aa和Bb的元素 */};

联合类型，希望属性为多种类型之一，如字符串或者数组。

function xxx(command: string[] | string) {}

类型别名，给一个类型起个新名字，类型别名有时和接口很像，但是可以作用于原始值、联合类型、元组以及其它任何你需要手写的类型。

type some = boolean | string; // 别名是联合类型type Container<T> = { value: T }; // 别名是泛型

interface 只能用于定义对象类型，而 type 的声明方式除了对象之外还可以定义交叉、联合、原始类型等，类型声明的方式适用范围显然更加广泛。但是 interface 也有其特定的用处：

interface 方式可以实现接口的 extends 和 implements

interface 可以实现接口合并声明

type Alias = { num: number };interface Interface {  num: number;}declare function aliased(arg: Alias): Alias;declare function interfaced(arg: Interface): Interface;

interface 创建了一个新的名字，可以在其它任何地方使用，type 并不创建新名字，比如，错误信息就不会使用别名。

字面量类型（Literal Type）主要分为真值字面量类型（boolean literal types）、数字字面量类型（numeric literal types）、枚举字面量类型（enum literal types）、大整数字面量类型（bigInt literal types）和字符串字面量类型（string literal types）。

const a: 2333 = 2333 // okconst ab : 0b10 = 2 // okconst ao : 0o114 = 0b1001100 // okconst ax : 0x514 = 0x514 // okconst b : 0x1919n = 6425n // okconst c : 'xiaomuzhu' = 'xiaomuzhu' // okconst d : false = false // okconst g: 'github' = 'pronhub' // 不能将类型“"pronhub"”分配给类型“"github"”

当字面量类型与联合类型结合的时候,用处就显现出来了,它可以模拟一个类似于枚举的效果。

type Direction = "North" | "East" | "South" | "West";function move(distance: number, direction: Direction) {  // ...}

类型字面量，跟 interface 也有点相似，在一定程度上类型字面量可以代替接口。

type Foo = {  baz: [    number,    'xiaomuzhu'  ];  toString(): string;  readonly [Symbol.iterator]: 'github';  0x1: 'foo';  "bar": 12n;};

可辨识联合类型，即利用类型守卫等方式，判断实体到底属于联合类型中的哪一种类型，这就要求每种类型需要唯一一个属性（或通俗性，但字面量类型不一样，参考上面的类型守卫示例）。

装饰器（看不太懂，后面专项学习）

在某些场景需要在不改变原有类和类属性的基础上扩展些功能，这也是装饰器出现的原因。

类装饰器

属性装饰器

方法装饰器

访问符装饰器

参数装饰器

装饰器工厂

装饰器顺序

JS 装饰器，一篇就够