TypeScript——2021最新学习心得总结

TypeScript

未来前端的发展逐步挺近企业级的开发业务，强类型的typescript已经广泛普及使用

• 优势一：
  类型化思维方式，使得开发更加严谨，提前发现错误，减少改bug事件
• 优势二：
  类型系统提高了代码可读性，并使维护和重构代码更加容易
• 优势三：
  补充了接口、枚举等开发大型应用时JS缺失的功能

TypeScript环境安装与运行

安装：npm install -g typescript

初始化生成tsconfig.json配置文件：tsc --init

编译成js：tsc ./index.ts

三步让vscode自动将ts文件编译为js文件

1. 运行：tsc --init，创建tsconfig.json文件
2. 修改tsconfig.json文件，设置js文件夹：“outDir”: “./js/”
3. 设置vscode监视任务，之后修改项目中的ts，自动生成js

变量

• 在TS中，为变量指定了类型，就只能给这个变量设置相同类型的值

• 原有类型
  string
  number
  boolean：在ts中只有true和false
  Array：需要声明时指定数组中元素的类型
  null
  undefined
  synbol
  Object

• 新增类型
  tuple元组
  enum枚举
  any任意类型
  never
  void

数组

• 方式一：let 数组名: 类型[] = [值1, 值2];
  let arr: number[] = [1, 2, 3, 4, 5];

• 方式二：let 数组名: Array<类型> = [值1, 值2];
  let arr: Array = [1, 2, 3, 4, 5];

元组(tuple)

• ts中数组元素类型必须一致，元组可以有不同元素

• 就是一个规定了元素数量和每个元素类型的"数组"
  而每个元素的类型，可以不相同

• 语法：
  let 元组名: [类型1, 类型2, 类型3] = [值1, 值2, 值3];
  let tup1: [string, number, boolean] = [‘a’, 18, true];

枚举(enum)

• 应用

// 声明性别枚举
enum Gender{
   
    Boy = 1,
    Girl = 2,
    Unknown = 3
}
// 创建用户性别变量
let userSex: Gender = Gender.Boy;
// 判断变量中的性别是否为Boy
if(userSex === Gender.Boy){
   
    console.log(userSex); // 1
}else{
   
    console.log(userSex); // 2 or 3
}

任意类型(any)

• any代表任意类型，一般在获取dom/不知道变量是什么类型时使用

空类型(void)

• void代表没有类型，一般用在无返回值的函数

• 应用

function fn(): string {
   
    ret