在 TypeScript 中，联合类型 (Union Type) 是一种非常常用的类型定义方式。它允许我们将多个类型定义为一个类型，从而可以更灵活地处理不同类型的数据。本文将介绍 TypeScript 中联合类型的使用方法，并提供详细的示例代码，帮助读者更好地理解和应用联合类型。
什么是联合类型
联合类型是指将多个类型联合在一起，形成一个新的类型。在 TypeScript 中，使用竖线符号 | 来表示联合类型。例如，我们可以定义一个变量 x，它可以是字符串类型或数字类型：
let x: string | number;
这样，变量 x 的类型就是字符串类型和数字类型的联合类型。在后续的代码中，我们可以对 x 进行字符串相关的操作，也可以对 x 进行数字相关的操作，而不需要对其类型做出任何限制。
联合类型的应用
联合类型在 TypeScript 中非常常用，它可以应用于很多场景。下面我们将介绍一些常见的应用场景。
可选参数或属性
在函数或对象中，有些参数或属性是可选的，即它们可以存在，也可以不存在。这时，我们可以使用联合类型来定义参数或属性的类型。例如，我们可以定义一个函数 print，它接收一个字符串或数字类型的参数，并且该参数是可选的：
function print(value: string | number | undefined) {
console.log(value);
}这样，我们就可以在调用函数 print 时，传入字符串或数字类型的参数，也可以不传入任何参数。
类似地，我们可以使用联合类型来定义对象的属性。例如，我们可以定义一个对象 person，它有一个可选的 age 属性，其类型为数字或 undefined：
// javascriptcn.com 代码示例
interface Person {
name: string;
age?: number | undefined;
}
const person: Person = {
name: '张三',
age: 18
};这样，我们就可以创建一个 person 对象，它可以有 age 属性，也可以没有 age 属性。
处理不同类型的数据
在实际开发中，我们经常需要处理不同类型的数据。例如，一个函数可能接收一个字符串或数组类型的参数，根据参数类型的不同，函数会执行不同的逻辑。这时，我们可以使用联合类型来处理不同类型的数据。例如，我们可以定义一个函数 process，它接收一个字符串或数组类型的参数，并根据参数类型的不同执行不同的逻辑：
function process(value: string | string[]) {
if (typeof value === 'string') {
console.log(value.toUpperCase());
} else {
console.log(value.join(','));
}
}这样，我们就可以在调用函数 process 时，传入字符串或数组类型的参数，函数会根据参数类型的不同执行不同的逻辑。
处理不确定的数据类型
有时候，我们无法确定一个变量的数据类型，这时，我们可以使用联合类型来处理不确定的数据类型。例如，我们可以定义一个函数 getValue，它返回一个字符串或数字类型的值。在函数内部，我们可以根据条件判断返回的数据类型：
// javascriptcn.com 代码示例
function getValue(): string | number {
if (Math.random() > 0.5) {
return 'hello';
} else {
return 123;
}
}
const value = getValue();
if (typeof value === 'string') {
console.log(value.toUpperCase());
} else {
console.log(value.toFixed(2));
}这样，我们就可以在调用函数 getValue 时，获取一个字符串或数字类型的值，并根据实际情况进行处理。
总结
本文介绍了 TypeScript 中联合类型的使用方法，并提供了详细的示例代码。联合类型是一种非常常用的类型定义方式，它可以应用于很多场景，例如可选参数或属性、处理不同类型的数据、处理不确定的数据类型等。希望本文对读者有所帮助，能够更好地应用联合类型来处理不同的数据类型。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655edca2d2f5e1655d900096