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 高级用法

查看更多关于TypeScript的高级用法(持续更新)的详细内容...