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

相关推荐
万事胜意5078 分钟前
前端切换Tab数据缓存实践
前端
渣渣宇a9 分钟前
Three_3D_Map 中国多个省份的组合边界绘制,填充背景
前端·javascript·three.js
点正12 分钟前
ResizeObserver 和nextTick 的用途
前端
zayyo14 分钟前
Web 应用轻量化实战
前端·javascript·面试
kovli18 分钟前
红宝书第十七讲:通俗详解JavaScript的Promise与链式调用
前端·javascript
lilye6618 分钟前
精益数据分析(19/126):走出数据误区,拥抱创业愿景
前端·人工智能·数据分析
李是啥也不会24 分钟前
Vue中Axios实战指南:高效网络请求的艺术
前端·javascript·vue.js
xiaoliang29 分钟前
《DNS优化真经》
前端
一只小海獭32 分钟前
了解uno.config.ts文件的配置项---转化器
前端
贾公子35 分钟前
MySQL数据库基础 === 约束
前端·javascript