TypeScript Tips - EricYangXD/LearnReact GitHub Wiki

记录一些TS的奇技淫巧2333

Omit

  • Omit<T,K>类型让我们可以从另一个对象类型中剔除某些属性，并创建一个新的对象类型：T：是对象类型名称，K：是剔除T类型中的属性名称。

  • Q.实现一个工具类型：SomeRequired<T,K>，作用是将对象 T 内，属于 K 的 key 标记为 required，其他的保持原样。

type SomeRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
  • A.先从T中剔除K，得到新的对象类型；从T中选出K并标记为Required得到新的对象类型；合并这两个类型得到想要的类型。

Required

  • 把所有属性变成必需的required
# eg.源码
type Required<T> = {
    [P in keyof T]-?: T[P];
};

Pick

  • 从一个复合类型中，取出几个想要的类型的组合，得到一个新类型
# eg.源码
type Pick<T, K extends keyof T> = {
  [key in k]: T[key]
}

# eg. 从TState中拿到name和age属性，组成一个新的类型TSingleState
interface TSingleState extends Pick<TState, "name" | "age"> {};
  • 解析：在泛型中使用extends并不是用来继承的，而是用来约束类型的。所以这个K extends keyof T，应该是说key被约束在T的key中，不能超出这个范围，否则会报错的。

& 交叉类型 extends

  • 与

| 联合类型

  • 或

Partial

  • Make all properties in T optional，把某个类型中的所有属性都变为可选
# eg.源码
type Partial<T> = {
    [P in keyof T]?: T[P];
};

Readonly

  • 变为只读
# eg.源码
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

Record

  • Construct a type with a set of properties K of type T，即将K中的每个属性([P in K]),都转为T类型。
# eg.源码
type Record<K extends keyof any, T> = {
    [P in K]: T;
};
# eg.
type Person6 = Record<'name' | 'age', string>;
// Person6 === {name: string; age: string}

declare namespace

  • 如果代码中用到了一个TS无法识别的类型/变量或者引入一个第三方模块时，可以新建 同名.d.ts文件，在里面declare module 'xxx'；
// global.d.ts
declare var n: number;
declare let s: string;
declare const o: object;
declare function f(s: string): number;
declare enum dir {
    top,
    right,
    bottom,
    left
}
  • 或者在global.d.ts中全局声明：
declare namespace MyPlugin {
    var n:number;
    var s:string;
    var f:(s:string)=>number;
}
  • 修改已存在的全局变量声明
declare global {
    interface String {
        hump(input: string): string;
    }
}
// 注意: 修改"全局声明"必须在模块内部, 所以至少要有 export{}字样
// 不然会报错❌: 全局范围的扩大仅可直接嵌套在外部模块中或环境模块声明中
export {}

使用泛型时用extends进行类型约束

function test<T extends number | string, Y extends number | string>(a: T, b: Y) {
    console.log(a, b)
}
test<number,number>(12,23);
⚠️ **GitHub.com Fallback** ⚠️