TypeScript中的类型运算符

类型运算符

1. keyof运算符

1. 简介

是一个单目运算符，接受一个对象类型作为参数，返回该对象的所有键名组成的联合类型。

type MyObj = {foo: number,bar: string,
};type Keys = keyof MyObj; // 'foo'|'bar'

这个例子keyof MyObj返回MyObj的所有键名组成的联合类型，即'foo'|'bar'

由于 JavaScript 对象的键名只有三种类型，所以对于任意对象的键名的联合类型就是string|number|symbol。

对于没有自定义键名的类型使用 keyof 运算符，返回never类型，表示不可能有这样类型的键名

type KeyT = keyof object;  // never

上面示例中，由于object类型没有自身的属性，也就没有键名，所以keyof object返回never类型。

由于 keyof 返回的类型是string|number|symbol，如果有些场合只需要其中的一种类型，那么可以采用交叉类型的写法。

type Capital<T extends string> = Capitalize<T>;type MyKeys<Obj extends object> = Capital<keyof Obj>; // 报错
type MyKeys<Obj extends object> = Capital<string & keyof Obj>;

这个列子中，string & keyof Obj等同于string & string|number|symbol进行交集运算，最后返回string，因此Capital<T extends string>就不会报错了。

如果对象属性名采用索引形式，keyof 会返回属性名的索引类型。

// 示例一
interface T {[prop: number]: number;
}// number
type KeyT = keyof T;// 示例二
interface T {[prop: string]: number;
}// string|number
type KeyT = keyof T;

上面的示例二，keyof T返回的类型是string|number，原因是 JavaScript 属性名为字符串时，包含了属性名为数值的情况，因为数值属性名会自动转为字符串

如果 keyof 运算符用于数组或元组类型，得到的结果可能出人意料。

type Result = keyof ['a', 'b', 'c'];
// 返回 number | "0" | "1" | "2"
// | "length" | "pop" | "push" | ···

上面示例中，keyof 会返回数组的所有键名，包括数字键名和继承的键名。

对于联合类型，keyof 返回成员共有的键名。

type A = { a: string; z: boolean };
type B = { b: string; z: boolean };// 返回 'z'
type KeyT = keyof (A | B);

对于交叉类型，keyof 返回所有键名。

type A = { a: string; x: boolean };
type B = { b: string; y: number };// 返回 'a' | 'x' | 'b' | 'y'
type KeyT = keyof (A & B);// 相当于
keyof (A & B) ≡ keyof A | keyof B

keyof 取出的是键名组成的联合类型，如果想取出键值组成的联合类型，可以像下面这样写。

type MyObj = {foo: number,bar: string,
};type Keys = keyof MyObj;type Values = MyObj[Keys]; // number|string

上面示例中，Keys是键名组成的联合类型，而MyObj[Keys]会取出每个键名对应的键值类型，组成一个新的联合类型，即number|string。

2. keyof运算符的用途

• 往往用于精确表达对象的属性类型
• 用于属性映射，即将一个类型的所有属性逐一映射成其他值

2. in运算符

在js中in用来确定对象是否包含某个属性名，在ts 类型运算中，in运算符用来取出（遍历）联合类型的每一个成员类型。

type U = 'a'|'b'|'c';type Foo = {[Prop in U]: number;
};
// 等同于
type Foo = {a: number,b: number,c: number
};

[Prop in U]表示依次取出联合类型U的每一个成员。

3. 方括号运算符

用来取出对象的键值类型，比如T[K]会返回对象T的属性K的类型。

type Person = {age: number;name: string;alive: boolean;
};
// Age 的类型是 number
type Age = Person['age'];

方括号的参数如果是联合类型，那么返回的也是联合类型。

type Person = {age: number;name: string;alive: boolean;
};// number|string
type T = Person['age'|'name'];// number|string|boolean
type A = Person[keyof Person];

如果访问不存在的属性，会报错。

type T = Person['notExisted']; // 报错

