TypeScript 分享

TypeScript是一种开源的编程语言，该语言项目由微软进行维护和管理。TypeScript不仅包含 JavaScript的语法，而且还提供了静态类型检查。

数据类型

基础数据类型

string、number、boolean、symbol、undefined 等

let a: string = "1";
let b: number = 1;
let c = true;

字面量类型

"123"、5 等

const a = "123";
let b = "123";

function f1(a: "123") {
    console.log(a);
}

f1(b); // ❌
f1(a); // ✅

数组类型

let a: string[] = ["1", "2", "3"]; // 使用 Array<string> 声明类型也可以
a.push("1");

元组类型

let a: [number, string, boolean] = [1, "2", true];

元组就是长度确定的数组，并且每一项的数据类型是已知的。访问超过元组长度的位置的元素，会提示错误。

type、interface 自定义类型

type A = {
    name: string;
}
interface B {
    age: number;
}

interface 和 type 的区别

infertace 能 extends 和 implements，type 没有上述功能，但可以使用 & 实现 extends 的功能。

能用 interface 就用 interface，interface 不行就尝试使用 type。

类型操作

&

合并多个对象类型的键到一个对象类型中

type A = {
    a: number;
}

type B = {
    b: number;
}

type C = A & B;
let c: C = {
    a: 1,
    b: 1
}

|

将多个类型组合成联合类型

type A = number | string;
type B = number;

keyof

获取对象类型的键并返回键的联合类型

type A = {
    name: string;
    age: number;
}
type keys = keyof A; // "name" | "age"

in

通过[临时变量 in 联合类型]来遍历对象

type A = {
    [K in "a"|"b"]: number;
}

判断对象是否含有某个属性

type Bird = {
    fly: () => void;
}

type Fish = {
    swim: () => void;
}

function f(p: Bird | Fish) {
    if ('fly' in p) {
        p.fly();
    } else {
        p.swim();
    }
}

typeof

获取值的类型

function f(a: string){
    return a;
}
type F = typeof f; // (a: string) => string;

as

类型断言, typescript只允许类型断言转换为更具体或不太具体的类型，这样可以阻止一些强制行为。

function f(a?: number) {
    if ((a as number).toFixed(3)) {
        // dosomething
    }
}

let a = "hello" as number; // ❌
let x = ("hello" as any) as number; // ✅

泛型推导里重新映射键名

type A = {
    name: string;
    age: number;
}
type Transform<T> = {
    [P in keyof T as `get${Capitalize<string & P>}`]: () => string;
}
type B = Transform<A>;

infer

推导泛型参数，必须在 Distributive Conditional Types 中使用，下面详说。

泛型

主要目的是为了创建可复用的组件和类型推导

function f1(a: unknown) {
    return a;
}

function f2<T>(a: T): T {
    return a;
}

let a1 =  f1(1); // unknown
let a2 = f2(1); // number

常用工具函数的实现和泛型操作

Pick

点击查看代码

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

Partial

点击查看代码

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

Required

点击查看代码

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

Omit

点击查看代码

type MyOmit<T, U> = {
  [P in keyof T as Exclude<P, U>]: T[P];
}

ReturnType

点击查看代码

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

RequireKeys

点击查看代码

type IsOptional<T, P extends keyof T> = Partial<Pick<T, P>> extends Pick<T, P> ? false : true;

type RequiredKeys<T> = keyof {
  [P in keyof T as IsOptional<T, P> extends true ? P : never] : T[P]
};

推荐

type-challenges