一些需要注意的ts

Posted 2021-01-23 chenjinxinlove

写了一段时间ts，在从头学习一遍，温故而之新

ts的一些技巧

1、巧用注释

通过/** */形式的注释可以给 TS 类型做标记，编辑器会有更好的提示：

/** A cool guy. */
interface Person {
  /** A cool name. */
  name: string,
}

2、巧用注释 进阶

注释有很多规范的字段，基本和 JSDOC 一致。但不用着急翻文档，在 /** */ 里输入 @ 就可以看到丰富的选择

3、巧用 typeof

我们一般先写类型，再使用：

interface Opt {
  timeout: number
}
const defaultOption: Opt = {
  timeout: 500
}
有时候可以反过来：

const defaultOption = {
  timeout: 500
}
type Opt = typeof defaultOption
当一个 interface 总有一个字面量初始值时，可以考虑这种写法以减少重复代码。

4、巧用联合类型

// ?? Not good.
interface Dinner1 {
  fish?: number,
  bear?: number,
}

// ?? Awesome!
type Dinner2 = {
  fish: number,
} | {
  bear: number,
}

5、巧用查找类型+泛型+keyo

interface API {
  ‘/user‘: { name: string },
  ‘/menu‘: { foods: Food[] },
}
const get = <URL extends keyof API>(url: URL): Promise<API[URL]> => {
  return fetch(url).then(res => res.json())
}

6、巧用显式泛型

$(‘button‘) 是个 DOM 元素选择器，可是返回值的类型是运行时才能确定的，除了返回 any ，还可以

function $<T extends htmlElement>(id: string):T {
  return document.getElementById(id)
}

// Tell me what element it is.
$<HTMLInputElement>(‘input‘).value
函数泛型不一定非得自动推导出类型，有时候显式指定类型就好。

7、巧用 DeepReadonly

type DeepReadonly<T> = {
  readonly [P in keyof T]: DeepReadonly<T[P]>;
}

const a = { foo: { bar: 22 } }
const b = a as DeepReadonly<typeof a>
b.foo.bar = 33 // Hey, stop!

8、巧用 Omit

import { Button, ButtonProps } from ‘./components/button‘

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>
type BigButtonProps = Omit<ButtonProps, ‘size‘>

function BigButton(props: BigButtonProps) {
  return Button({ ...props, size: ‘big‘ })
}

一些知识点

1、交叉类型 (intersection types)与联合类型 (union types)

TypeScript 1.6 引入了交叉类型作为联合类型 (union types) 逻辑上的补充. 联合类型 A | B 表示一个类型为 A 或 B 的实体, 而交叉类型 A & B 表示一个类型同时为 A 或 B 的实体.

function extend<T, U>(first: T, second: U): T & U {
    let result = <T & U> {};
    for (let id in first) {
        result[id] = first[id];
    }
    for (let id in second) {
        if (!result.hasOwnProperty(id)) {
            result[id] = second[id];
        }
    }
    return result;
}

var x = extend({ a: "hello" }, { b: 42 });
var s = x.a;
var n = x.b;

type LinkedList<T> = T & { next: LinkedList<T> };

interface Person {
    name: string;
}
var people: LinkedList<Person>;
var s = people.name;
var s = people.next.name;
var s = people.next.next.name;
var s = people.next.next.next.name;
interface A { a: string }
interface B { b: string }
interface C { c: string }

var abc: A & B & C;
abc.a = "hello";
abc.b = "hello";
abc.c = "hello";

2、abstract (抽象的) 类和方法

TypeScript 1.6 为类和它们的方法增加了 abstract 关键字. 一个抽象类允许没有被实现的方法, 并且不能被构造.

abstract class Base {
    abstract getThing(): string;
    getOtherThing() { return ‘hello‘; }
}

let x = new Base(); // 错误, ‘Base‘ 是抽象的

// 错误, 必须也为抽象类, 或者实现 ‘getThing‘ 方法
class Derived1 extends Base { }

class Derived2 extends Base {
    getThing() { return ‘hello‘; }
    foo() {
        super.getThing();// 错误: 不能调用 ‘super‘ 的抽象方法
    }
}

var x = new Derived2(); // 正确
var y: Base = new Derived2(); // 同样正确
y.getThing(); // 正确
y.getOtherThing(); // 正确

3、keyof和查找类型

在javascript中属性名称作为参数的API是相当普遍的，但是到目前为止还没有表达在那些API中出现的类型关系。
输入索引类型查询或keyof，索引类型查询keyof T产生的类型是T的属性名称。keyof T的类型被认为是string的子类型。

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

4、索引访问类型，也称为查找类型

type P1 = Person["name"];  // string
type P2 = Person["name" | "age"];  // string | number
type P3 = string["charAt"];  // (pos: number) => string
type P4 = string[]["push"];  // (...items: string[]) => number
type P5 = string[][0];  // string

将这种模式和类型系统的其它部分一起使用，以获取类型安全的查找

function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];  // 推断类型是T[K]
}

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]) {
    obj[key] = value;
}

let x = { foo: 10, bar: "hello!" };

let foo = getProperty(x, "foo"); // number
let bar = getProperty(x, "bar"); // string

