TypeScript 中的类型到底是个啥?

开发 前端
那么在 TypeScript 中,类型到底是什么呢?其实你可以把类型理解成一系列值的集合。比如,你可以把数字类型看作是所有数字的集合,1.0、68 就属于这个集合中,而 “阿宝哥” 就不属于这个集合,因为它属于字符串类型。

TypeScript 是带有类型语法的 JavaScript,它是一种建立在 JavaScript 基础上的强类型编程语言。它内置了常见的基础类型,比如 string、number 和 boolean 等类型。

在这些类型的基础上,我们就可以在声明变量时,显式声明变量的类型。

let name: string = "阿宝哥"

那么在 TypeScript 中,类型到底是什么呢?其实你可以把类型理解成一系列值的集合。比如,你可以把数字类型看作是所有数字的集合,1.0、68 就属于这个集合中,而 “阿宝哥” 就不属于这个集合,因为它属于字符串类型。

对于集合来说,最小的集合是空集,它不包含任何值。在 TypeScript 中与之对应的类型是 never 类型。因为它的域是空的,所以没有值可以赋给 never 类型的变量:

let num: never = 123; // Error
let name: never = "阿宝哥"; // Error

下一个最小的集合是包含单个值的集合。在 TypeScript 中与之对应的类型是字面量类型,也称为单元类型(Unit Type)。

type A = "A";
type B = "B";

let a: A = "A" // Ok
let b: B = "A" // Error

既然有单个值的集合,那么有两个值的集合么?答案是有的,boolean 类型就是含有 true 和 false 值的集合。

此外,我们也可以使用操作符 | 把字面量类型组合成新的类型,也被称为联合类型。如果你对联合类型还不了解的话,可以观看 “搞懂 TypeScript 联合类型的多个知识点” 这一期的视频。

type AB = 'A' | 'B'; 
let a: AB= 'A' // Ok
let c: AB = "C" // Error

除了有限集合之外,我们前面介绍的 string 和 number 类型是属于无限集合。此外,为了满足不同的开发需求,TypeScript 还允许我们自定义类型。比如,这里使用 interface 关键字定义 3 种类型。

interface Vector1D { x: number; }  
interface Vector2D { x: number; y: number; }
interface Vector3D { x: number; y: number; z: number; }

其中 Vector1D 类型表示含有 x 属性且属性值的类型是 number 类型对象的集合。而 Vector2D 类型表示同时含有 x、y 属性且属性值的类型都为 number 类型对象的集合。

为了便于大家的理解,我们使用 JS 表达式来描述上述的规则:

v1 && typeof v1 === "object" && typeof v1.x === "number" // Vector1D
v2 && typeof v2 === "object" && typeof v2.x === "number" && typeof v2.y === "number" // Vector2D

其实对于上面的 3 种类型来说,我们也可以通过 extends 来扩展已有的接口类型:

interface Vector1D { x: number; }
interface Vector2D extends Vector1D { y: number; }
interface Vector3D extends Vector2D { z: number; }

在使用标称类型系统的语言中,比如 Java、C++。通常会使用 class 来描述对象类型,Vector1D 类会被称为父类,Vector2D 类被称为子类。

然而 TypeScript 为了更好地与使用鸭子类型的 JavaScript 相兼容,采用了结构化类型系统。在该类型系统中 Vector1D 被称为 SuperType,而 Vector2D 被称为 SubType。

这种关系通常被画成一个层次结构,但从集合的角度考虑,用文氏图更合适。

文氏图是在所谓的集合论数学分支中,在不太严格的意义下用以表示集合的一种草图。它们用于展示在不同的事物集合之间的数学或逻辑联系,尤其适合用来表示集合之间的“大致关系”。

这里 3 种类型之间关系对应的文氏图是这样的。

现在我们来做个总结,相比父类型 Vector1D,子类型 Vector2D 会包含更多的属性,即描述的对象更为精确。Vector2D 子类型对应的集合包含于 Vector1D 父类型对应的集合中。

学完这些有什么用呢?让我们来看个例子:

interface Vector1D { x: number; }  
interface Vector2D { x: number; y: number; }
type SubtypeOf<T,U> = T extends U ? true : false
type A = SubtypeOf<Vector2D, Vector1D> // true
type B = SubtypeOf<Vector1D, Vector1D> // true
type C = SubtypeOf<Vector1D, Vector2D> // false

了解 TS 中的类型和所采用的结构化类型系统是 TS 进阶的关键,值得你好好学习一番。如果有遇到不清楚的地方,欢迎随时跟阿宝哥交流。你喜欢以这种形式学 TS 么?

责任编辑:姜华 来源: 全栈修仙之路
相关推荐

2024-02-07 12:35:00

React并发模式concurrent

2021-12-16 15:11:59

Facebook天秤币加密货币

2022-09-06 21:38:45

数字人数字孪生

2021-05-11 07:30:58

JNIJavaAPI

2022-05-04 08:38:32

Netty网络框架

2021-01-28 17:41:32

Github网站Pull Reques

2021-12-26 00:01:51

Log4Shell漏洞服务器

2020-03-07 09:47:48

AVL树算法场景

2024-02-01 20:15:37

2013-05-29 10:17:56

Hadoop分布式文件系统

2012-07-25 09:09:46

GNOME OS桌面

2021-02-01 06:41:47

流水线计算机队列

2019-10-28 09:59:26

区块链技术智能

2021-05-19 10:44:42

数据库架构技术

2020-10-29 07:03:56

Docker容器存储

2024-02-26 00:00:00

人工智能序列数据机器人

2021-12-16 21:13:38

通信网管平台

2020-10-25 20:05:29

Pythonyield开发

2022-02-16 20:04:08

容器KubernetesShim

2017-03-16 15:28:20

人工智能视觉识别
点赞
收藏

51CTO技术栈公众号