TS的学习 | 青训营笔记

131 阅读2分钟

[这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天]

1. TS和JS的区别

不同点

  • JS是动态类型的语言 在执行阶段才决定类型的匹配
  • TS是静态类型的语言 在执行前进行类型匹配

相同点

  • 二者都是弱类型语言对两个不同类型变量操作时会发生隐式类型转换,比如在进行数字和字符串相加操作时,会发生隐式类型转换(将数字类型的变量转变为字符类型)

TS相当JS的超集, 它包含和兼容所有JS特性,可以和JS一起存在,支持渐进式引入与升级

2.TS的基本语法

const variable: <类型> = <值>

对于对象类型的变量,我们可以定义一个interface(接口)来实现对该对象中属性类型的约束,即该对象必须存在接口定义的属性和其对应的类型 image.png 为函数添加类型声明

  • const fn: (v1: number, v2: number) => number = (x, y) => x + y
  • 当然也可以使用接口来进行类型声明
interface typeConstraint {
   (x: number, y: number): number
}
const fn: typeConstraint = (x, y) //  => x + y
  • 也可以直接对函数进行约束
function fn(x: number, y: number): number {
   return x + y
}

为数组添加类型约束

关键字type: 定义一个代表复杂数据类型的别名 image.png

3.TS补充类型

  • type: 定义一个代表负载数据类型的别名
  • enum: 定义一个枚举类型,支持枚举值到枚举名的正、反向映射
enum MyEnum {
   add = '+',
   muly = '*'
}
`支持正反映射`
MyEnum['add'] === '+' //  => true
MyEnum['+'] === 'add' // => true

4.Ts的泛型

不预先指定具体类型,而是在使用的时候再指定类型

  • 预先指定类型: type myType = (target: any) => any[]
  • 使用泛型: type myType = <T>(target: T) => T[] image.png

5.TS的类型别名 & 类型断言

  • 类型别名就是使用 type 关键字声明的别名
  • 类名断言 as <T>: 当确定某个值的类型时,我们可以使用 as进行断言

6.交叉类型 & 联合类型

  • 联合类型 A | B 联合类型表示一个值可以是几种类型之一
  • 联合类型 A & B 多种类型叠加到一起成为一种类型,它包含了所需的所有类型

7.类型保护 & 类型守卫

  • 类型保护 访问联合类型时,出于程序安全,只能访问联合类型中交集部分
  • 类型守卫 定义一个函数,它的返回值是一个类型谓词,生效范围为子作用域 image.png

8.高级类型

  • 索引类型: keyof 相当于取值对象中的所有key组成的字符串字面量。
type myKeys = `keyof` { a: string, b: any }  // => type myKeys = "a" | "b"
  • in: 相当于取值 字符串字面量 中的一种可能性,配合泛型P,即表示每个key
  • ?: 通过设置对象可选选项,即可自动推导出子集类型