TypeScript 是一种静态类型检查的 JavaScript 变体，提供了强大的类型系统来帮助开发者编写更加健壮、可维护的代码。在 TypeScript 中，类型操作符是一种非常重要的工具，它们可以帮助我们定义、操作、组合和转换类型，使得我们的代码变得更加灵活、可复用和可维护。
本文将介绍 TypeScript 中的类型操作符，包括泛型、联合类型、交叉类型、类型别名、类型字面量、索引类型、映射类型和条件类型，以及它们的使用方法和示例代码。
泛型
泛型是一种带有类型参数的函数或类，它可以用于多种类型，提高了代码的复用性和灵活性。在 TypeScript 中，我们可以使用 '<>' 符号来定义泛型，例如：
function identity<T>(value: T): T {
return value;
}这个函数接受一个参数 value，并返回它本身。它的类型参数 T 可以是任意类型，例如：
let a = identity<string>("hello"); // a 的类型为 string
let b = identity<number>(123); // b 的类型为 number联合类型
联合类型是一种类型，表示一个值可以是两个或多个类型中的任意一个。在 TypeScript 中，我们可以使用 '|' 符号来定义联合类型，例如：
let value: string | number; value = "hello"; // 正确，value 的类型为 string value = 123; // 正确，value 的类型为 number value = true; // 错误，boolean 类型不在联合类型中
联合类型通常用于一些可选或不确定的情况，例如函数的参数或返回值可能是多种类型之一。
交叉类型
交叉类型是一种类型，表示将多个类型合并成一个类型。在 TypeScript 中，我们可以使用 '&' 符号来定义交叉类型，例如：
type Point = { x: number; y: number };
type Color = { color: string };
type PointWithColor = Point & Color;
let point: PointWithColor = { x: 1, y: 2, color: "red" };交叉类型通常用于需要同时具备多种属性或方法的情况。
类型别名
类型别名是一种给类型起别名的方式，可以使代码更加易读和可维护。在 TypeScript 中，我们可以使用 'type' 关键字来定义类型别名，例如：
type Name = string;
type Age = number;
function greet(name: Name, age: Age): string {
return `Hello, my name is ${name}, and I am ${age} years old.`;
}类型别名还可以与其他类型操作符结合使用，例如：
type Person = {
name: string;
age: number;
gender: "male" | "female";
};
type PartialPerson = Partial<Person>; // 将所有属性变为可选的
type ReadonlyPerson = Readonly<Person>; // 将所有属性变为只读的类型字面量
类型字面量是一种直接定义类型的方式，可以灵活地定义各种复杂的类型。在 TypeScript 中，我们可以使用 '{ }' 符号来定义类型字面量，例如：
// javascriptcn.com 代码示例
type Person = {
name: string;
age: number;
gender: "male" | "female";
};
let person: Person = {
name: "张三",
age: 18,
gender: "male",
};类型字面量还可以包含其他的类型操作符，例如联合类型和交叉类型。
索引类型
索引类型是一种通过字符串或数字索引来访问对象属性的类型。在 TypeScript 中，我们可以使用 'keyof' 操作符来定义索引类型，例如：
// javascriptcn.com 代码示例
type Person = {
name: string;
age: number;
gender: "male" | "female";
};
type PersonKey = keyof Person; // "name" | "age" | "gender"
function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
let person: Person = {
name: "张三",
age: 18,
gender: "male",
};
let name = getProperty(person, "name"); // 正确，name 的类型为 string
let gender = getProperty(person, "gender"); // 正确，gender 的类型为 "male" | "female"
let email = getProperty(person, "email"); // 错误，email 不是 Person 的属性之一索引类型可以用于一些高级的类型推导和函数泛型，例如上面的 getProperty 函数。
映射类型
映射类型是一种将一个类型中所有属性进行转换的方式，常常用于将属性改为可选或只读等操作。在 TypeScript 中，我们可以使用 'Pick'、'Partial'、'Readonly' 等操作符来定义映射类型，例如：
// javascriptcn.com 代码示例
type Person = {
name: string;
age: number;
gender: "male" | "female";
};
type OptionalPerson = Partial<Person>; // 所有属性变为可选的
type ReadonlyPerson = Readonly<Person>; // 所有属性变为只读的
type RequiredPerson = Required<Person>; // 所有属性变为必填的
type PickPerson = Pick<Person, "name" | "age">; // 选取部分属性映射类型还可以自动根据原类型生成新类型，例如：
// javascriptcn.com 代码示例
type Person = {
name: string;
age: number;
gender: "male" | "female";
};
type PersonWithValue<T> = { [P in keyof T]: T[P] | undefined };
let person: PersonWithValue<Person> = {
name: "张三",
age: 18,
gender: undefined,
};这个类型将所有属性变为可选的，并添加了默认值 undefined。
条件类型
条件类型是一种带有条件判断的类型，可以使得我们根据条件判断生成不同的类型。在 TypeScript 中，我们可以使用 'extends' 关键字来定义条件类型，例如：
// javascriptcn.com 代码示例 type TypeName<T> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends undefined ? "undefined" : T extends null ? "null" : T extends Function ? "function" : "object"; let a: TypeName<string> = "string"; // 正确 let b: TypeName<number> = "number"; // 正确 let c: TypeName<boolean> = "boolean"; // 正确 let d: TypeName<undefined> = "undefined"; // 正确 let e: TypeName<null> = "null"; // 正确 let f: TypeName<Function> = "function"; // 正确 let g: TypeName<object> = "object"; // 正确
条件类型通常用于一些复杂的类型推导和泛型函数类型操作。
总结
TypeScript 中的类型操作符是一种非常重要的工具，可以帮助我们定义、操作、组合和转换类型，使得我们的代码变得更加灵活、可复用和可维护。本文介绍了 TypeScript 中的泛型、联合类型、交叉类型、类型别名、类型字面量、索引类型、映射类型和条件类型，并提供了详细的示例代码，希望对 TypeScript 开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653535c87d4982a6ebb7e290