🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。
文章目录
- 什么是联合类型？
- 联合类型的使用场景
- 1. 函数参数
- 2. 函数返回值
- 3. 对象属性
- 联合类型的类型保护
- 结论
在 TypeScript 中，联合类型（Union Types）是一种允许变量、函数参数或返回值具有多种类型的特性。通过使用联合类型，开发者可以创建更灵活和强大的代码，从而提高生产力和代码质量。
什么是联合类型？
联合类型允许你定义一个值可以是几种类型之一。在 TypeScript 中，你可以使用竖线 | 来定义联合类型。
let id: number | string;
在这个例子中，id 变量可以是 number 类型或 string 类型。
联合类型的使用场景
联合类型在许多情况下都很有用。以下是一些常见的使用场景：
1. 函数参数
你可以使用联合类型来定义函数参数可以是多种类型之一。
function printId(id: number | string) {console.log("Your ID is: " + id);
}
在这个例子中，printId 函数的 id 参数可以是 number 类型或 string 类型。
2. 函数返回值
你可以使用联合类型来定义函数返回值可以是多种类型之一。
function getRandomValue(): number | string {return Math.random() > 0.5 ? "Hello" : 42;
}
在这个例子中，getRandomValue 函数的返回值可以是 number 类型或 string 类型。
3. 对象属性
你可以使用联合类型来定义对象的属性可以是多种类型之一。
interface User {id: number | string;name: string;
}
在这个例子中，User 接口的 id 属性可以是 number 类型或 string 类型。
联合类型的类型保护
当你在使用联合类型时，TypeScript 会自动进行类型保护，确保你只能访问当前类型允许的属性和方法。
function printId(id: number | string) {if (typeof id === "string") {console.log("Your ID is: " + id.toUpperCase());} else {console.log("Your ID is: " + id.toFixed(2));}
}
在这个例子中，TypeScript 会根据 id 的类型自动选择正确的代码路径。
结论
在 TypeScript 中，联合类型是一种强大的特性，它允许变量、函数参数或返回值具有多种类型。通过使用联合类型，开发者可以创建更灵活和强大的代码，从而提高生产力和代码质量。希望这篇文章能帮助你更好地理解 TypeScript 中的联合类型。如果你有任何问题或需要进一步的帮助，请随时提问。
