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;

// 不肯定的能够先声明为any
let 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及以上）代码，逐渐的加类型注解，渐进式加强代码健壮性。迁移过程：

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

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

1. 初始化获得的tsconfig.json无需修改，增长"allowJs": true选项。
2. 配置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" }
]

1. 此时你能够写文件名为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 | StringPadder
let 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的类型为string
let x2 = getProperty(obj, 'age') // 容许，x2的类型为number
let x3 = getProperty(obj, 'male') // 容许，x3的类型为boolean
let x4 = getProperty(obj, 'sex') // 报错：Argument of type '"sex"' is not 
// assignable to parameter of type '"name" | "age" | "male"'.

1. 上述例子，定义了一个getProperty函数，来获取指定对象的指定属性
2. 首先，使用keyof关键字，得到泛型T上已知的公共属性名联合的字符串字面量类型'name' | 'age' | 'male'
3. 而后，使用泛型约束K extends keyof T限制K只能是'name' | 'age' | 'male'中的一个值
4. 而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 one
class 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 Component
class 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 one
class 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';
 
// 方法一
@withRouter
class App extends Component<Partial<RouteComponentProps>> {
    public componentDidMount() {
        // 这里就须要使用非空类型断言了
        this.props.history!.push('/');
    }
    // ...
});
 
// 方法二
@withRouter
class App extends Component<{}> {
    get injected() {
        return this.props as RouteComponentProps
    }
 
    public componentDidMount() {
        this.injected.history.push('/');
    }
    // ...

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

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

interface IVisible {
    visible: boolean;
}
 
 //排除 IVisible
function 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体系调研报告