ts常用体操

内容列表

这里记录一些常用的类型定义

1.对象属性只读(递归)

type X = {
  x: {
    a: 1;
    b: "hi";
  };
  y: "hey";
};

type Expected = {
  readonly x: {
    readonly a: 1;
    readonly b: "hi";
  };
  readonly y: "hey";
};

type Todo = DeepReadonly<X>; // should be same as `Expected`

// 实现
type DeepReadonly<T> = keyof T extends never
  ? T
  : { readonly [k in keyof T]: DeepReadonly<T[k]> };

2.元组转换为对象

type Tuple = ["tesla", "model 3", "model X", "model Y"]; // ['tesla', 'model 3', 'model X', 'model Y']

type Result = TupleToObject<Tuple>; // expected { tesla: 'tesla'; 'model 3': 'model 3'; 'model X': 'model X'; 'model Y': 'model Y' }

// 实现
type TupleToObject<T extends readonly (string | number)[]> = {
  [K in T[number]]: K;
};

3.获得可选属性

type I = GetOptional<{ foo: number; bar?: string }>; // expected to be { bar?: string }

// 实现
type GetOptional<T> = {
  [P in keyof T as T[P] extends Required<T>[P] ? never : P]: T[P];
};

4.获得必需的属性

type I = GetRequired<{ foo: number; bar?: string }>; // expected to be { foo: number }

// 实现
type GetRequired<T> = {
  [P in keyof T as T[P] extends Required<T>[P] ? P : never]: T[P];
};

5.获取class的公有属性

class A {
  public str: string;
  protected num: number;
  private bool: boolean;
  getNum() {
    return Math.random();
  }
}

type publicKeys = ClassPublicKeys<A>; // 'str' | 'getNum'

// 使用方案
type ClassPublicKeys<A> = keyof A;

6.获取class的私有属性

class A {
  public str: string;
  protected num: number;
  private bool: boolean;
  getNum() {
    return Math.random();
  }
}

type privateKeys = ClassPrivateKeys<A>; // 'bool'

// 使用方案
type ClassPrivateKeys<A> = {
  [K in keyof A]: A[K] extends Function ? never : K;
}[keyof A];

7.获取class的受保护属性

class A {
  public str: string;
  protected num: number;
  private bool: boolean;
  getNum() {
    return Math.random();
  }
}

type protectedKeys = ClassProtectedKeys<A>; // 'num'

// 使用方案
type ClassProtectedKeys<A> = {
  [K in keyof A]: A[K] extends Function ? never : K;
}[keyof A];

相关

那些年之电子产品

2024-11-07

从上大学开始到现在买了很多电子产品,于是乎,就整理一下,做个纪念

了解更多

TypeScript:扩展第三方库的类型定义

2022-01-09

TypeScript 作为 JavaScript 的超集,为 Web 开发带来了强类型语言和类似代码智能提示这种良好的开发体验,如何对第三方依赖库的类型定义进行扩展呢?

了解更多

DOM-元素节点几何量

2018-05-19

当我们在查看 HTML 文档时,每个元素节点被解析后,都画成了可视形状。我们可以获取每个元素节点的几何量(宽、高、偏移量)以及页面滚动距离。

了解更多