TS入门-工具类型

copyLeft
264 阅读3分钟

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<T extends _Object>(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<Man>

const cache: ManCopy = {}
// ManCopy { name?: string, age?: number }

Required 将属性全转为必填

interface Data {
  id: string
  type?: string
}

type FullData = Required<Data>

const fd: FullData = {
  id: 'xx',
  type: 'su'
}

Readonly 属性都转为只读

interface Data {
  id: string
  type?: string
}

type ReadonlyData = Readonly<Data>

const d:ReadonlyData = {
  id: 'xx',
}

d.id = 'cc'
//  Cannot assign to 'id' because it is a read-only property.

Record<K, T> 定义 K 为键， T 为值的映射类型

type keys = 'name' | 'job' | 'age'
type Man = Record<keys, string>

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<Man, 'name' | 'age' | 'job'>

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<B, A>
// { name: string }

Exclude<K, T> 联合类型取 K，T 的差集

interface A{
  name: string
  color: string
}

interface B{
  name: string,
  width: number
}

type keys = Exclude<keyof A, keyof B>
type C = Record<keys, string>

const c: C = {
  color: 'orange'
}

/**
 * {
 *  color: string
 * }
 */

Extract<A, B> 联合类型取 A， B的并集

type A = 'color' | 'width' | 'height'
type B = 'name' | 'height'
type C = Extract<A, B>
// "height"

NonNullable 过滤类型内的 null 、 undefined、never

type A = 'data' | null | undefined | never
type B = NonNullable<A>
// type "data"

type T1 = NonNullable<null>
// never
type T2 = NonNullable<undefined>
// never
type T3 = NonNullable<never>
// nerver
type T4 = NonNullable<any>
// any
type T5 = NonNullable<string>
// string

Parameters 获取函数参数类型元组

function buildCar(name: string, color: string){
  return { name, color }
}

const args: Parameters<typeof buildCar> = ['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<CarConstructor> = ['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<CarConstructor>
// type Car

ReturnType 函数返回值类型

function getNumber(): number{
  return Math.random()
}

function getString(): string{
  return `${Math.random()}`
}

let a:ReturnType<typeof getNumber>
let b: ReturnType<typeof getString>

a = 10
b = 'msg'

Uppercase 字符字面量全大写

type Status = 'success' | 'fail'
type STATUS = Uppercase<Status>
// type "SUCCESS" | "FAIL"

Lowercase 字符字面量全小写

type Status = "SUCCESS" | "FAIL"
type status = Lowercase<Status>
// type "success" | "fail"

Capitalize 字符字面量首字母大写

type Status = "success" | "FAIL"
type status = Capitalize<Status>
// type "FAIL" | "Success"

UnCapitalize 字符字面量首字母小写

type Status = "success" | "FAIL"
type status = Uncapitalize<Status>
// 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<typeof getCarName>
// type Car
// 函数 getCarName this 类型指向Car

OmitThisParameter 获取一个没有this指向的函数类型

interface Car{
  name: string
  color: string
}

function getCarName(this: Car){
  console.log(this.name)
}

type T = OmitThisParameter<typeof getCarName>
// type () => void

const fn: T = () => {
  console.log('not name')
}

infer 替代推断类型

type Unpacked<T> =  T extends (infer U)[] ? U : T;

type T0 = Unpacked<string[]>; // string
type T1 = Unpacked<string>; // string

文档

avatar
文章
阅读
粉丝