TS 常用类型扩展

1,268 阅读2分钟

declare 修饰符

.d.ts 文件内使用, 定义全局类型

声明类型

// 变量
declare let a: any;
// 方法
declare function name(params: any): void;

声明作用域

declare namespace API {
    interface ResponseList {}
}

声明模块

declare module '*.css' {
  const css: string;
  export default css;
}

声明第三方库类型

declare module 'weixin-js-sdk' {
  export = WeixinJsSdk;
}

扩展库类型

declare module 'vue' {
  interface ComponentCustomProperties {
    $wx: any;
  }
}

keyof 操作符

  • 获取对象类型的键
const obj = {
  a: 1,
  b: '1'
}
​
type Obj = keyof typeof obj // "a" | "b"

typeof 操作符

获取对象类型

const a = {
  a: 1,
  b: '1'
}
​
type A = typeof a

获取枚举类型

enum b {
  Get,
  Post
}
​
type B = keyof typeof b

获取函数类型

const c = () => {
  return {
    a: 1,
    b: '1'
  }
}

type C = typeof c

索引类型

interface Obj {
  [key: string]: string | number;
}
const obj: Obj = {};
obj.id = 1;

映射类型

Pick

源码

/**
 * 从T中,选择一组键在并集K中的属性
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

示例

interface A {
  a: string;
  b: number;
  c: number;
}

type B = Pick<A, "a" | "b">; // { a: string; b: number }

Omit

源码

/**
 * 构造一个除类型K中的属性外具有T属性的类型。
 */
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

示例

interface A {
  a: string;
  b: number;
  c: number;
}

type B = Omit<A, "a" | "b">; // { c: number }

Record

源码

/**
 * 构造一个具有类型T的属性集K的类型
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

示例

const obj: Record<string, number> = {};
obj.id = 1;

Partial

源码

/**
 * 使T中的所有属性都是可选的
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

示例

interface Demo {
  name: string;
  password: string;
}

type a = Partial<Demo>;

ReturnType

源码

/**
 * 获取函数类型的返回类型
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;

示例

function func () {
  return {
    a: 1,
    b: '1'
  }
}
type b = ReturnType<typeof func>

知识点

1. type 和 interface 异同点, 及使用场景

相同点

  • 都可以用来描述对象或函数
  • 都支持扩展

    • type 使用 & 交叉类型扩展
    • interface 使用 extends 扩展

不同点

  • 类型别名可以为基本类型, 联合类型, 元组类型
  • 同名的接口会自动合并, 而别名类型不会

使用场景

类型别名

  • 定义基本类型
  • 定义元组类型
  • 定义函数类型
  • 定义联合类型
  • 定义映射类型

接口

  • 需要利用接口自动合并特性的时候
  • 定义对象类型且无需使用 type 的时候