TypeScript小抄写员

大量摘抄于各类文章 ———— 站在巨人的肩膀上搬砖

TypeScript官方文档
（中文版）
是最好的学习材料

TS是什么

TypeScript = Type + Script（标准JS）。我们从TS的官方网站上就能看到定义：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript。TypeScript是一个编译到纯JS的有类型定义的JS超集。

为什么要用TS

类型安全，可以类比 Java。
TS 面向对象理念，支持面向对象的封装、继承、多态三大特性
类似 babel，ES6 ES7 新语法都可以写，最终 TS 会进行编译。
生产力工具的提升，VS Code + TS 使 IDE 更容易理解你的代码
给应用配置、应用状态、前后端接口及各种模块定义类型，使协作更为方便、高效和安全，整个应用就是类型定义文档
类型系统+静态分析检查+智能感知/提示，使大规模的应用代码质量更高，运行时bug更少，更方便维护和重构

静态类型、动态类型和弱类型、强类型

静态类型：编译期就知道每一个变量的类型。类型错误编译失败是语法问题。如Java、C++。
动态类型：编译期不知道类型，运行时才知道。类型错误抛出异常发生在运行时。如JS、Python。
弱类型：容忍隐式类型转换。如JS，1+'1'='11'，数字型转成了字符型。
强类型：不容忍隐式类型转换。如Python，1+'1'会抛出TypeError。

权衡

如何更好的利用JS的动态性和TS的静态特质，我们需要结合项目的实际情况来进行综合判断。一些建议：

如果是中小型项目，且生命周期不是很长，那就直接用JS吧，不要被TS束缚住了手脚。
如果是大型应用，且生命周期比较长，那建议试试TS。开源项目如VS Code、GitHub桌面端。
如果是框架、库之类的公共模块，那更建议用TS了。

至于到底用不用TS，还是要看实际项目规模、项目生命周期、团队规模、团队成员情况等实际情况综合考虑。

TS能干什么

静态检查

低级错误、非空判断、类型推断，这类问题是ESLint等工具检测不出来的。

基础类型

let isDone: boolean = false;let decimal: number = 6;let color: string = "blue";// 数组，有两种写法let list: number[] = [1, 2, 3];let list: Array<number> = [1, 2, 3];// 元组(Tuple)let x: [string, number] = ["hello", 10];// 枚举enum Color {Red = 1, Green = 2, Blue = 4}let c: Color = Color.Green;// 不确定的可以先声明为anylet notSure: any = 4;// 声明没有返回值function warnUser(): void {    alert("This is my warning message");}let u: undefined = undefined;let n: null = null;// 类型永远没返回function error(message: string): never {    throw new Error(message);}// 类型主张，就是知道的比编译器多，主动告诉编译器更多信息，有两种写法let someValue: any = "this is a string";let strLength: number = (<string>someValue).length;let strLength: number = (someValue as string).length;

面向对象编程增强

访问权限控制

信息隐藏有助于更好的管理系统的复杂度，这在软件工程中显得尤为重要。

class Person {  protected name: string;  public age: number;  constructor(name: string) { this.name = name; }}class Employee extends Person {  static someAttr = 1;  private department: string;  constructor(name: string, department: string) {    super(name);    this.department = department;  }}let howard = new Employee("Howard", "Sales");console.log(howard.name);// 报错：Person中name属性是protected类型，只能在自己类中或者子类中使用

接口 interface

Robot类可以继承Base类，并实现Machine和Human接口，
这种可以组合继承类和实现接口的方式使面向对象编程更为灵活、可扩展性更好。

interface Machine {  move(): void}interface Human {  run(): void}class Base {}class Robot extends Base implements Machine, Human {  run() {    console.log('run');  }  move() {    console.log('move');  }}

泛型

定义了一个模板类型T，实例化GenericNumber类时可以传入内置类型或者自定义类型。泛型（模板）在传统面向对象编程语言中是很常见的概念了，在代码逻辑是通用模式化的，参数可以是动态类型的场景下比较有用。

