TS 完全指南之初识类型（一）

搭建学习环境

进入 Node 官网安装

安装完成后使用以下命令查看是否安装完成：

安装完成后使用以下命令查看是否安装完成：

• node -v
• npm -v

继续安装 nrm 管理包源：

• npm i nrm -g
• nrm ls
• nrm use taobao

全局安装 typescript：

• npm i typescript -g

全局安装 ts 的编译工具，使用 ts-node 可以将 ts 文件执行

• npm i ts-node -g

• • 使用：ts-node index.ts

• 安装 ts-node 依赖包：npm install tslib @types/node -g

使用 TS 可以有良好的提示，使代码可读性变强，更提前发现问题

---

TS 的运行和调试

类型擦除

• TS 代码要运行在浏览器，需要进行类型擦除
• TS -> ES6 -> ES5 -> 单文件

---

TS 类型

• TS 出现弥补的 JS 的类型缺失
• 众所周知，代码错误越早发现越好，代码编写 > 代码编译 > 代码运行 开发 > 测试 > 上线
• Vue2 使用 Flow 进行类型检查，后续 Vue3 也使用 Typescript 重写
• TS 类型包含所有 JS 类型 null、undefined、string、number、boolean、bigInt、Symbol、object（数组，对象，函数，日期）
• 还包含 void、never、enum、unknown、any 以及 自定义的 type 和 interface

变量声明

• var/let/const 标识符: 数据类型 = 赋值

手动指定数据的类型（类型注解），不要写成大写的 String ，因为这是 JS 的一个内置类

变量类型定义的时候已经决定

类型推导

• 如果没有明确指定类型，TS 会隐式的推导出一个类型
• 这类型根据赋值的类型推断，没有赋值则为 any 类型，能自动推导出类型，没必要手动指定

基础类型

数组和元组

• tuple可以作为函数返回的值，React 的 useState 就是个元组，类似于

对象类型

• TS 中的 object 类型泛指所有的的非原始类型，如对象、数组、函数
• 下面我们使用 object 声明了这个对象，但是这个对象既不能设置新数据，也不能修改老数据

• 下面这种对象类型的限制才更为精确
• 可限制对象每个属性的类型

any、unknown、never

• 无法确定一个变量的类型，可使用 any，此时在其身上做任何操作都是合法的，即使访问了一个不存在的属性
• 如果某些情况处理类型过于繁琐，或者在引入一些第三方库时，缺失了类型注解，这个时候 我们可以使用 any，更多是为了兼容老代码

如果想要 msg 不标注 any，默认也是 any 类型，但如果我们不想这种隐式的 any，可以新建 tsconfig.json，书写以下配置：

---

• unknown 这种特殊类型用于描述类型不确定的变量，类似 any，但是比其更严格，安全
• 默认在其操作都是不合法的，必须先进行类型缩小后才能进行对应的操作

---

• 假如一个函数的返回结果是死循环或者异常，我们可以使用 never 类型表示这种永不存在值的类型
• 更多情况是封装工具库时候可以使用，比如下面这段代码，如果单纯在函数参数的类型多加一个参数，而没有对应 case 处理，则会报错

函数类型

• 声明函数时，可以在每个参数后添加类型注解，声明其参数类型
• 同样也可以声明返回值的类型，不过也可以不写让 TS 自动推导
• 函数参数的一般顺序 必传参数 - 有默认值的参数 - 可选参数

枚举类型

• 枚举类型将一组可能出现的值，一个个列举，定义在一个类型中，这个类型就是枚举

这种字符串的枚举可能使用 type Direction = 'LEFT' | 'RIGHT' | 'TOP' | 'RIGHT'可能会更好点