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];

相关

OSI 与 TCP/IP 参考模型

2018-06-17

目前流行的两大网络体系结构是 OSI/RM 和 TCP/IP 参考模型,他们均是分层结构。分层是为了简化问题,降低网络设计复杂性,而且各层次结构相互独立,实现的功能也相对独立。层与层之间只在层间接口处关联,层间耦合最小。

了解更多

DOM-元素节点几何量

2018-05-19

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

了解更多

Web 应用:轻量级状态管理工具 zustand

2021-11-18

Web 网页向 Web 应用发展的过程中,势必会出现 Web 项目的复杂化问题,而在移动端场景,基于 React.js 的应用中如何管理状态?zustand 也许值得一试。

了解更多