TypeScript（ts） 语法笔记

ts 是 js 的超集
中文文档
保留字

break	as	catch	switch
case	if	throw	else
var	number	string	get
module/namespace	type	instanceof	typeof
public	private	enum	export
finally	for	while	void
null	super	this	new
in	return	true	false
any	extends	static	let
package	implements	interface	function
do	try	yield	const
continue

类型

变量类型

let  x: number | null | undefined 

类型	关键字	介绍
	顶级类型
任意类型	any	声明为 any 的变量可以被赋值任意类型的值。
unknown	unknown	只能赋值给 unknow 或 any 类型，不能赋值给其他类型； unknow 类型 不能访问属性和方法
	2级
Object	Object|{}	js原型链的顶端，通过所有类型 {}类型 被赋值后，不能修改
	4级
数字	number	双精度 64 位浮点值。它可以用来表示整数和分数。
字符串	string	同es6
布尔	boolean
数组	typename[] | Array<typename>	声明变量为数组。 多维数组写法 typename[][][]··· / Array<Array<···Array<typename>···>>
元组	[string, number, ···]	表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。 readonly 可以避免元组项被修改 不在意顺序any[]会更简单
枚举	enum	枚举类型用于定义数值集合。 定义枚举enum <EnumTypeName> {biao=1, Green, Blue} // {1, 2, 3}
void	void	用于标识方法返回值的类型，表示该方法没有返回值。不可以用于赋值
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值， 只能用于any，unknown类型赋值
引用类型	object	引用类型
	6级 最底级
never	never	never 是其它类型（包括 null 和 undefined）的子类型，代表不可能出现的类型。 如 number & string 应用1 不会出现返回的函数； 应用2 switch兜底操作校验 当类型发生变化时，可被类型检查

元组

const a:[number,boolean] = [1, false]
typeof a[0] // number
typeof a['length'] // 2

枚举 enum

可以增加 const 定义，编译时会被编译成常量，否则会被编译成对象

数值类型值可以反向映射
value -> key

never

联合类型中的never会被忽略

never 应用一：
switch 目标 的类型 可选值扩增，没有相应处理，编译时会提示报错。

default: const n:never = targetVar

应用二：

函数类型

funciont xxx(参数: 参数类型): 返回类型 {}
(参数: 参数类型): 返回类型 => {}

?: 可选参数 主要对应js 参数可不传入的特点 相当于 设置默认值为 undefined
= 参数 设置默认值

特点：

1. 可以在第一个参数定义 this 类型
2. 支持 函数重载 依次排列定义

   function A(option:object):void
   function A(str:string, mode: string):void
     ···
   function A() {
     // 判断参数情况，做相应的实现
   } // 最后为实现
   

内置对象

ESCM 各种类型的构造函数
Set<typename>
Map<typename1,typename2>

DOM相关对象
HTML{Xxx}Element HTMLElement Element
NodeList NodeListOf<typename>

BOM相关对象
Storage
Location
Promise<returnTypeName>

联合类型 | 交叉类型 &

类型断言 xxx as typename/<typename>xxx

在编译检查时跳过，指明运行时值的类型

// 写法一
<类型>值
// 写法二
值 as 类型

给 window 添加自定义属性时，为避免报错，可以断言其为 any 类型

获取类型 typeof

获取属性名 keyof

keyof xx 返回联合类型

联合类型可以被 in 遍历

类型推断机制

根据声明时赋值的类型进行推断
若未赋值，则推断为any

type 类型别名

type oddNumbersUnderTen = 1 | 3 | 5 | 7 | 9

extends 在 type 中表示包含(子类型)判断

type xx = a extends typename ? x : y

interface

定义对象内部数据结构

属性不能多也不能少

interface User {
  readonly name?: string // 只读 可选
  [propName:string]: any // 索引签名
  readonly cb: (ms:string)=>void
} 

const user: User = {
  name: "xxxx",
  xxx: 0,
  cb: (haidna:string) => {
    console.log(haidan)
  }
}

定义 函数结构 (参数类型):返回类型

interface Fun {
  (num: number): void
}
const showNumber: Fun = (show: number) {
  console.log(show)
}

特点：

1. 同名的接口 属性会合并
2. 可以通过 extends 继承 不同名的接口。来实现不同名接口的属性合并

内置Interface IArguments 对应 函数 argument 关键字

interface 与 type

type 不支持 extends，只能通过交叉类型来实现类似效果
interface 不能直接表达 联合类型，只能在对象属性上设置联合类型
interface 重名会合并，而 type 不允许重复定义，重复定义无效

class 类

implements 可以通过 interface 接口 或其他 class 类 来约束 class 类
多个用逗号,隔开

implements 的接口或类中定义的属性和方法，类必须实现，否则会报错

class本身具备 extends 不要与 ts 的混淆

abstract 抽象类

与 interface 不同，可以包含实现

范型

使用符号指代类型，在使用时再著名

// 使用 Array<T>
type StringArray = Array<string>

type A<T> = string | number | T