class GenericNumber<T> {    zeroValue: T;    add: (x: T, y: T) => T;}let myGenericNumber = new GenericNumber<number>();myGenericNumber.zeroValue = 0;myGenericNumber.add = function(x, y) { return x + y; };

类型系统

定义了一个系统配置类型SystemConfig和一个模块类型ModuleType，我们在使用这些类型时就不能随便修改config和mod的数据了,这对于多人协作的团队项目非常有帮助。

interface SystemConfig {  attr1: number;  attr2: string;  func1(): string;}interface ModuleType {  data: {    attr1?: string,    attr2?: number  },  visible: boolean}const config: SystemConfig = {  attr1: 1,  attr2: 'str',  func1: () => ''};const mod: ModuleType = {  data: {    attr1: '1'  },  visible: true};

模块系统增强 module/namespace

TS除了支持ES6的模块系统之外，还支持命名空间。这在管理复杂模块的内部时比较有用。

namespace N {  export namespace NN {    export function a() {      console.log('N.a');    }  }}N.NN.a();

面向对象相关概念详见

vs Babel

Web和Node平台的JS始终与JS最新规范有一段距离，Web平台的距离更远，TS可以填充这个间隙，让使用者在Web和Node平台都能用上最新的Feature，用上优雅的JS，提高生产力。
Babel也是很不错的ES6 to 5编译工具，有不错的插件机制，社区发展也不错，但在同样一段代码编译出的JS代码里可以看到，TS编译后的代码是更符合习惯、简洁易读一些（都用的是官方网站的Playground工具）。

使用TS的成本

老项目

对于老项目，由于TS兼容ES规范，所以可以比较方便的升级现有的JS（这里指ES6及以上）代码，逐渐的加类型注解，渐进式增强代码健壮性。迁移过程：

npm全局安装typescript包，并在工程根目录运行tsc --init，自动产生tsconfig.json文件。默认的3个配置项：更多配置项说明

"target":"es5"：编译后代码的ES版本，还有es3，es2105等选项。
"module":"commonjs"：编译后代码的模块化组织方式，还有amd，umd，es2015等选项。
"strict":true：严格校验，包含不能有没意义的any，null校验等选项。

初始化得到的tsconfig.json无需修改，增加"allowJs": true选项。
配置webpack配置，增加ts的loader，如awesome-typescript-loader。

