Appearance
TypeScript
type 和 interface
相同点
都能继承
ts
// extends
interface Parent {
name: string
age: number
}
interface Child extends Parent {
family: string
}
type Parent = {
name: string
age: number
}
type Child = Parent & { family: string }
不同点
type
ts
// 声明更多变
type Name = string
interface Dog {
wong()
}
interface Cat {
miao()
}
type Pet = Cat | Dog
// 具体定义数组每个位置的类型
type Animals = [Dog, Pet]
// 能直接获取类型
type B = typeof div
interface 声明能进行合并
ts
interface User {
name: string
age: number
}
interface User {
sex: string
}
readonly
Readonly 与 readonly
ts
type Asd = Readonly<{
name: string
obj: {
name: string
}
}>
// 等同于
interface Asd {
readonly name: string
readonly obj: {
name: string
}
}
与 const 对比
与 const 类似,也是无法改变内存地址指向,地址内的数据仍可修改
const 在运行时检查, readonly 在编译时检查
class 中只能使用 readonly
枚举
ts
enum MyEnums {
No = 0,
Yes,
Red = "red",
Blue = "blue",
}
console.log(MyEnums.No)
console.log(MyEnums.Yes)
console.log(MyEnums.Red)
console.log(MyEnums.Blue)
// js
var MyEnums
;(function (MyEnums) {
MyEnums[(MyEnums["No"] = 0)] = "No"
MyEnums[(MyEnums["Yes"] = 1)] = "Yes"
MyEnums["Red"] = "red"
MyEnums["Blue"] = "blue"
})(MyEnums || (MyEnums = {}))
console.log(MyEnums.No)
console.log(MyEnums.Yes)
console.log(MyEnums.Red)
console.log(MyEnums.Blue)
MyEnums["No"] = 0,MyEnums[0] = "No"
,不仅能 key 映射 value,也能从 value 映射 key,这就是数字枚举支持反向映射的原理。
const enum 在编译为 js 时会内联抹除掉枚举对象,直接内联编译为对应的值
ts
const enum MyConstEnums {
No = 0,
Yes,
Red = "red",
Blue = "blue",
}
console.log(MyConstEnums.No)
console.log(MyConstEnums.Yes)
console.log(MyConstEnums.Red)
console.log(MyConstEnums.Blue)
// js
console.log(0 /* MyConstEnums.No */)
console.log(1 /* MyConstEnums.Yes */)
console.log("red" /* MyConstEnums.Red */)
console.log("blue" /* MyConstEnums.Blue */)
declare 一般在 .d.ts
文件中使用,在编译为 js 时会完全抹除
泛型
ts
type Pick<T, K extends keyof T> = { [P in K]: T[P] }
type Record<K extends keyof any, T> = { [P in K]: T }
type Partial<T> = { [P in keyof T]?: T[P] }
type Exclude<T, U> = T extends U ? never : T
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>