16. 类型运算符

约 4717 字大约 16 分钟

2025-06-03

TypeScript 提供强大的类型运算能力，可以使用各种类型运算符，对已有的类型进行计算，得到新类型。

一、`keyof` 运算符

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

例如：

type MyObj
 = {
  foo
: number;
  bar
: string;
};

type Keys
 = keyof MyObj
; // 'foo' | 'bar'

上面示例中，keyof MyObj 返回 MyObj 的所有键名组成的联合类型，即 'foo'|'bar'。

再例如：

interface T {
  0: boolean;
  a
: string;
  b
(): void;
}

type KeyT
 = keyof T; // 0 | 'a' | 'b'

1、使用场景

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

type KeyT
 = keyof any; // string | number | symbol

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

type KeyT
 = keyof object; // never

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

// 示例一
interface T {
  [prop
: number]: number;
}

type KeyT
 = keyof T; // number

// 示例二
interface V {
  [prop
: string]: number;
}

type KeyV
 = keyof V; // string | number
因为属性为 string 类型时，也支持给属性使用 number 类型

如果 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 };

type KeyT
 = keyof (A
 | B
); // 返回 'z'

对于交叉类型，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、用途

1、精确表达对象的属性类型

举例来说，取出对象的某个指定属性的值，JavaScript 版本可以写成下面这样。

function prop(obj, key) {
  return obj[key];
}

上面这个函数添加类型，只能写成下面这样。

function prop(obj: { [p: string]: any }, key: string): any {
  return obj[key];
}

上面的类型声明有两个问题，一是无法表示参数 key 与参数 obj 之间的关系，二是返回值类型只能写成 any。

有了 keyof 以后，就可以解决这两个问题，精确表达返回值类型。

function prop
<Obj
, K
 extends keyof Obj
>(obj
: Obj
, key
: K
): Obj
[K
] {
  return obj
[key
];
}

上面示例中，K extends keyof Obj 表示 K 是 Obj 的一个属性名，传入其他字符串会报错。返回值类型 Obj[K] 就表示 K 这个属性值的类型。

2、属性映射

keyof 的另一个用途是用于属性映射，即将一个类型的所有属性逐一映射成其他值

type NewProps
<Obj
> = {
  [Prop
 in keyof Obj
]: boolean;
};

// 用法
type MyObj
 = { foo
: number };

type NewObj
 = NewProps
<MyObj
>;
// { foo: boolean; }

上面示例中，类型 NewProps 是类型 Obj 的映射类型，前者继承了后者的所有属性，但是把所有属性值类型都改成了 boolean。

下面的例子是去掉 readonly 修饰符。

type Mutable
<Obj
> = {
  -readonly [Prop
 in keyof Obj
]: Obj
[Prop
];
};

// 用法
type MyObj
 = {
  readonly foo
: number;
};

// 等于 { foo: number; }
type NewObj
 = Mutable
<MyObj
>;

上面示例中，[Prop in keyof Obj] 是 Obj 类型的所有属性名，-readonly 表示去除这些属性的只读特性。对应地，还有 +readonly 的写法，表示添加只读属性设置。

下面的例子是让可选属性变成必有的属性。

type Concrete
<Obj
> = {
  [Prop
 in keyof Obj
]-?: Obj
[Prop
];
};

// 用法
type MyObj
 = {
  foo
?: number;
};

// 等于 { foo: number; }
type NewObj
 = Concrete
<MyObj
>;

上面示例中，[Prop in keyof Obj] 后面的 -? 表示去除可选属性设置。对应地，还有 +? 的写法，表示添加可选属性设置。

二、`in` 运算符

JavaScript 语言中，in 运算符用来确定对象是否包含某个属性名。

in 运算符的左侧是一个字符串，表示属性名，右侧是一个对象。它的返回值是一个布尔值。

const obj = { a: 123 };

if ("a" in obj) {
  console.log("found a");
}

上面示例中，in 运算符用来判断对象 obj 是否包含属性 a。

TypeScript 语言的类型运算中，in 运算符有不同的用法，用来取出并遍历联合类型的每一个成员。

type U
 = "a" | "b" | "c";

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

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