方括号运算符的参数也可以是属性名的索引类型。

type Obj = {[key:string]: number,
};// number
type T = Obj[string];

这个语法对于数组也适用，可以使用number作为方括号的参数。

// MyArray 的类型是 { [key:number]: string }
const MyArray = ['a','b','c'];// 等同于 (typeof MyArray)[number]
// 返回 string
type Person = typeof MyArray[number];

上面示例中，MyArray是一个数组，它的类型实际上是属性名的数值索引，而typeof MyArray[number]的typeof运算优先级高于方括号，所以返回的是所有数值键名的键值类型string。

方括号里面不能有值的运算。

// 示例一
const key = 'age';
type Age = Person[key]; // 报错// 示例二
type Age = Person['a' + 'g' + 'e']; // 报错

上面两个示例，方括号里面都涉及值的运算，编译时不会进行这种运算，所以会报错。

4. extends…?:条件运算符

可以根据当前类型是否符合某种条件，返回不同的类型。

T extends U ? X : Y

上面式子中的extends用来判断，类型T是否可以赋值给类型U，即T是否为U的子类型，这里的T和U可以是任意类型。如果T能够赋值给类型U，表达式的结果为类型X，否则结果为类型Y。

// true
type T = 1 extends number ? true : false;

上面示例中，1是number的子类型，所以返回true。

如果需要判断的类型是一个联合类型，那么条件运算符会展开这个联合类型。

(A|B) extends U ? X : Y// 等同于(A extends U ? X : Y) |
(B extends U ? X : Y)

上面示例中，A|B是一个联合类型，进行条件运算时，相当于A和B分别进行运算符，返回结果组成一个联合类型。

如果不希望联合类型被条件运算符展开，可以把extends两侧的操作数都放在方括号里面。

// 示例一
type ToArray<Type> =Type extends any ? Type[] : never;// string[]|number[]
type T = ToArray<string|number>;// 示例二
type ToArray<Type> =[Type] extends [any] ? Type[] : never;// (string | number)[]
type T = ToArray<string|number>;

上面的示例一，传入ToArray<Type>的类型参数是一个联合类型，所以会被展开，返回的也是联合类型。示例二是extends两侧的运算数都放在方括号里面，所以传入的联合类型不会展开，返回的是一个数组。

条件运算符还可以嵌套使用。

type LiteralTypeName<T> =T extends undefined ? "undefined" :T extends null ? "null" :T extends boolean ? "boolean" :T extends number ? "number" :T extends bigint ? "bigint" :T extends string ? "string" :never;// "bigint"
type Result1 = LiteralTypeName<123n>;// "string" | "number" | "boolean"
type Result2 = LiteralTypeName<true | 1 | 'a'>;

上面示例是一个多重判断，返回一个字符串的值类型，对应当前类型。

5. infer关键字

用来定义泛型里面推断出来的类型参数，而不是外部传入的类型参数。它通常跟条件运算符一起使用，用在extends关键字后面的父类型中。

type Flatten<Type> = Type extends Array<infer Item> ? Item : Type;

上面示例中，infer Item表示Item这个参数是 TypeScript 自己推断出来的，不用显式传入，而Flatten<Type>则表示Type这个类型参数是外部传入的。Type extends Array<infer Item>则表示，如果参数Type是一个数组，那么就将该数组的成员类型推断为Item，即Item是从Type推断出来的。

一旦使用Infer Item定义了Item，后面的代码就可以直接调用Item了。下面是上例的泛型Flatten<Type>的用法。

// string
type Str = Flatten<string[]>;// number
type Num = Flatten<number>;

上面示例中，第一个例子Flatten<string[]>传入的类型参数是string[]，可以推断出Item的类型是string，所以返回的是string。第二个例子Flatten<number>传入的类型参数是number，它不是数组，所以直接返回自身。

如果不用infer定义类型参数，那么就要传入两个类型参数。

type Flatten<Type, Item> =Type extends Array<Item> ? Item : Type;