let oops = getProperty(x, "wargarbl"); // 错误！"wargarbl"不存在"foo" | "bar"中

setProperty(x, "foo", "string"); // 错误！, 类型是number而非string

5、映射类型

使用现有类型并使其每个属性完全可选

interface Person {
    name: string;
    age: number;
    location: string;
}

Person的可选属性类型将是这样：

interface PartialPerson {
    name?: string;
    age?: number;
    location?: string;
}

使用映射类型，PartialPerson可以写成是Person类型的广义变换:

type Partial<T> = {
    [P in keyof T]?: T[P];
};

type PartialPerson = Partial<Person>;

映射类型可以表示许多有用的类型转换：

// 保持类型相同，但每个属性是只读的。
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

// 相同的属性名称，但使值是一个Promise，而不是一个具体的值
type Deferred<T> = {
    [P in keyof T]: Promise<T[P]>;
};

// 为T的属性添加代理
type Proxify<T> = {
    [P in keyof T]: { get(): T[P]; set(v: T[P]): void }
};

6、Partial,Readonly,Record和Pick

Partial和Readonly，如前所述，是非常有用的结构。你可以使用它们来描述像一些常见的JS程序：

function assign<T>(obj: T, props: Partial<T>): void;
function freeze<T>(obj: T): Readonly<T>;

因此，它们现在默认包含在标准库中。
我们还包括两个其他实用程序类型：Record和Pick。

// 从T中选取一组属性K
declare function pick<T, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K>;

const nameAndAgeOnly = pick(person, "name", "age");  // { name: string, age: number }
// 对于类型T的每个属性K，将其转换为U
function mapObject<K extends string | number, T, U>(obj: Record<K, T>, f: (x: T) => U): Record<K, U>

const names = { foo: "hello", bar: "world", baz: "bye" };
const lengths = mapObject(names, s => s.length);  // { foo: number, bar: number, baz: number }

其他不错的地址

weekly 2.0-2.9 精读

react的技巧

TypeScript 2.8下的终极React组件模式
react-redux-typescript-guide
复杂 React 应用中的TypeScript 3.0实践

库react-redux-typescript-guide

其他一些知识点2.8

Deep Readonly

interface DeepReadonlyArray<T> extends ReadonlyArray<DeepReadonly<T>> {}

type DeepReadonlyObject<T> = {
    readonly [P in keyof T]: DeepReadonly<T[P]>
}

type DeepReadonly<T> =
    T extends (infer R)[]
      ? DeepReadonlyArray<R>
      : T extends Function
        ? T
        : T extends object
          ? DeepReadonlyObject<T>
          : T

Mutable

type Mutable<T> = { -readonly [P in keyof T]: T[P] }

利用 ReturnType 直接拿 type 可以减少 boilerplate

还有两个很常见但一直没有被收进的

Diff
type Diff<T extends string, U extends string> = ({[P in T]: P } & {[P in U]: never } & { [x: string]: never })[T]
2.8 内置了 Exclude 作为官方版的 Diff
Omit
type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>

TS 中的内置类型简述

Partial 局部的；偏爱的；不公平的 美 [‘pɑr??l]

ts 中的实现

// node_modules/typescript/lib/lib.es5.d.ts

type Partial<T> = {
    [P in keyof T]?: T[P];
};

这个类型的用处就是可以将某个类型里的属性加上 ? 这个 modifier ，加了这个 modifier 之后那些属性就可以为 undefined 了。

举个例子，我有个接口 Person ，里面定义了两个必须的属性 name 和 age。

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

// error , property age is missing.
const axes: Person = {
    name: ‘axes‘
}
如果使用了 Partial

type NewPerson = Partial<Person>;

// correct, because age can be undefined.
const axes: NewPerson = {
    name: ‘axes‘
}
这个 NewPerson 就等同于

interface Person {
    name?: string;
    age?: number;
}
但是 Partial 有个局限性，就是只支持处理第一层的属性，如果我的接口定义是这样的

interface Person {
    name: string;
    age: number;
    child: {
      name: string;
      age: number;
    }
}

type NewPerson = Partial<Person>;

// error, property age in child is missing
const axes: NewPerson = {
  name: ‘axes‘;
  child: {
    name: ‘whx‘
  }
}
可以看到，第二层以后的就不会处理了，如果要处理多层，就可以自己通过 Conditional Types 实现一个更强力的 Partial

export type PowerPartial<T> = {
     // 如果是 object，则递归类型
    [U in keyof T]?: T[U] extends object
      ? PowerPartial<T[U]>
      : T[U]
};

Required 必需的；（美）必修的 美 [r?‘kwa?rd]

// node_modules/typescript/lib/lib.es5.d.ts

type Required<T> = {
    [P in keyof T]-?: T[P];
};

这个类型刚好跟 Partial 相反，Partial 是将所有属性改成不必须，Required 则是将所有类型改成必须。

其中 -? 是代表移除 ? 这个 modifier 的标识。再拓展一下，除了可以应用于 ? 这个 modifiers ，还有应用在 readonly ，比如 Readonly 这个类型

// node_modules/typescript/lib/lib.es5.d.ts

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