// 在调用时指定 type 通常习惯简写为 T
interface Backpack<T> {
  add: (obj: T) => void;
  get: () => T;
}

// 函数范型
xxx<type> () {
}

应用一：
范型 确定异步返回的参数类型，方便代码提示

泛型约束 extends

范型的类型规则 必须 满足约束的 规则

interface Len {
  length: number
}
<T extends Len>

结合 keyof

借助 keyof 约束范型 为 对象的 key 构成的类型

<T, K extends keyof T>

namespace 命名空间

可以导出命名空间

命名空间别名

import xxx = A.B.C

混入 mixin

对象混入

使用 Object.assign() 组合多个对象，则结果的类型 则是各个对象类型的 交叉类型 &

类的混入

修饰符 XxxDecorator 装饰器

启用装饰器配置

类 ClassDecorator

定义装饰器

const Xxx:ClassDecorator = (target) => { // target 为类的 构造函数
  // 可以在不破坏原本 class 的结构基础上，去追加 属性和方法
}

调用装饰器

@Xxx
class SomeClass {
}

底层实现就是

Xxx(SomeClass)

装饰器工厂-工厂函数
可以通过 函数柯里化 来实现为 Xxx 自定义参数

属性 PropertyDecorator

target 原型对象
key 属性名

方法 MethodDecorator

target 原型对象
key 方法名
descriptor 属性描述符 :PropertyDescriptor

descriptor.value 可以访问方法

参数 ParameterDecorator

target 原型对象
key 方法名
index 参数所在位置

对 参数 进行一定的转化处理

在参数修饰器中 存 标识

从方法修饰器中 取 标识

根据标识做不同业务处理，传递处理过的参数

协变 --到子类型

允许使用 定义不同但结构相同 或 存在包含关系 的类型 进行赋值
虽然类型不同，但可以做到完全覆盖，则这种赋值不会报错（一般类型不同会报错）。这种现象称为 协变

鸭子类型：结构相同，行为相同 那就是同一种鸭子

变量多出的属性本就不在考虑中，所以并不影响逻辑

逆变 --到超类型

通常发生在函数的赋值，参数类型的比较规则
如果被赋值的函数的参数类型 能够包含 赋值的函数的参数类型（针对每个对应参数），则此赋值被允许。
这个逻辑与协变相反，故而被称为 逆变

函数的参数如果小鸭子被大鸭子覆盖，则在后续调用处就会出现属性缺失的情况

若要支持双向协变，需要设置

infer

T extends Array<any> ? T[number] : T
// 满足约束返回数组元素类型

推导泛型参数：infer 通过已知的类型和获得它泛型反推出泛型参数

应用背景： 实际的类型 与 参数类型存在关联，得知传参也就得知了类型

infer 只能在 extends 的右边使用，
infer P 的 P 也只能在条件类型为 True 的一边使用

获取数组元素的类型

type TYPE<T> = T extends Array<infer U> ? U : never

type arrType = TYPE<[string, number]>
// 相当于 type U = string | number
type varType = TYPE<string>
// 相当于 type U = never

获取函数返回类型

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any

type func = () => number
type variable = string

// 符合 extends 的类型，得出匹配的类型
type funcReturnType = ReturnType<func> // funcReturnType 类型为 number
// 不符合
type varReturnType = ReturnType<variable> // varReturnType 类型为 any

提取数组中元素 （字面量类型）
下列为最后一个元素

type Last<T extends any[]> = T extends [...any[],infer Last] ? Last : []

type a = Last<['a','b','c']>
// type a = 'c'

infer 支持递归
实现数组翻转对应的类型

类型谓词 is

分发

Conditional Types （条件类型）

联合类型会被分别代入
必须是裸类型

工具类型

Partial 转化为可选

// Partial 把 T 类型中定义的所有属性变成可选的
type Partial<T> = {
  [P in keyof T]?: T[P]
}

Readonly 转化为可选

// Readonly 把 T 类型的所有属性标记为只读类型
type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}

Pick 取一部分属性

// 从一个复合类型 T 中，取出几个想要的类型的组合 K
type Pick<T,K extends keyof T> = {
  [P in K]: T[P]
}

Record 同时约束 key 和 type

// Record 将 K 中的每个属性，都转为 T 类型
type Record<T,K extends keyof any, T> = {
  [P in K]: T
}
// keyof any ==> string | number | symbol

在泛型中使用 extends 并不是用来继承的，而是用来约束类型的。

应用：

1. 在属性类型相同时，可以实现简写。

const styles:Record<string, CSSProperties> = {
  box: {
    overflow: 'hidden',
    backgroundSize: `100% 100%`,
    background: `#000`,
    width: `100vw`,
    height: `100vh`
  }
}

---

声明文件 xxx.d.ts

npm i @types/包名

任意层的 node_modules/@types 都会被使用

declare

declare 关键字可以声明扩充 全局变量、函数、类、命名空间等
扩充模块：

扩充全局变量：

扩充函数：

/// <reference path="Validation.ts" /> 引用声明
/// <reference type="xxx.d.ts" /> 引用类型声明