类型系统

TS已经成为了如今前端的标配了，无论是项目实践还是面试考察，都会涉及到TS的知识点。在青训营中学了TS相关内容，虽然课程时长有限，但是课后进行了更为深入的学习，知识点还是很丰富的。TS入门首先是其类型系统，其中有许多概念可以从JS中移植而来，而有的概念则相对比较陌生。本文主要总结了TS中的类型系统，明天将更新泛型等类型工具的使用，今天的分享只是开胃菜，明天才是硬核内容

原始类型的类型标注

• number / string / boolean / symbol / bigint
• null/undefined 没有开启 strictNullChecks 检查的情况下，会被视作其他类型的子类型
• void 内部没有 return 语句，或者没有显式 return 一个值的函数的返回值

数组与元组的类型标注

const arr1: Array<number> = [1,3,5]
const arr2: number[] = [2,4,6]
const arr3: [number, string] = [123, '123'] // 越界访问时报错
const arr3: [age: number, gender: string] = [18, 'male'] // 具名元组

对象的类型标注

• interface关键字定义
• 每一个属性的值的类型必须与接口一一对应
• ?标记属性为可选 readonly标记属性为只读

interface Ikun {
	hobby: string[],
	age?: number 
}

字面量类型

• 主要包括：字符串字面量类型、数字字面量类型、布尔字面量类型和对象字面量类型
• 通常和联合类型一起使用
• 原始类型的标注的变量其值较为宽泛，而字面量类型用于使其更为精确

const code: '123' | '456' = '123'

type status = 'success' | 'failure'
const result: status = success'

函数类型标注

• 函数的类型用来描述函数的入参类型与返回值类型

• 支持可选参数（? 标注）和 默认值

  • 可选参数必须位于必选参数之后
  • rest参数用数组/元组类型标注

// 函数声明的类型标注
function bar1( num: number ): string {
	return num.toString()
} 
// 函数表达式的类型标注
const bar2 = function( str: string ): number {
	return num.length
}
const bar3: ( str: string )=> number = function(str) {
	return num.length
}
// 箭头函数的类型标注 （推荐用type声明类型别名）
const bar4 = ( str: string ): number => {
	return str.length
}
type Func = ( str: string )=> number
const bar5: Func  = (str) => {
	return num.length
}

• 函数重载签名：实现入参与返回值类型的关联；将逻辑相似但是参数不一致的函数进行合并，方便统一管理与维护
• 具有多个重载签名的函数被调用时，将按照声明的顺序依次往下查找使用

function foo(str:string, bool: true): number；
function foo(str:string, bool?: false): string；
function foo(str:string, bool?: boolean): number | string {
	if (bool) return str.length
	return str
}

Class类型标注

• 属性的标注；构造函数、方法、存取器的类型标注

• 访问性修饰符

  • public：被标注的成员在类、类的实例以及子类中都能被访问（未标注默认为public）
  • private：仅能在类的内部被访问
  • protected：仅能在类与子类中被访问

• 操作修饰符：readonly：只读，不可修改

• 静态成员 用static关键字标注，静态成员无法在类的内部通过this访问，也无法被实例继承

• 类的继承与实现

  • extends 关键字实现子类对父类继承
  • override关键字确保子类尝试覆盖的方法在父类中一定存在，否则会报错
  • implements关键字实现一个抽象类

TS内置类型标注

• any：任意类型

  • any类型的变量在声明后能够接受任意类型的值，同时可以被赋值给任意其它类型的变量
  • 可以在 any 类型变量上任意地进行操作

• unknown：未知类型

  • unknown 类型的变量可以再次赋值为任意其它类型，但只能赋值给 any 与 unknown 类型的变量

• never：类型系统层级中最底层的类型