TypeScript系列之：基础方法

typescript

Awaited

用于限定 promise.then 和 async/await 函数的返回值类型，可多层嵌套异步函数

  type AC = Awaited<Promise<string|number>>; // string | number | PromiseLike<string | number>
  type ACC = Awaited<Promise<Promise<string|number>>>; // string | number | PromiseLike<string | number>
  type ABC = Awaited<boolean | Promise<string|number>>; // boolean | string | number | PromiseLike<string | number>

  // 异步函数返回值表示1 promise.then
  new Promise<AC>(resolve=>{
    resolve({}) // 报错: 类型“{}”的参数不能赋给类型“string | number | PromiseLike<string | number>”的参数。
  }).then((res)=>{

  })
// 异步函数返回值表示2 async/await
  async function ap (){
    const a:AC = await new Promise(resolve=>{
      resolve({}) // 报错: 类型“{}”的参数不能赋给类型“string | number | PromiseLike<string | number>”的参数。
    })
  }

Omit<Type, excludeKeys>

用于排除已知类型中的部分类型, Omit<types, excludes>

  type ex = "mk" | "kkl"; // 要排除的类型名称
  // 已知的类型
  type types = {
    name: string;
    age: number;
    mk: Function;
    kkl: Object;
  }
  type extypes = Omit<types, ex> // {name: stirng; age: number;}
  const intype: extypes = {
    name: "lily",
    age: 28,
    mk: ()=>{}, // 报错: 对象字面量只能指定已知属性，并且“mk”不在类型“Omit<types, ex>”中。
    kkl: '',
  };

Pick<Type, keys>

与 Omit 相反，Pick用于获取已知类型中的部分类型， Pick<types, keys>

  // 要获取的部分类型名称
  type picks = "name"|'age'
  // 已知的类型
  type types = {
    name: string;
    age: number;
    mk: Function;
    kkl: Object;
  }
  type inpick = Pick<types, picks> // {name: string; age: number;}
  // 报错： 类型“{}”缺少类型“Pick<types, picks>”中的以下属性: name, age
  const picktypes: inpick = {}

Record<keys, Type>

定义object的内部数据类型


  interface datatypes {
    title: string;
    count: number;
  }
  type keys = "ab" |"ak" |"am"
  const datas: Record<keys, datatypes>={
    ab: {}, // 报错：类型“{}”缺少类型“datatypes”中的以下属性: title, count
    ak: {title: ''}, // 报错：类型 "{ title: string; }" 中缺少属性 "count"，但类型 "datatypes" 中需要该属性
    am: {title:'', count:3}, // 正确不报错
    ac: {} // 报错：对象字面量只能指定已知属性，并且“ac”不在类型“Record<keys, datatypes>”中。
  }

Readonly

属性只读，不可编辑

  interface typedata {
    title: string;
    count: number;
  }
  const datas: Readonly<typedata>={
    title: '',
    count:23,
  }
  datas.title = "more data" //报错：无法为“title”赋值，因为它是只读属性
  datas.count = 12 // 报错：无法为“count”赋值，因为它是只读属性

Required

类型必填，传入的Type的所有类型都是必填

interface typeData {
  title: string;
  description?: string;
}
const datas: Required<typeData> = {} //报错：类型“{}”缺少类型“Required<typeData>”中的以下属性: title, description

const datasr: Required<typeData> = {title:'some title'} // 报错：类型 "{ title: string; }" 中缺少属性 "description"，但类型 "Required<typeData>" 中需要该属性。

Partial

定义类型可选

interface typeData {
  title: string;
  description: string;
}

const datas: Partial<typeData> = {
  title:'', //不报错
}
const datas: Partial<typeData> = {
  title:'',
  abd:'', // 报错： 对象字面量只能指定已知属性，并且“abd”不在类型“Partial<typeData>”中。
}

Exclude<UnionType, ExcludesTypes>

排除联合类型中指定属性

type exKeys = 'a'|'b'|'c'
type allKeys = 'a'|'b'|'c'|'d'

const datas: Exclude<allKeys, exKeys> = {
  a: '', // 报错：不能将类型“{ a: string; }”分配给类型“"d"”
}
// 排除对象联合的部分类型
type typeDatas = {type:'in'; title: string; description:string; count:number;}
|{type:'in'; title: string; description:string; count:number;}
|{type:'out'; title: string; description:string; count:number;}
|{type:'in'; title: string; description:string; count:number;}

type dataseType = Exclude<typeDatas, {type: 'in'}> 
/* type dataseType = {
    type: 'out';
    title: string;
    description: string;
    count: number;
} */
const datase:  dataseType = {} // 报错：类型“{}”缺少类型“{ type: "out"; title: string; description: string; count: number; }”中的以下属性: type, title, description, count

// 排除多个类型
type UU = {type: 'a'} | {type: 'b'} |{type:'c'}|{type:'d'}
type exU = {type: 'a'}
type exUU = {type: 'a'|'b'}
type datas = Exclude<UU, exU> // type datas = {type: 'b';} | {type: 'c';} | {type: 'd';}
type datas = Exclude<UU, exUU> // type datas = {type: 'c';} | {type: 'd';}

