TypeScript

JavaScript 的核心特点就是灵活，但随着项目规模的增大，灵活反而增加开发者的心智负担。例如在代码中一个变量可以被赋予字符串、布尔、数字、甚至是函数，这样就充满了不确定性。而且这些不确定性可能需要在代码运行的时候才能被发现。所以我们需要类型的约束。

• TypeScript 更像是后端 JAVA，让 JS 可以开发大型企业项目
• TS 提供的类型系统可以帮助我们在写代码时提供丰富的语法提示
• 在编写时会对代码进行类型检查从而避免线上问题

提示

越来越多的项目开始使用 TypeScript 了，典型的 Vue3、Pinia、NodeJS 等。 我们也经常为了让编辑器拥有更好的支持去编写.d.ts 文件。

1. 环境配置和搭建

什么是 TypeScript

TypeScript 是 Javascript 的超集，遵循最新的 ES5/ES6 规范。Typescript 扩展了 Javascript 语法。

TypeScript

环境配置

TypeScript 无法直接在浏览器运行，需要将编写的 ts 编译转换成 js 再运行。

单独编译 ts 文件时需要全局安装 typescript

npm install typescript -g
tsc --init # 生成tsconfig.json

安装完成后可以通过 tsc 编译 ts 文件，会在同目录下生成编译好的 js 文件。

tsc # 可以将ts文件编译成js文件
tsc --watch # 监控ts文件变化生成js文件

也可以通过构建工具（webpack、rollup、esbuild 等）转换成 js 去运行

2. TypeScript 基础类型

1. string number boolean

// 小写的类型一般用于描述基本类型
let str1: string = "1";
// 大写的类型用来描述示例类型
let str2: String = "2";
let str3: String = new String("3");

2. 数组

// 类型[]
let arr1: number[] = [1, 2, 3, 4];
// Array<类型>
let arr2: Array<number> = [1, 2, 3, 4];
// 声明数组中的类型既有数字也有字符串
let arr3: (number | string)[] = [1, 2, 3, 4, "a", "b"];

3. 元组 tuple

// 元组还是数字，只是对每个元素的位置进行了描述
// 元组在新增内容的时候，不能增加额外的类型值，只能是已有的，而且增加后无法访问
let tuple: [string, number, string, number] = ["1", 2, "3", 4];

4. 枚举

// 枚举类型可以进行反举（值是数字的时候可以反过来枚举），枚举没有值会根据上面的索引自动累加
// 枚举在编译成js时，会编译成对象，通常使用常量枚举，不会额外编辑成对象，更节约性能
const enum STARUS {
  "OK" = 100,
  "NO_OK",
  "NOT_FOUND",
}