typeScript基础(4)_联合类型

简介: 本文介绍了TypeScript中的联合类型(Union Types),它表示变量可以是多种类型中的一种。文章通过示例展示了如何声明联合类型以及在使用联合类型时访问它们共有的属性和方法。同时,还解释了类型推论在联合类型变量赋值时的工作原理。

联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种。

看例子:
ts:

//联合类型
let unionnTypes : string | number;
unionnTypes = 888;
unionnTypes = '999';
unionnTypes = false;

当我们编译这个ts文件的时候会报错,

Type ‘false’ is not assignable to type ‘string | number’.
说明,这个unionnTypes 只能是字符串类型或者是数值类型,被赋值其他类型会报错。

特点:使用 | 分隔每个类型
例如:

let unionnTypes : string | number;

unionnTypes 只能是字符串或者是数值类型。

当联合类型被用做参数时:

//联合类型
const fun = (uZjq:string |number)=>{
   
    console.log(uZjq);
}

这个时候可以使用的方法或者属性需要时string和number共有的。例如:

//联合类型
const fun = (uZjq:string |number)=>{
   
    console.log(uZjq.length);
}

报错:

Property ‘length’ does not exist on type ‘string | number’.
Property ‘length’ does not exist on type ‘number’.

原因:

length 不是 string 和 number 的共有属性,所以会报错。

访问共有的属性是没问题的:

//联合类型
const fun = (uZjq: string | number) => {
   
    console.log(uZjq.toString());
}

因为你可能是字符串类型可能是数值类型,ts会都考虑到这两种情况会不会出问题。

联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型:

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错
// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

首先myFavoriteNumber可以死字符串类型也可以是数值类型,放被赋予字符串类型,会有length属性,当再次被赋值为数值类型,没有length这个属性的时候就会报错。

参考:https://www.bookstack.cn/read/typescript-tutorial-202005/basics-union-types.md

目录
相关文章
|
4月前
|
JavaScript 前端开发
TypeScript 联合类型
TypeScript 联合类型
43 0
|
11月前
|
JavaScript 前端开发
关于 TypeScript 中的联合类型
关于 TypeScript 中的联合类型
|
3月前
|
JavaScript
19.【TypeScript 教程】联合类型
19.【TypeScript 教程】联合类型
20 2
|
4月前
|
JavaScript 前端开发 编译器
TypeScript中的高级类型:联合类型、交叉类型与条件类型深入解析
【4月更文挑战第23天】探索TypeScript的高级类型。这些特性增强类型系统的灵活性,提升代码质量和维护性。
|
11月前
|
JavaScript 前端开发
开心档之TypeScript 联合类型
开心档之TypeScript 联合类型
25 0
|
4月前
|
JavaScript 前端开发 Java
2020你应该知道的TypeScript学习路线【联合类型-接口】
2020你应该知道的TypeScript学习路线【联合类型-接口】
43 1
2020你应该知道的TypeScript学习路线【联合类型-接口】
|
4月前
|
JavaScript 前端开发 编译器
TypeScript 中的基础类型:原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型
TypeScript 中的基础类型:原始类型、对象类型、数组类型、元组类型、枚举类型和联合类型
69 1
|
4月前
|
JavaScript
TypeScript 联合类型的定义、使用场景和注意事项
TypeScript 联合类型的定义、使用场景和注意事项
132 1
|
4月前
|
JavaScript 前端开发 程序员
TypeScript【枚举、联合类型函数_基础、函数_参数说明 、类的概念、类的创建】(二)-全面详解(学习总结---从入门到深化)
TypeScript【枚举、联合类型函数_基础、函数_参数说明 、类的概念、类的创建】(二)-全面详解(学习总结---从入门到深化)
36 0
|
11月前
TypeScript-枚举成员类型和联合类型
TypeScript-枚举成员类型和联合类型
51 0