06. Typescript 联合类型、交叉类型、类型断言

1. 联合类型

联合类型由一组有序的成员类型构成,联合类型表示类型可以为若干个类型之一,等同于运算符 || ,类似与数学运算中的加法,由多种类型叠加而来。

写法:number | string

注意:联合类型是通过类型字面量来定义的

1.1. 变量的联合类型

ini 复制代码
// 联合类型
let str: string | number; // 表示a可以是string类型或者number类型
str = '123'; // 可以
str = 123; // 可以

1.2. 数组的联合类型

数组的联合类型是指数组可以是多种类型的数组,数组中的项只要满足其中一个类型就可以,所以数组中的项相互之间的数据类型可能不一样。

ini 复制代码
// 数组的联合类型
let arr20: (string | number)[] = [1, 2, '3', 4]; // 表示数组可以是string类型或者number类型的数组
arr20 = ['1', 2, '3', 4]; // 可以
arr20 = [1, 2, 3, 4]; // 可以
// arr20 = [1, 2, '3', 4, true]; // 错误,数组元素类型不一致

1.3. 对象的联合类型

对象的联合类型是指对象可以是多种类型的对象,

ini 复制代码
let obj21: { name: string } | { age: number }; // 表示对象可以是{ name: string }类型或者{ age: number }类型的对象
obj21 = { name: '张三' }; // 可以
obj21 = { age: 18 }; // 可以
// obj21 = { name: '张三', age: 18 }; // 错误,对象属性类型不一致

2. 交叉类型

允许将多个类型合并为一个新的类型。通过使用 & 符号,可以将两个或多个类型组合在一起,使得新类型同时具备所有这些类型的特征。

写法:type1 & type2

scss 复制代码
interface DogInterface {
  run(): void;
}; // 定义一个接口,包含一个方法run()
​
interface CatInterface {
  jump(): void;
}; // 定义一个接口,包含一个方法jump()
​
let pet: DogInterface & CatInterface = {
  run() {},
  jump() {}
}; // 定义一个变量,类型为DogInterface和CatInterface的交叉类型,即包含了DogInterface和CatInterface的所有属性和方法
​
pet.run(); // 可以调用run()方法
pet.jump(); // 可以调用jump()方法
// pet.swim(); // 错误,pet没有swim()方法

3. 类型断言

3.1. 普通断言

类型断言是指将一个变量的类型断言为另一个类型。它允许你将一个变量指定为你希望的任何类型。最常见的场景是你比 TS 更了解某个值的详细信息。

类型断言有两种方式:

  • 尖括号语法: <类型>值
  • as语法:值 as 类型
typescript 复制代码
// 类型断言
// 尖括号写法
let str = <string>'hello'; // 类型断言,告诉编译器,我知道这个变量的类型是string类型,不要报错
// as写法
let len: number = (str as string).length; // 类型断言,告诉编译器,我知道这个变量的类型是string类型,不要报错

注意:类型断言只能够欺骗 TS 编译器,无法避免运行时的错误,反而滥用类型断言,可能会造成不必要的问题。所以在没有足够了解某个值的详细信息时,尽量不要使用类型断言。

3.2. as const

对于字面值的断言,与 const 直接定义变量时由区别的。

  • 普通数据类型,普通数据类型与直接 const 声明没有区别。
  • 引用数据类型,const 直接定义变量当没有修改指针时,可以修改,而 as const 任何方式都不可以。
ini 复制代码
// as const 语法
const str1 = 1 as const;
// str1 = 2; // 错误,常量数据不能被修改
​
let str2 = '123' as const;
// str2 = '456'; // 错误,常量数据不能被修改
​
let str3 = { name: '张三' } as const; // 常量对象,属性不能被修改
// str3.name = '李四'; // 错误,常量数据不能被修改
// str3.age = 18; // 错误,常量数据不能被修改
​
let arr = [1, 2, 3] as const; // 常量数组,元素不能被修改
// arr[0] = 4; // 错误,常量数据不能被修改
// arr.push(4); // 错误,常量数据不能被修改
​
const arr2 = [1, 2, 3]; // 常量数组,元素不能被修改
arr2.push(4); // 可以,没有修改指针,只是修改了数组元素的值,所以不会报错

4. 代码下载

📎联合类型.ts

📎交叉类型.ts

📎类型断言.ts

相关推荐
福兮说21 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
AI情绪识别开源21 小时前
HFpEF 心房-心室耦联效率无创监测方向(AVCEI)
typescript·laravel·perl
郑州光合科技余经理21 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆6661 天前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
凤城老人1 天前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
Dovis(誓平步青云)1 天前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan1 天前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_1 天前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒1 天前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技1 天前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端