上一小节的例子也提到，[Prop in keyof Obj] 表示取出对象 Obj 的每一个键名。

六、`is` 运算符

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

is 运算符用来描述某个对象的类型是否等于限定的值，返回 true 或者 false。

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

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

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

type A = { a: string };
type B = { b: string };

function isTypeA(x: A | B): x is A {
  if ("a" in x) return true;
  return false;
}

上面示例中，返回值类型 x is A 可以准确描述函数体内部的运算逻辑。

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 这种写法，只能用来描述方法的返回值类型，而不能用来描述属性的类型。

七、模板字符串

TypeScript 允许使用模板字符串，构建类型。

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

type World = "world";

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

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

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

type Num = 123;
type Obj = { n: 123 };

type T1 = `${Num} received`; // 正确
type T2 = `${Obj} received`; // 报错

上面示例中，模板字符串引用数值类型的别名 Num 是可以的，但是引用对象类型的别名 Obj 就会报错。

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

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 个成员的联合类型。

八、satisfies 运算符

有时候，希望保留 TypeScript 对某个对象的类型推断，不去显式的指定这个对象的类型，但是又希望这个值符合类型条件，这时候就可以用 satisfies 运算符对其进行检测。

TypeScript 4.9添加了这个运算符。

1、检测属性名

举例来说，我们可以检测一个对象的属性名是否拼写错误。

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  bleu: [0, 0, 255], // 属性名拼写错误
};

上面示例中，对象 palette 的属性名拼写错了，将 blue 拼成了 bleu，我们希望通过指定类型，发现这个错误。

type Colors = "red" | "green" | "blue";
type RGB = [number, number, number];

const palette: Record<Colors, string | RGB> = {
  red: [255, 0, 0],
  green: "#00ff00",
  bleu: [0, 0, 255], // 报错
};

Record<Keys, type> 是一个类型工具，用来返回一个对象，详细介绍见《类型工具》一章。简单说，它的第一个参数为对象的属性名列表，第二个参数为对象的属性值的遵循的类型。

本上面示例中，变量 palette 的类型被指定为 Record<Colors, string|RGB>，就表示变量 palette 的属性名应该符合类型 Colors，属性值应该符合类型 string|RGB，要么是字符串，要么是元组 RGB。属性名 bleu 不符合类型 Colors，所以就报错了。

这样的写法，虽然可以发现属性名的拼写错误，但是带来了新的问题。

const greenComponent = palette.green.substring(1, 6); // 报错

上面示例中，palette.green 属性调用 substring() 方法会报错，原因是这个方法只有字符串才有，而 palette.green 的类型是 string|RGB，除了字符串，还可能是元组 RGB，而元组的原型对象上不存在 substring() 方法，所以报错了。

如果要避免报错，要么给变量 palette 每个属性去精确的指出类型，要么对 palette.green 的值进行类型缩小。两种做法都比较麻烦，也不是很有必要。

这时就可以使用 satisfies 运算符，对 palette 进行类型检测，但是不改变 TypeScript 对 palette 的类型推断。

type Colors = "red" | "green" | "blue";
type RGB = [number, number, number];

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  bleu: [0, 0, 255], // 报错
} satisfies Record<Colors, string | RGB>;

const greenComponent = palette.green.substring(1); // 不报错

在以上示例中：我们规定了检测条件 Record<Colors, string|RGB>，即属性值必须满足 string|RGB 这个条件，属性名必须满足 Colors 这个条件。而 TypeScript 对 palette.green 的类型自动推断为 string，是符合 string|RGB 的，所以 palette.green 在调用 substring() 方法时不会报错。

2、检测属性值

satisfies 也可以检测属性值。

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0], // 报错
} satisfies Record<Colors, string | RGB>;

上面示例中，属性 blue 的值只有两个成员，不符合元组 RGB 必须有三个成员的条件，从而报错了。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24

16. 类型运算符

一、`keyof` 运算符

1、使用场景

2、用途

1、精确表达对象的属性类型

2、属性映射

二、`in` 运算符

三、方括号运算符

四、`extends...?:` 条件运算符

1、简介

2、泛型 + 联合类型的展开处理

3、嵌套使用

五、`infer` 关键字