就可以给子属性添加 readonly 的标识，如果将上面的 readonly 改成 -readonly 就是移除子属性的 readonly 标识。

Pick 挑选；采摘；挖 美 [p?k]

// node_modules/typescript/lib/lib.es5.d.ts

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

这个类型则可以将某个类型中的子属性挑出来，比如上面那个 Person 的类

type NewPerson = Pick<Person, ‘name‘>; // { name: string; }

可以看到 NewPerson 中就只有个 name 的属性了，这个类型还有更有用的地方，等讲到 Exclude 类型会说明。

Record 记录，记载；标明；将...录音 美 [(for v.) r??k?rd; (for n.) ?rek?rd;?r?k?d]

// node_modules/typescript/lib/lib.es5.d.ts

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

可以获得根据 K 中的所有可能值来设置 key 以及 value 的类型

type T11 = Record<‘a‘ | ‘b‘ | ‘c‘, Person>; // { a: Person; b: Person; c: Person; }

Exclude 排除；排斥；拒绝接纳；逐出 美 [?k‘skl?d]

// node_modules/typescript/lib/lib.es5.d.ts

type Exclude<T, U> = T extends U ? never : T;

个类型可以将 T 中的某些属于 U 的类型移除掉，举个例

type T00 = Exclude<"a" | "b" | "c" | "d", "a" | "c" | "f">;  // "b" | "d"
可以看到 T 是 "a" | "b" | "c" | "d" ，然后 U 是 "a" | "c" | "f" ，返回的新类型就可以将 U 中的类型给移除掉，也就是 "b" | "d" 了。

那这个类型有什么用呢，在我看来，可以结合 Pick 类型使用。

在我们给 js 写声明的时候，经常会遇到我们需要 extend 某个接口，但是我们又需要在新接口中将某个属性给 overwrite 掉，但是这样经常会遇到类型兼容性问题。举个例子

interface Chicken {
    name: string;
    age: number;
    egg: number;
}
我需要继承上面这个接口

// error, Types of property ‘name‘ are incompatible
interface NewChicken extends Chicken {
  name: number;
}
可以看到就会报错了，因为在 Chicken 中 name 是 string 类型，而 NewChicken 却想重载成 number 类型。很多时候可能有人就直接把 name 改成 any 就算了，但是不要忘了我们有个 Pick 的类型，可以把我们需要的类型挑出来，那就可以这样

// correct.
interface NewChicken extends Pick<Chicken, ‘age‘ | ‘egg‘> {
  name: number;
}
可以看到，我们把 Person 中的类型做了挑选，只把 age 和 egg 类型挑出来 extend ，那么我复写 name 就没问题了。

不过再想一下，如果我要继承某个接口并且复写某一个属性，还得把他的所有属性都写出来么，当然不用，我们可以用 Exclude 就可以拿到除 name 之外的所有属性的 key 类型了。

type T01 = Exclude<keyof Chicken, ‘name‘>; // ‘age‘ | ‘egg‘
然后把上面代码加到 extend 中就成了

// correct.
interface NewChicken extends Pick<Chicken, Exclude<keyof Chicken, ‘name‘>> {
  name: number;
}
然后还可以把这个处理封装成一个单独的类型

type FilterPick<T, U> = Pick<T, Exclude<keyof T, U>>;
然后上面的 extend 的代码就可以写成这样，就更简洁了

interface NewChicken extends FilterPick<Chicken, ‘name‘> {
  name: number;
}
这样一来，我们就可以愉快的进行属性 overwrite 了。

ReturnType

// node_modules/typescript/lib/lib.es5.d.ts

type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

这个类型也非常好用，可以获取方法的返回类型，可能有些人看到这一长串就被绕晕了，但其实也是使用了 Conditional Types ，推论 ( infer ) 泛型 T 的返回类型 R 来拿到方法的返回类型

实际使用的话，就可以通过 ReturnType 拿到方法的返回类型，如下的示例

function TestFn() {
  return ‘123123‘;
}

type T01 = ReturnType<typeof TestFn>; // string

ThisType

// node_modules/typescript/lib/lib.es5.d.ts

interface ThisType<T> { }

可以看到声明中只有一个接口，没有任何的实现，说明这个类型是在 ts 源码层面支持的，而不是通过类型变换，那这个类型有啥用呢，是用于指定上下文对象类型的。

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

const obj: ThisType<Person> = {
  dosth() {
    this.name // string
  }
}
这样的话，就可以指定 obj 里的所有方法里的上下文对象改成 Person 这个类型了。跟

const obj = {
  dosth(this: Person) {
    this.name // string
  }
}
差不多效果。

NonNullable

// node_modules/typescript/lib/lib.es5.d.ts

type NonNullable<T> = T extends null | undefined ? never : T;

根据实现可以很简单的看出，这个类型可以用来过滤类型中的 null 及 undefined 类型

type T22 = ‘123‘ | ‘222‘ | null;
type T23 = NonNullable<T22>; // ‘123‘ | ‘222‘

其他常用

PromiseType

export type PromiseType<T extends Promise<any>> = T extends Promise<infer R>  ? R  : any;