// 删除所有数字等内置类型
type allKeys = 'a'|'b'| 1|223|2 | (()=>{}) |'aklkl' | 'kkka'
type datastype = Exclude<allKeys, number> //  type datastype = "a" | "b" | (() => {})
type datastype = Exclude<allKeys, number | Function> //  type datastype = "a" | "b" 
// 按给定的字符位置，删除字符串中的字符， 其他字符用 `string` 填充 //// 注意：与指定字符完全相同的字符默认是删除的， 如：a 默认是都被删除的
type datastype =Exclude<allKeys, `a${string}`>  // type datastype = 1 | "b" | 223 | 2 | (() => {}) | "kkka" |
type datastype =Exclude<allKeys, `${string}a`>  // type datastype = 1 | "b" | 223 | 2 | (() => {}) | "aklkl"
type datastype =Exclude<allKeys, `${string}a${string}`> // type datastype = 1 | "b" | 223 | 2 | (() => {})
type datastype =Exclude<allKeys, `${string}${'a' | 'b'}${string}`> // type datastype = 1 | 223 | 2 | (() => {})

Extract<Type, Union>

从Type中提取可赋值给Union的Union类型

 type U = 'a'|'b'|'c'
 type dataTypes = 'a'|'b'|'c'|'d'

 const datas: Extract<dataTypes, U>= 'd' //报错： 不能将类型“"d"”分配给类型“"a" | "b" | "c"”。

 type UU = {type: 'a'; key:'string';} | {type: 'b';} |{type:'c';}|{type:'d';}

 type incU = {type: 'a'}
 type incUU = {type: 'a'|'b'}

 type datas = Extract<UU, incU> //  type datas = {type: 'a'; key:'string';}
 type datas = Extract<UU, incUU> //  type datas = {type: 'a'; key:'string';} | {type: 'b';}

NonNullable

可包含null和undefined的类型

type datatypes = 'a'|'b'|number|Function|null|undefined;

type noNull = NonNullable<datatypes> // type noNull = number | Function | "a" | "b"

Parameters

参数类型

// 传入函数，取函数的参数
type paramsType = Parameters<(key:string)=>void> // type paramstype = [key: string]
type paramsType = Parameters<(key:string)=>number> // type paramstype = [key: string]
type paramsType = Parameters<()=>number> // type paramstype = []

// 获取已知函数的参数类型传入
function abc(args:{a:string; b:number; c:any}){}
type paramsType = Parameters<typeof abc> //  type paramsType = [args: { a: string; b: number; c: any;}]

// 可传入any
type paramsType = Parameters<any> // type paramsType = unknown[]
function aaa(...args:paramsType){
  console.log(args)
}
aaa(3,5, '', ()=>{})
// 直接给类型不支持
type paramsType = Parameters<string> // 报错：类型“string”不满足约束“(...args: any) => any”。 type paramsType = never
type paramsType = Parameters<Function> // 报错：类型“Function”不满足约束“(...args: any) => any”。类型“Function”提供的内容与签名“(...args: any): any”不匹配。 type paramsType = never

ConstructorParameters

根据构造函数生成一组类型，如果入参不是函数，则不生成类型

type p = ConstructorParameters<ErrorConstructor> // type p = [message?: string | undefined]
type p = ConstructorParameters<FunctionConstructor> // type p = string[]
type p = ConstructorParameters<DateConstructor> // type p = [value: string | number | Date]
type p = ConstructorParameters<RegExpConstructor> // type p = [pattern: string | RegExp, flags?: string | undefined]

// 自定义构造函数生成类型
class C { constructor(a:string,b:number){} }
type p = ConstructorParameters<typeof C> // type p = [a: string, b: number]

ReturnType

返回值类型限定

type r = ReturnType<string> // 报错： 类型“string”不满足约束“(...args: any) => any”。
type r = ReturnType<()=>string> // type r = string
type r = ReturnType<any> // type r = any
type r = ReturnType<()=>void> // type r = void

type r = ReturnType<()=>(122)> // type r = 122

// 获取已知函数的返回类型
function abc():string{return 123} 
type r = ReturnType<typeof abc> // type r = string
function abcc(){return 123} 
type r = ReturnType<typeof abcc> // type r = number

InstanceType

由Type构造函数的实例生成类型, 类型即为构造函数的实例
同样不支持string

class C {
  a=123
  b=''
  constructor(){}
  get(){}
  set(){}
}
type p = InstanceType<typeof C> // type p = C

const a:p = {
  a:3,
  b:'123',
  get: ()=>{},
  set: ()=>{},
}
a.a // (property) C.a: number

// 入参需满足：new (...args: any) => any 构造函数
type p = InstanceType<string> //报错：类型“string”不满足约束“abstract new (...args: any) => any”。

ThisParameterType

提取Type函数的this类型，如果没有this生成未知类型

function abc(this:string){
  return this.split
}
type fs  = ThisParameterType<typeof abc> // type fs = string

// 使用
type fs  = ThisParameterType<typeof abc>

function fss(p:fs){
  return abc.call(p)
}
fss(1) // 报错：类型“number”的参数不能赋给类型“string”的参数。
fss('') // 正确

OmitThisParameter

去除Type函数的this类型

function abc(this:Number){
  return this.toString(5)
}

type fs  = OmitThisParameter<typeof abc>

const fss:fs =  abc.bind(12)

console.log(fss()) // log: 12

ThisType

不返回类型；只做类型this的标记, 需要开启noImplicitThis才可使用

type CreateObj<D,M> = {
  data?: D;
  methods?: M & ThisType<D&M>;
}
function createObj<D, M>(de: CreateObj<D,M>){
  let data:object = de.data || {}
  let methods: object = de.methods || {}
  return {...data, ...methods}
}

// 生成obj
const obj = createObj({
  data: {x:0, y:2},
  methods: {
    m(dx:number, dy:number){
      this.x += dx //标记此处this为对象this
      this.y += dy
    },
  },
})
obj.m(2, 4) // obj.x = 2 obj.y = 6