TS之联合类型

简介: 今儿接着介绍联合类型。联合类型(Union Types)表示取值可以为多种类型中的一种。联合类型使用 | 分隔每个类型。

前言


今儿接着介绍联合类型。

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

联合类型使用 | 分隔每个类型。


正文


简单例子

// 联合类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;


这里的 let myFavoriteNumber: string | number 的含义是,允许 myFavoriteNumber 的类型可以是 string 或者 number ,但不能是其他类型。

let myFavoriteNumber: string | number;
myFavoriteNumber = true;
// Type 'boolean' is not assignable to type 'string | number'.


访问联合类型的属性或方法


当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型共有的属性或方法

function getLength(something: string | number): number {
    return something.length;
}
// Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.


上述例子中,length 不是 stringnumber 的共有属性,所以会报错。访问 stringnumber 的共有属性是没有问题的。

function getString(something: string | number): string {
    return something.toString();
}


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

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';             // 被推断成 string
console.log(myFavoriteNumber.length);   // 5
myFavoriteNumber = 7;                   // 被推断成 number
console.log(myFavoriteNumber.length);   // 编译时报错
// Property 'length' does not exist on type 'number'.


上述例子中,第二行的 myFavoriteNumber 被推断成了 string,访问它的 length 属性不会报错。而第四行的 myFavoriteNumber 被推断成了 number,访问它的 length 属性时自然就会报错了。


目录
相关文章
|
2月前
|
JavaScript 前端开发 安全
Apollo与TypeScript:强大类型检查在前端开发中的应用
Apollo与TypeScript:强大类型检查在前端开发中的应用
|
3月前
|
JavaScript 前端开发
TypeScript 联合类型
TypeScript 联合类型
34 0
|
3月前
|
JSON JavaScript 安全
解锁TypeScript的潜力:改进标准库类型
解锁TypeScript的潜力:改进标准库类型
|
3月前
|
存储 JavaScript 前端开发
2020你应该知道的TypeScript学习路线【数组类型】
2020你应该知道的TypeScript学习路线【数组类型】
31 0
|
1月前
|
JavaScript 安全
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
|
1月前
react+typescript给state和props定义指定类型
react+typescript给state和props定义指定类型
16 1
|
2月前
|
JavaScript 安全 索引
TypeScript泛型和类型体操
泛型和类型体操(Type Gymnastics)是 TypeScript 中高级类型系统的重要组成部分。它们提供了强大的工具和技巧,用于处理复杂的类型操作和转换。
|
2月前
|
JavaScript 安全 容器
Vue3 + setup + TypeScript: 构建现代、类型安全的Vue应用的关键技巧总结
当使用 setup 的时候,组件直接引入就可以了,不需要再自己手动注册
|
3月前
|
JavaScript 前端开发 IDE
【TypeScript】带类型语法的JavaScript
【1月更文挑战第26天】【TypeScript】带类型语法的JavaScript
|
3月前
|
JavaScript
小结:近五十个常用 TypeScript类型工具 的声明、描述、用法示例
小结:近五十个常用 TypeScript类型工具 的声明、描述、用法示例
123 0