上面是不使用infer的写法，每次调用Flatten的时候，都要传入两个参数，就比较麻烦。

下面的例子使用infer，推断函数的参数类型和返回值类型。

type ReturnPromise<T> =T extends (...args: infer A) => infer R ? (...args: A) => Promise<R> : T;

上面示例中，如果T是函数，就返回这个函数的 Promise 版本，否则原样返回。infer A表示该函数的参数类型为A，infer R表示该函数的返回值类型为R。

如果不使用infer，就不得不把ReturnPromise<T>写成ReturnPromise<T, A, R>，这样就很麻烦，相当于开发者必须人肉推断编译器可以完成的工作。

下面是infer提取对象指定属性的例子。

type MyType<T> =T extends {a: infer M,b: infer N} ? [M, N] : never;// 用法示例
type T = MyType<{ a: string; b: number }>;
// [string, number]

上面示例中，infer提取了参数对象的属性a和属性b的类型。

下面是infer通过正则匹配提取类型参数的例子。

type Str = 'foo-bar';type Bar = Str extends `foo-${infer rest}` ? rest : never // 'bar'

上面示例中，rest是从模板字符串提取的类型参数。

6. is运算符

函数返回布尔值时，可以使用is运算符，来限定返回值与参数之间的关系。

is运算符用来描述返回值是true还是false。

function isFish(pet: Fish|Bird
):pet is Fish {return (pet as Fish).swim !== undefined;
}

上面示例中，函数isFish()的返回值类型为pet is Fish，表示如果参数pet类型为Fish，则返回true，否则返回false。

is运算符总是用于描述函数的返回值类型，写法采用parameterName is Type的形式，即左侧为当前函数的参数名，右侧为某一种类型。它返回一个布尔值，表示左侧参数是否属于右侧的类型。

is运算符可以用于类型保护。

function isCat(a:any): a is Cat {return a.name === 'kitty';
}let x:Cat|Dog;if (isCat(x)) {x.meow(); // 正确，因为 x 肯定是 Cat 类型
}

上面示例中，函数isCat()的返回类型是a is Cat，它是一个布尔值。后面的if语句就用这个返回值进行判断，从而起到类型保护的作用，确保x是 Cat 类型，从而x.meow()不会报错（假定Cat类型拥有meow()方法）

is运算符还有一种特殊用法，就是用在类（class）的内部，描述类的方法的返回值。

class Teacher {isStudent():this is Student {return false;}
}class Student {isStudent():this is Student {return true;}
}

上面示例中，isStudent()方法的返回值类型，取决于该方法内部的this是否为Student对象。如果是的，就返回布尔值true，否则返回false。

注意，this is T这种写法，只能用来描述方法的返回值类型，而不能用来描述属性的类型。

7. 模板字符串

ts可以使用模板字符串构建类型，模板字符串最大的特点就是内部可以引用其他类型。

type World = "world";// "hello world"
type Greeting = `hello ${World}`;

上面示例中，类型Greeting是一个模板字符串，里面引用了另一个字符串类型world，因此Greeting实际上是字符串hello world

模板字符串可以引用的类型一共6种，分别是 string、number、bigint、boolean、null、undefined。引用这6种以外的类型会报错。

模板字符串里面引用的类型，如果是一个联合类型，那么它返回的也是一个联合类型，即模板字符串可以展开联合类型。

type T = 'A'|'B';// "A_id"|"B_id"
type U = `${T}_id`;

上面示例中，类型U是一个模板字符串，里面引用了一个联合类型T，导致最后得到的也是一个联合类型。

如果模板字符串引用两个联合类型，它会交叉展开这两个类型。

type T = 'A'|'B';type U = '1'|'2';// 'A1'|'A2'|'B1'|'B2'
type V = `${T}${U}`;

上面示例中，T和U都是联合类型，各自有两个成员，模板字符串里面引用了这两个类型，最后得到的就是一个4个成员的联合类型。

8. satisfies运算符

！！！后期补