跳转至

TypeScript 的复杂类型

泛型

与其他一些支持泛型的语言不同,TypeScript 的泛型并不会为每一种类型生成一份代码,只是检查是否每一种可能的类型都可以兼容,在运行中仍然使用同一份代码。

可以在声明函数、类、接口和类型时声明泛型:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
function identity<Type>(arg: Type): Type {
    return arg;
}

const identity = <Type>(arg: Type): Type => arg;

class GenericNumber<NumType> {
    zeroValue: NumType;
    add: (x: NumType, y: NumType) => NumType;
}

interface Request<ReqBody, ResBody> {
    request: ReqBody;
    response: ResBody;
}

type MaybeArray<Value> = Value | Value[];

可以通过以下方式使用前面定义的泛型:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
identity<number>(1);

const num = new GenericNumber<number>();

const req: Request<{ action: string }, { result: string }> = {
    request: {
        action: 'update system',
    },
    response: {
        result: 'succeeded',
    },
};

let nums: MaybeArray<number> = 0;
nums = [0, 1, 2];

可以为泛型添加限制和默认值,也可以由编译器推断泛型类型:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function identity<Type = number>(arg: Type): Type {
    return arg;
}

identity(1);

function identity<Type extends { data: string }>(arg: Type): string {
    return arg.data;
}

identity({ data: '' });  // inferred Type = { data: string }

需要注意的是泛型只能使用类型作为参数,如果需要某个值的类型,可以使用 typeof

keyoftypeof 关键字

typeof 除了可以作为运算符获取变量类型以外,用作类型标注时,可以获取变量的具体类型(而非作为运算符时的有限种类):

1
2
3
4
5
6
7
8
9
const someObj = {
    foo: 1,
    bar: '2',
};

// inferred arg: { foo: number; bar: string }
function f(arg: typeof someObj) {
    /* do something */
}

keyof 可以获取类型的键的类型(作为枚举):

1
2
3
4
5
6
7
8
9
const someObj = {
    foo: 1,
    bar: '2',
};

// inferred arg: 'foo' | 'bar'
function f(arg: keyof typeof someObj) {
    /* do something */
}

但 TypeScript 的一个缺陷是,使用 for...in 语法时并不会自动推断为 keyof,例如:

1
2
3
4
5
6
7
8
9
const someObj = {
    foo: 1,
    bar: '2',
};

for (const key in someObj) {
    // inferred key: string, value: any
    const value = someObj[key];
}

访问类型内部

通过这种方式可以获取一个类型中的部分内容:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
interface SomeComplexType {
    foo: {
        bar: string;
    }[];
}

type Foo = SomeComplexType['foo']; // Foo = { bar: string }[]
// 以下两种等价
type Bar = Foo[number];            // Bar = { bar: string }
type Bar = Foo[0];                 // Bar = { bar: string }

条件类型

可以使用类似三目运算符的语法来编写条件类型:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
interface Animal {
    live(): void;
}

interface Dog extends Animal {
    woof(): void;
}

type Example1 = Dog extends Animal ? number : string;    // Example1 = number

type Example2 = RegExp extends Animal ? number : string; // Example2 = string

这种语法与泛型结合尤为有用:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
type MessageOf<T> = T extends { message: any } ? T['message'] : unknown;

interface Email {
    message: string;
}

interface Dog {
    bark(): void;
}

type EmailMessageContents = MessageOf<Email>;  // EmailMessageContents = string

type DogMessageContents = MessageOf<Dog>;      // DogMessageContents = unknown

只读、可选

通过以下方式标记某一属性为只读或可选:

1
2
3
4
interface SomeType {
    readonly readonlyProperty: string;
    optionalProperty?: string;
}

需要注意的是,这些修饰只会在编译时检查是否违反,在编译后运行时你仍然可能打破这些限制,在使用 JavaScript 调用 TypeScript 库时尤其可能存在。

实用内置类型

TypeScript 内置了多种实用类型,可以帮助我们更简洁地标注一些复杂类型,以下仅做部分展示:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
interface Data {
    key1?: string;
    key2: string;
}

// 以下相同名称的类型内容相同

// 全部属性变为可选
type PartialData = Partial<Data>;
type PartialData = {
    key1?: string;
    key2?: string;
};

// 全部属性变为必选
type FullData = Required<PartialData>;
type FullData = {
    key1: string;
    key2: string;
};

// 全部属性变为只读
type ReadonlyData = Readonly<Data>;
type ReadonlyData = {
    readonly key1?: string;
    readonly key2: string;
};

// 特定类型之间的映射
type DataDict = Record<string, Data>;
type DataDict = {
    // 这种语法表示任意 string 的值 key 都可以作为键
    [key: string]: Data;
};

// 选择部分属性
type DataKey1 = Pick<Data, 'key1'>;
// 忽略部分属性
type DataKey1 = Omit<Data, 'key2'>;
type DataKey1 = {
    key1?: string;
};

function f(a: number, b: string, c: number[]): number {
    return 0;
}
// 获取参数列表
type Args = Parameters<typeof f>;
type Args = [a: number, b: string, c: number[]];

type Ret = ReturnType<typeof f>;
type Ret = number;

最后更新: 2022年9月24日
作者: abmfy