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

相关推荐
VOLUN9 分钟前
PageLayout布局组件封装技巧
前端·javascript·vue.js
掘金安东尼10 分钟前
React 的 use() API 或将取代 useContext
前端·javascript·react.js
牛马喜喜10 分钟前
记录一次el-table+sortablejs的拖拽bug
前端
一枚前端小能手14 分钟前
⚡ Vite开发体验还能更爽?这些配置你试过吗
前端·vite
anyup30 分钟前
🔥 🔥 为什么我建议你使用 uView Pro 来开发 uni-app 项目?
前端·vue.js·uni-app
Skelanimals31 分钟前
Elpis全栈框架开发总结
前端
蓝胖子的小叮当35 分钟前
JavaScript基础(十三)函数柯里化curry
前端·javascript
孪创启航营39 分钟前
数字孪生二维热力图制作,看这篇文章就够了!
前端·three.js·cesium
宫水三叶的刷题日记42 分钟前
真的会玩,钉钉前脚辟谣高管凌晨巡查工位,小编随后深夜发文
前端·后端·面试
zzywxc7871 小时前
AI 行业应用:金融、医疗、教育、制造业领域的落地案例与技术实现
android·前端·人工智能·chrome·金融·rxjava