loaders: [    // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.    { test: /\.tsx?$/, loader: "awesome-typescript-loader" }]

此时你可以写文件名为ts和tsx后缀的代码了，它可以和现有的ES6代码共存，重构以前的ES6代码为TS代码，只需将文件后缀改成ts(x)就行，就可以享受TS及IDE智能感知/纠错带来的好处。

tsconfig.json配置参阅

新项目

对于新项目，微软提供了非常棒的一些Starter项目，详细介绍了如何用TS和其他框架、库配合使用。如果是React项目，可以参考这个Starter：TypeScript-React-Starter

周边生态

类型声明包

React、及其他各种著名框架、库都有TS类型声明，我们可以在项目中通过npm install @types/react方式安装，可以在这个网站搜索你想要安装的库声明包。安装后，写和那些框架、库相关的代码将会是一种非常爽的体验，函数的定义和注释将会自动提示出来，开发效率将会得到提升。

TS进阶

类型别名type

相当于自定义一个类型

type Name = string;type NameResolver = () => string;type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name {    if (typeof n === 'string') {        return n;    } else {        return n();    }}

交叉类型 ( & )

交叉类型 intersection types是将多个类型合并成一个类型

type Person = Huaren & Bairen & Heiren;

联合类型 ( | )

联合类型（Union Types）表示取值可以为多种类型中的一种
当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

function getLength(something: string | number): number {    return something.length;❌}// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.//   Property 'length' does not exist on type 'number'.function getString(something: string | number): string {    return something.toString();✅}

字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个

type EventNames = 'click' | 'scroll' | 'mousemove';function handleEvent(ele: Element, event: EventNames) {    // do something}handleEvent(document.getElementById('hello'), 'scroll');  // 没问题handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'// index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.

类型保护

当我们需要在还不确定类型的时候就访问其中一个类型特有的属性或方法，就要用到类型保护

使用类型断言

interface Cat {    name: string;    run(): void;}interface Fish {    name: string;    swim(): void;}function isFish(animal: Cat | Fish) {    if (typeof animal.swim === 'function'❌) {        return true;    }    return false;}// index.ts:11:23 - error TS2339: Property 'swim' does not exist on type 'Cat | Fish'.//   Property 'swim' does not exist on type 'Cat'.function isFish(animal: Cat | Fish) {    if (typeof (animal as Fish✅).swim === 'function') {        return true;    }    return false;}

使用类型守卫

类型谓词守卫自定义类型

返回值animal is Fish就是类型谓词
谓词形式为parameterName is Type，parameterName必须是来自于当前函数签名里的参数名

function isFish(animal: Fish | Bird): animal is Fish {    return (animal as Fish).swim !== undefined;}

typeof类型守卫

只有typeof v === "typename"和typeof v !== "typename"两种形式能被识别
typeof 只能用于 "number", "string", "boolean", "symbol"
TypeScript并不会阻止你与其它字符串比较，语言不会把那些表达式识别为类型守卫

instanceof类型守卫

instanceof用于守护类

function getRandomPadder() {    return Math.random() < 0.5 ?        new SpaceRepeatingPadder(4) :        new StringPadder("  ");}// 类型为SpaceRepeatingPadder | StringPadderlet padder: Padder = getRandomPadder();if (padder instanceof SpaceRepeatingPadder) {    padder; // 类型细化为'SpaceRepeatingPadder'}if (padder instanceof StringPadder) {    padder; // 类型细化为'StringPadder'}

泛型约束

使用 extends 约束泛型 T 必须符合接口 Lengthwise 的形状，也就是必须包含 length 属性

interface Lengthwise {    length: number;}function loggingIdentity<T extends Lengthwise>(arg: T): T {    console.log(arg.length);    return arg;}

索引类型

索引类型查询操作符 ( keyof )
索引访问操作符 ( T[K] )
对于任何类型 T， keyof T的结果为 T上已知的公共属性名联合的字符串字面量类型

举个例子：

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {    return obj[key]}interface IObj {    name: string;    age: number;    male: boolean;}const obj:IObj = {    name: 'zhangsan',    age: 18,    male: true}let x1 = getProperty(obj, 'name') // 允许，x1的类型为stringlet x2 = getProperty(obj, 'age') // 允许，x2的类型为numberlet x3 = getProperty(obj, 'male') // 允许，x3的类型为booleanlet x4 = getProperty(obj, 'sex') // 报错：Argument of type '"sex"' is not // assignable to parameter of type '"name" | "age" | "male"'.

上述例子，定义了一个getProperty函数，来获取指定对象的指定属性
首先，使用keyof关键字，获得泛型T上已知的公共属性名联合的字符串字面量类型'name' | 'age' | 'male'
然后，使用泛型约束K extends keyof T限制K只能是'name' | 'age' | 'male'中的一个值
而T[K]则代表对象里对应key的元素的类型

更好的理解索引类型

function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {    return names.map(n => o[n]);}// T[K][]也可以写成 Array<T[K]>interface Person {    name: string;    age: number;    sex: string;}let person: Person = {    name: 'Jarid',    age: 35,    sex: '男',};let strings: string[] = pluck(person, ['name', 'sex']); // ok, string[], [ 'Jarid', '男' ]let numbers: number[] = pluck(person, ['age']); // ok, number[], [ 35 ]let persons: (string | number)[] = pluck(person, ['name', 'sex', 'age']); // [ 'Jarid', '男', 35 ]

动态声明字符串字面量类型

结合type`keyof我们就可以获取跟随interface Person`变化的字符串字面量类型

interface Person {    name: string;    age: number;    location: string;} type K1 = keyof Person; // "name" | "age" | "location"type K2 = keyof Person[];  // "length" | "push" | "pop" | "concat" | ...type K3 = keyof { [x: string]: Person };  // string

映射类型 - 从旧类型中创建新类型

interface Person {    name: string;    age: number;}type Partial<T> = {    [P in keyof T]?: T[P];}type PersonPartial = Partial<Person>;---------------------------------------type Readonly<T> = {    readonly [P in keyof T]: T[P];   }type ReadonlyPerson = Readonly<Person>;// 相当于type ReadonlyPerson = {  readonly name: string;  readonly age: number;}

实用工具类型

TypeScript提供一些工具类型来帮助常见的类型转换
详见

Omit<T, K> TypeScript 3.5 //让我们可以从一个对象类型中剔除某些属性，并创建一个新的对象类型Partial<T>，TypeScript 2.1 // 将构造类型T所有的属性设置为可选的Readonly<T>，TypeScript 2.1 // 将构造类型T所有的属性设置为只读的Record<K,T>，TypeScript 2.1 // 可用来将某个类型的属性映射到另一个类型上Pick<T,K>，TypeScript 2.1 // 从类型T中挑选部分属性K来构造类型Exclude<T,U>，TypeScript 2.8 // 从类型T中剔除所有可以赋值给U的属性，然后构造一个类型Extract<T,U>，TypeScript 2.8 // 从类型T中提取所有可以赋值给U的类型，然后构造一个类型NonNullable<T>，TypeScript 2.8 // 从类型T中剔除null和undefined，然后构造一个类型ReturnType<T>，TypeScript 2.8 // 由函数类型T的返回值类型构造一个类型InstanceType<T>，TypeScript 2.8 // 由构造函数类型T的实例类型构造一个类型Required<T>，TypeScript 2.8 // 构造一个类型，使类型T的所有属性为required必选ThisType<T>，TypeScript 2.8 // 这个工具不会返回一个转换后的类型。它做为上下文的this类型的一个标记。注意，若想使用此类型，必须启用--noImplicitThis

react 中使用 TypeScript

在 react 中使用 ts 的几点原则和变化

所有用到jsx语法的文件都需要以tsx后缀命名
使用组件声明时的Component<P, S>泛型参数声明，来代替PropTypes！
全局变量或者自定义的window对象属性，统一在项目根下的global.d.ts中进行声明定义
对于项目中常用到的接口数据对象，在types/目录下定义好其结构化类型声明

类组件的声明

class App extends Component<IProps, IState> {    static defaultProps = {        // ...    }        readonly state = {        // ...    };     // 小技巧：如果state很复杂不想一个个都初始化，    // 可以结合类型断言初始化state为空对象或者只包含少数必须的值的对象:    // readonly state = {} as IState;}

ts 断言参考资料

需要特别强调的是，如果用到了state，除了在声明组件时通过泛型参数传递其state结构，还需要在初始化state时声明为 readonly 这是因为我们使用 class properties 语法对state做初始化时，会覆盖掉Component<P, S>中对state的readonly标识。

函数式组件的声明

// SFC: stateless function components// v16.7起，由于hooks的加入，函数式组件也可以使用state，所以这个命名不准确。// 新的react声明文件里，也定义了React.FC类型const List: React.SFC<IProps> = props => null

TypeScript 中使用React Hook

useState

大多数情况下，useState 的类型可以从初始化值推断出来。但当我们初始化值为 null、undefined或者对象以及数组的时候，我们需要制定useState的类型

// 可以推断 age 是 number类型const [age, setAge] = useState(20);// 初始化值为 null 或者 undefined时，需要显示指定 name 的类型const [name, setName] = useState<string>();// 初始化值为一个对象时interface People {    name: string;    age: number;    country?: string;}const [owner, setOwner] = useState<People>({name: 'rrd_fe', age: 5});// 初始化值是一个数组时const [members, setMembers] = useState<People[]([]);

其他钩子函数详见TypeScript 中使用React Hook

class组件都要指明props和state类型吗？

只要在组件内部使用了props和state，就需要在声明组件时指明其类型。
但是，只要我们初始化了state，貌似即使没有声明state的类型，也可以正常调用以及setState。不过，这么做会让组件丢失对state的访问和类型检查！

// bad oneclass App extends Component {    state = {        a: 1,        b: 2    }     componentDidMount() {        this.state.a // ok: 1         // 假如通过setState设置并不存在的c，TS无法检查到。        this.setState({            c: 3        })；                this.setState(true)； // ???    }    // ...} // React Componentclass Component<P, S> {        constructor(props: Readonly<P>);        setState<K extends keyof S>(            state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),            callback?: () => void        ): void;        forceUpdate(callBack?: () => void): void;        render(): ReactNode;        readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;        state: Readonly<S>;        context: any;        refs: {            [key: string]: ReactInstance        };    }  // interface IState{//    a: number,//    b: number// }// good oneclass App extends Component<{}, { a: number, b: number }> {       readonly state = {        a: 1,        b: 2    }        //readonly state = {} as IState,断言全部为一个值     componentDidMount() {        this.state.a // ok: 1         //正确的使用了 ts 泛型指示了 state 以后就会有正确的提示        // error: '{ c: number }' is not assignable to parameter of type '{ a: number, b: number }'        this.setState({            c: 3        })；    }    // ...}

使用react高阶组件

什么是 react 高阶组件？装饰器？

因为react中的高阶组件本质上是个高阶函数的调用，所以高阶组件的使用，我们既可以使用函数式方法调用，也可以使用装饰器。但是在TS中，编译器会对装饰器作用的值做签名一致性检查，而我们在高阶组件中一般都会返回新的组件，并且对被作用的组件的props进行修改（添加、删除）等。这些会导致签名一致性校验失败，TS会给出错误提示。这带来两个问题：

第一，是否还能使用装饰器语法调用高阶组件？

如果这个高阶组件正确声明了其函数签名，那么应该使用函数式调用，比如 withRouter：

import { RouteComponentProps } from 'react-router-dom'; const App = withRouter(class extends Component<RouteComponentProps> {    // ...});// 以下调用是ok的<App />

如上例子，我们在声明组件时，注解了组件的props是路由的RouteComponentProps结构类型，但是我们在调用App组件时，并不需要告知RouteComponentProps里具有的location、history等值，这是因为withRouter这个函数自身对其做了正确的类型声明。

第二，使用装饰器语法或者没有函数类型签名的高阶组件怎么办？

就是将高阶组件注入的属性都声明可选（通过Partial这个映射类型），或者将其声明到额外的injected组件实例属性上。

import { RouteComponentProps } from 'react-router-dom'; // 方法一@withRouterclass App extends Component<Partial<RouteComponentProps>> {    public componentDidMount() {        // 这里就需要使用非空类型断言了        this.props.history!.push('/');    }    // ...}); // 方法二@withRouterclass App extends Component<{}> {    get injected() {        return this.props as RouteComponentProps    }     public componentDidMount() {        this.injected.history.push('/');    }    // ...

如何正确的声明高阶组件？

声明withVisible这个高阶组件时，利用泛型和类型推导，对高阶组件返回的新的组件以及接收的参数组件的props都做出类型声明。

interface IVisible {    visible: boolean;}  //排除 IVisiblefunction withVisible<Self>(WrappedComponent: React.ComponentType<Self & IVisible>): React.ComponentType<Omit<Self, 'visible'>> {    return class extends Component<Self> {        render() {            return <WrappedComponent {...this.props}  visible={true} />        }    }}

拓展阅读

TypeScript 资源集（github地址）

参考文章
TypeScript 入门教程
使用 TypeScript 装饰器装饰你的代码
优雅的在 react 中使用 TypeScript
TypeScript 中使用React Hook
TypeScript体系调研报告