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 声明类型也可以
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 = {
    [P in keyof T as `get${Capitalize}`]: () => string;
}
type B = Transform;

infer

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

泛型

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

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

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

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

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

Pick

点击查看代码
type MyPick = {
  [P in U]: T[P];
};

Partial

点击查看代码
type MyPartial = {
  [P in keyof T]?: T[P];
}

Required

点击查看代码
type MyRequired = {
  [P in keyof T]-?: T[P];
}

Omit

点击查看代码
type MyOmit = {
  [P in keyof T as Exclude]: T[P];
}

ReturnType

点击查看代码
type MyReturnType any> = T extends (...args: any) => infer R ? R : any;

RequireKeys

点击查看代码
type IsOptional = Partial> extends Pick ? false : true;

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

推荐

type-challenges