type 类型别名
// 为某类型指定别名
type Name = string
type Age = number
type Man = {
name: Name
age: Age
}
const c: Man = {
name: 'c',
age: 20
}
keyof 对象键类型
type _Object = { [key: string]: unknown }
function getKeysByObj(o: T): (keyof T)[]{
return Object.keys(o)
}
const a = {
name: 'a',
age: 12
}
const aKeys = getKeysByObj(a)
// aKeys: ('name' | 'age')[]
const b = {
1: 'b',
2: 20
}
const bKeys = getKeysByObj(b)
// bKeys: (1|2)[]
typeof 值类型
const a = {
name: 'a',
age: 23
}
// 通过 typeof b 获取 a的类型定义
const b: typeof a = {
name: 'b',
age: 10
}
/**
* a 类型定义
* {
* name: string,
* age: number
* }
*/
// 获取函数定义
function random(n: number): number{
return Math.random() * n
}
type Random = typeof random
// (n:number) => number
Partial 转为可选参数
interface Man {
name: string,
age: number
}
// 将Man的所有属性改为可选
type ManCopy = Partial
const cache: ManCopy = {}
// ManCopy { name?: string, age?: number }
Required 将属性全转为必填
interface Data {
id: string
type?: string
}
type FullData = Required
const fd: FullData = {
id: 'xx',
type: 'su'
}
Readonly 属性都转为只读
interface Data {
id: string
type?: string
}
type ReadonlyData = Readonly
const d:ReadonlyData = {
id: 'xx',
}
d.id = 'cc'
// Cannot assign to 'id' because it is a read-only property.
Record 定义 K 为键， T 为值的映射类型
type keys = 'name' | 'job' | 'age'
type Man = Record
const m: Man = {
name: 'm',
job: 't',
age: '10',
}
/**
* {
* name: string,
* job: string,
* age: string
* }
*/
Pick 提取指定属性,生成新类型
interface Man {
id: string
name: string
age: number
job: string
birth: string
address: string
}
// 提取指定属性类型
type ManIt = Pick
const m: ManIt = {
name: 'm',
age: 25,
job: 'tt'
}
/**
* {
* name: string,
* age: number,
* job: string
* }
*/
Omit 删除指定属性，生成新类型
type A = 'color' | 'width' | 'height'
type B = {
name: string
width: number
height: number
}
type C = Omit
// { name: string }
Exclude 联合类型取 K，T 的差集
interface A{
name: string
color: string
}
interface B{
name: string,
width: number
}
type keys = Exclude
type C = Record
const c: C = {
color: 'orange'
}
/**
* {
* color: string
* }
*/
Extract 联合类型取 A， B的并集
type A = 'color' | 'width' | 'height'
type B = 'name' | 'height'
type C = Extract
// "height"
NonNullable 过滤类型内的 null 、 undefined、never
type A = 'data' | null | undefined | never
type B = NonNullable
// type "data"
type T1 = NonNullable
// never
type T2 = NonNullable
// never
type T3 = NonNullable
// nerver
type T4 = NonNullable
// any
type T5 = NonNullable
// string
Parameters 获取函数参数类型元组
function buildCar(name: string, color: string){
return { name, color }
}
const args: Parameters = ['xx', 'yy']
// ('string', 'string')
console.log(buildCar(...args))
// { name: 'xx', color: 'yy'
ConstructorParameters 获取构造函数参数类型元组
class Car{
name:string
color:string
constructor(name: string, color:string){
this.name = name
this.color = color
}
}
interface CarConstructor{
new (name: string, color:string): Car
}
const args:ConstructorParameters = ['mini', 'blue']
// type ['string', 'string']
const c = new Car(...args)
InstanceType 获取构造函数返回值类型
class Car{
name:string
color:string
constructor(name: string, color:string){
this.name = name
this.color = color
}
}
interface CarConstructor{
new (name: string, color:string): Car
}
type c = InstanceType
// type Car
ReturnType 函数返回值类型
function getNumber(): number{
return Math.random()
}
function getString(): string{
return `${Math.random()}`
}
let a:ReturnType
let b: ReturnType
a = 10
b = 'msg'
Uppercase 字符字面量全大写
type Status = 'success' | 'fail'
type STATUS = Uppercase
// type "SUCCESS" | "FAIL"
Lowercase 字符字面量全小写
type Status = "SUCCESS" | "FAIL"
type status = Lowercase
// type "success" | "fail"
Capitalize 字符字面量首字母大写
type Status = "success" | "FAIL"
type status = Capitalize
// type "FAIL" | "Success"
UnCapitalize 字符字面量首字母小写
type Status = "success" | "FAIL"
type status = Uncapitalize
// type "success" | "fAIL"
ThisType 明确当前函数this的指向类型
// 没有ThisType情况下
const foo = {
bar() {
console.log(this.a); // error，在foo中只有bar一个函数，不存在a
}
}
// 使用ThisType
const foo: { bar: any } & ThisType<{ a: number }> = {
bar() {
console.log(this.bar) // error，因为没有在ThisType中定义
console.log(this.a); // ok
}
}
foo.bar // ok
foo.a // error，在外面的话，就跟ThisType没有关系了
ThisParameterType 获取函数this指向类型
interface Car{
name: string
color: string
}
function getCarName(this: Car){
console.log(this.name)
}
const c = {
name: 'x',
color: 'y',
}
getCarName.apply(c)
// x
type T = ThisParameterType
// type Car
// 函数 getCarName this 类型指向Car
OmitThisParameter 获取一个没有this指向的函数类型
interface Car{
name: string
color: string
}
function getCarName(this: Car){
console.log(this.name)
}
type T = OmitThisParameter
// type () => void
const fn: T = () => {
console.log('not name')
}
infer 替代推断类型
type Unpacked = T extends (infer U)[] ? U : T;
type T0 = Unpacked; // string
type T1 = Unpacked; // string
文档
- typescript 中的高级类型
- typescript的ThisType具体有什么用?
- typescript 的 Utility Types, 你真的懂吗?
- typescript的infer关键字
