TypeScript的高级用法(持续更新)

为什么要使用TypeScript？

某乎已经解释的很清楚了传送门

我目前亲身的感受，TpeScript带来的好处

• 类型系统可以避免很多js的灵活性带来的隐藏bug，譬如在js里变量是可以到处定义，到处赋值，这就会导致中途你都不知道改成什么类型了，会不会有bug
• 团队协作代码风格更加严格，这一般是强类型编程语言所带来的特性之一，譬如很典型的Java，C#等

TpeScript香是香，只是使用中会带来以下问题。

• 入手门槛高，招人的门槛也高了不少
• 不习惯这么严格的语法，导致最后写成AnyScript,四不像

TypeScript的高级用法

支持”函数定义“

type Foo<T> = T
let nums: Foo<number> = 1

上面可以理解为

function Foo (T: any) {
  return T
}

如果我们对T的类型做限制

type foo<T extends string> = T;

则可以理解为

function Foo (T: string) {
  return T
}

当然了，我们也可以给T一个默认值

type Foo<T extends string = 'Hello World'> = T;

可以理解为：

function Foo (T: string = 'Hello World') {
  return T
}

支持条件判断

T extends Z ? X : Y

e.g.

type IsNumber<T> = T extends number ? 'this is a number' : 'this is not a number';

动态推导出联合类型

interface Student {
  name: string;
  age: number;
}

type studentKey = keyof Student; // "name" | "age"

遍历联合类型

通过 in 关键字

type key = 'vue' | 'react';

type MappedType = { [k in key]: string } // { vue: string; react: string; }

通过 索引

type frameworks = ['vue', 'react', 'angular'];
type f0 = frameworks[0]
type f1 = frameworks[1]
type f2 = frameworks[2]
type fa = frameworks[any]

支持 "作用域"

全局作用域

declare module '*.png';
declare module '*.svg';
declare module '*.jpg';

模块作用域

就像 nodejs 中的模块一样，每个文件都是一个模块，每个模块都是独立的模块作用域。这里模块作用域触发的条件之一就是使用 export 关键字导出内容。

每一个模块中定义的内容是无法直接在其他模块中直接获取到的，如果有需要的话，可以使用 import 关键字按需导入。

参考：

• 【万字长文】深入理解 TypeScript 高级用法