Typescript 联合类型、字面量类型和类型断言

简介: 本文首先介绍了 Typescript 中的联合类型,字面量类型,在平时开发中用的都比较多,联合类型让变量拥有更灵活强大的用法,字面量类型简化了类型系统的使用。然后介绍了 Typescript 的类型断言,它可以将一个变量的类型声明为另一个类型,从而方便调用另一个类型的方法。需要注意的是,类型断言并不是类型转换。

联合(Union) 类型

联合类型就是一个变量的值可以是多个类型。比如:

let union: number|string;
union = 10;
union = 'hello';

变量 union 是一个联合类型,多个类型之间使用竖线 | 分割,变量既可以是 number 类型,也可以是 string 类型。

再看一个例子,定义一个函数可以求两个数字的和,也可以做两个字符串的拼接:

function merge(a: number|string, b: number|string) {
  // 需要对参数类型做一个判断
  if(typeof a === 'string' || typeof b === 'string') {
    return a.toString() + b.toString();
  } else {
    return a + b;
  } 
}

merge(10, 20);
merge('hello', 'world');

不仅类型,确定的值也可以联合使用:

let union: 0|1|2;

此时变量 union 不仅确定了属于 number 类型,值的取值范围也确定了。

字面量(Literal)类型

字面量类型,就是直接写出一个值,来赋值给变量。具体来讲,主要分为数字字面量类型,字符串字面量类型,真值字面量类型,对象字面量类型,枚举字面量类型等。比如:

const num = 3;
const str = "kw";
const flag = true;

这三个变量的类型分别为 2kwtrue ,类型等于值,就是字面量类型。

上面联合类型中,将值作为联合类型使用,其实就是字面量类型的联合类型。

字面量类型非常像是枚举类型,等学到的时候可以做一个比较。

类型断言

类型断言,也叫类型适配,主要用于类型的适配工作,将变量从一个类型断言为另一个类型。

先看一段代码:

let message: any = 'hello';
message.toUpperCase();

变量 message 声明为了 any 类型,但是其值是一个字符串类型,想要调用字符串类型的 toUpperCase 方法,但是编辑器并没有给出类型提示。

这是因为编辑器将 message 识别为 any 类型,而 any 类型并没有 toUpperCase 方法。

此时就可以使用类型断言了:

let message: any = 'hello';

// 使用 as 关键字,将变量从 any 类型断言为 string 类型
// 编辑器就会将 message 识别为 string 类型,从而给出类型提示
(message as string).toUpperCase();

除了使用 as 关键字,还可以在变量前通过一对尖括号 <> 写明要断言的类型:

(<string>message).toUpperCase();

需要注意的是,类型断言并不是类型转换,变量的类型并不会发生转换,依然是原来的类型,只不过在断言的那一刻,能让 TS 编译器认为它是某个指定类型。

小结

本文首先介绍了 Typescript 中的联合类型,字面量类型,在平时开发中用的都比较多,联合类型让变量拥有更灵活强大的用法,字面量类型简化了类型系统的使用。然后介绍了 Typescript 的类型断言,它可以将一个变量的类型声明为另一个类型,从而方便调用另一个类型的方法。需要注意的是,类型断言并不是类型转换。

目录
相关文章
|
1月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
7天前
|
JavaScript
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
19 4
|
12天前
|
JavaScript 编译器
typescript 解决变量多类型访问属性报错--工作随记
typescript 解决变量多类型访问属性报错--工作随记
|
6天前
|
JavaScript
TypeScript——Record类型
TypeScript——Record类型
15 0
|
12天前
|
JavaScript 前端开发 编译器
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
|
1月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
1月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
37 0
|
2月前
|
JavaScript 前端开发 Java
TypeScript 类型兼容性
TypeScript 类型兼容性
|
1月前
|
JavaScript 前端开发 索引
TypeScript 的数组类型
TypeScript 的数组类型
27 1
|
2月前
|
JavaScript 前端开发 IDE
TypeScript中的声明文件(.d.ts):扩展类型系统
TypeScript的`.d.ts`声明文件为JS库提供类型信息,增强IDE支持,如自动完成和类型检查。通过声明合并,可在全局作用域定义类型。示例包括为`my-library`创建声明模块,导出函数和接口。声明文件通常存于`@types`或指定`typeRoots`。用于旧JS代码的类型注解,如`myGlobalObject`。学习更多,参阅TypeScript官方文档。分享你的TS声明文件经验!