当前位置：首页 > article >正文

TypeScript 中的联合类型：灵活的类型系统

article 2025/2/10 22:22:10

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

在 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));
  }
}