TypeScript 基础(一) | Leeson's Space

type

status

date

slug

summary

前期准备

安装typescript：npm i typescript -g

新建hello.ts文件，开始自己的第一个ts编码，如：

编译hello.ts文件：tsc hello.ts；此时会生成对应的.js文件

运行hello.js文件即可：node hello.js

此时，会遇到以下几个问题👻：

提示hello.ts中的函数名与hello.js中的函数名重复问题，解决：我们需要tsc --init生成tsconfig.json文件

每次修改.ts文件都需要重新编译并运行.js文件，解决：tsc --watch

基础静态类型

基础静态类型有string、number、boolean、null、undefined等，声明也相对较为简单，直接上代码：

数组类型的定义

一般数组类型的定义有两种，如下：

对象类型

对象类型需要给每个属性都要进行定义，例如：

在上述代码中，函数参数接收的是一个对象，对象里有两个数字类型的属性，那我们调用该函数的时候就必须传入两个数字类型的参数才行，那如果参数是选填就会出现错误，那该怎么解决呢？答案是?：

联合类型

假设某个函数的参数可以是数字或字符串甚至是数组，该怎么定义呢？这时候就轮到联合类型登场了：

any类型

当然，还有万能的any类型，懂得都懂哈哈哈😏

类型别名

前面介绍了如何去定义对象类型，并且作为函数的参数进行传递。但当参数较为复杂时，那样的定义方式就显得不够优雅，但是！没关系，ts为我们准备了类型别名。定义类型别名的时候需要以type关键字开始，举例：

这样，我们就有了一个类型别名，可以在需要的地方使用它即可，如下：

接口

除了上述定义类型别名的方式去整合出可复用的类型注解，接口也同样可以。以interface关键字开始，代码如下：

类型别名和接口的异同

相同点

当在定义对象类型时，后续想要在对象中再声明其他属性时，就可以称为扩展。类型别名和接口都可以进行扩展。我们一一道来。

上述代码中，用接口定义了Animal对象类型，其中声明了name和age两个属性。在Animal基础上，用extends扩展了Cat对象类型，新增food属性。这样，Cat对象类型中不仅有food这个新属性，同时也具备Animal中的name和age属性。同样的声明我们用类型别名来试一下：

不同点

创建类型后，接口可以通过重命名的方式添加新字段，而类型别名不行，例如这样👇：

类型断言

类型断言，即可以手动指定值为某一具体的类型。那我们什么时候用到类型断言呢？原因也很简单：当TypeScript不确定值是什么类型的时候。举个例子🌰

像上述这种栗子，TypeScript不知道该值是什么类型，这时我们就需要通过as去指定其具体类型。当然，我们也可以将值指定为any类型，但并不推荐这样做，因为这样做会失去使用typescript的意义。

文字类型

笔者所理解的文字类型，就是指定某个属性只能为具体值(可能有点抽象)，先来一个例子感受下：

此例子中，参数s是字符串类型，而参数align是一个文字联合，意思是参数align的值只能为left | center | right其中之一。常用的工作场景有接口请求时：

Tips：上述代码中，出现了as const，有什么用呢？as const是确保所有属性都分配为文字类型

枚举

直接撸代码：

还有null、undefined、bigint、symbol等等，这些定义相对简单，就不展开说了。

结语

Ts系列第一篇就此完成啦！感谢大家捧场！如有错误，望赐教🤙。不久将会开Ts系列第二篇...