TypeScript utility-types插件

╰+攻爆jí腚メ 2022-12-29 15:30 169阅读 0赞

###### 作用 ######

对TypeScript内置映射类型和别名的补充。

###### 下载 ######

NPM 
    npm install utility-types
     
    YARN 
    yarn add utility-types

###### 类型介绍 ######

1.  `FunctionKeys<T>` 拿到对象中所有函数类型属性的 key

import { FunctionKeys } from 'utility-types';
     
    type MixedProps = { name: string; setName: (name: string) => void };
     
    // 得到: "setName"
    type Keys = FunctionKeys<MixedProps>;

1.  `NonFunctionKeys<T>` 拿到对象中所有非函数类型属性的 key
2.  `ReadonlyKeys<T>`拿到对象中所有只读的 key

import { ReadonlyKeys } from 'utility-types';
     
    type Props = { readonly foo: string; bar: number };
     
    // 得到: "foo"
    type Keys = ReadonlyKeys<Props>;

1.  `MutableKeys<T>`拿到对象中非只读的 key（与ReadonlyKeys相反）
2.  `RequiredKeys<T>`拿到对象中必选的 key

import { RequiredKeys } from 'utility-types';
     
    type Props = { req: number; reqUndef: number | undefined; opt?: string; optUndef?: number | undefined; };
     
    // 得到: "req" | "reqUndef"
    type Keys = RequiredKeys<Props>;

1.  `OptionalKeys<T>`拿到对象中非必选的 key（与RequiredKeys相反）
2.  `Optional<T>`拿到将对象中的必填key变为非必选

import { Optional } from 'utility-types';
     
    type Props = { name: string; age: number; visible: boolean; };
     
    // 得到: { name?: string; age?: number; visible?: boolean; }
    type Props = Optional<Props>
    
    // 也可指定键名，得到: { name: string; age?: number; visible?: boolean; }
    type Props = Optional<Props, 'age' | 'visible'>;

1.  `Pick<T, K>`从T中选出键名为K键值对

type Props = { name: string; age: number; visible: boolean };
     
    // 得到: { age: number; }
    type Props = Pick<Props, 'age'>;

1.  `PickByValue<T, ValueType>`从T中选出键值为K键值对

import { PickByValue } from 'utility-types';
     
    type Props = { req: number; reqUndef: number | undefined; opt?: string; };
     
    // 得到: { req: number }
    type Props = PickByValue<Props, number>;
    
    // 得到: { req: number; reqUndef: number | undefined; }
    type Props = PickByValue<Props, number | undefined>;

1.  `Omit<T, K>`返回从T中移出键名为K后的键值对

import { Omit } from 'utility-types';
     
    type Props = { name: string; age: number; visible: boolean };
     
    // 得到: { name: string; visible: boolean; }
    type Props = Omit<Props, 'age'>;

1.  `OmitByValue<T, ValueType>`返回从T中移出键值为K后的键值对（匹配键值包括K的键值对）
2.  `OmitByValueExact<T, ValueType>`返回从T中移出键值为K后的键值对（匹配键值===K的键值对）

//OmitByValue与OmitByValueExact的区别
    import { OmitByValue } from 'utility-types';
     
    type Props = { req: number; reqUndef: number | undefined; opt?: string; };
     
    type Props = OmitByValue<Props, number>;  // 得{ reqUndef: number | undefined; opt?: string; }
    type Props = OmitByValueExact<Props, number>;  // 得{ reqUndef: number | undefined; opt?: string; }
    type Props = OmitByValue<Props, number | undefined>;  // 得{ opt?: string; }
    type Props = OmitByValueExact<Props, number | undefined>;  //得{ req: number; opt?: string }

1.  `Intersection<T, U>`在T中查找与U相同的键值对返回

import { Intersection } from 'utility-types';
     
    type Props = { name: string; age: number; visible: boolean };
    type DefaultProps = { age: number };
     
    // 得到: { age: number; }
    type DuplicatedProps = Intersection<Props, DefaultProps>;

1.  `Diff<T, U>` 在T中查找与U不同的键值对返回（同Intersection相反）
2.  `Subtract<T, U>` 删除T中所有与U相同得键值对

import { Intersection } from 'utility-types';
     
    type Props = { name: string; age: number; visible: boolean };
    type DefaultProps = { age: number };
     
    // 得到: { name: string;  visible: boolean };
    type DuplicatedProps = Subtract<Props, DefaultProps>;

1.  `Overwrite<T, U>` //根据U中键值对对T中键值对进行改写（不包括新增）

import { Overwrite } from 'utility-types';
     
    type Props = { name: string; age: number; visible: boolean };
    type NewProps = { age: string; other: string };
     
    // 得: { name: string; age: string; visible: boolean; }
    type ReplacedProps = Overwrite<Props, NewProps>;

1.  `Assign<T, U>` 将U有T无的属性添加到T

import { Assign } from 'utility-types';
     
    type Props = { name: string; age: number; visible: boolean };
    type NewProps = { age: string; other: string };
     
    // Expect: { name: string; age: number; visible: boolean; other: string; }
    type ExtendedProps = Assign<Props, NewProps>;

1.  `ValuesType<T>`返回对象中所有键值的并集
2.  `Partial<T>`将T中属性转换为可选属性。返回的类型可以是T的任意子集。
3.  `Required<T, K>`通过将T的属性设置为必选属性来构造一个新的类型（同Partial相反）

import { Required } from 'utility-types';
     
    type Props = { name?: string; age?: number; visible?: boolean; };
     
    // 得到: { name: string; age: number; visible: boolean; }
    type Props = Required<Props>
    
    // 可选择具体键值对，得到: { name?: string; age: number; visible: boolean; }
    type Props = Required<Props, 'age' | 'visible'>;

1.  `Readonly<T>`将所有键值对变为只可读
2.  `Mutable<T>`将所有键值对变为非可读（与Readonly相反）
3.  `Unionize<T>`将整个对象中所有键值对拆分为一个个独立对象的并集

import { Unionize } from 'utility-types';
     
    type Props = { name: string; age: number; visible: boolean };
     
    // 得到: { name: string; } | { age: number; } | { visible: boolean; }
    type UnionizedType = Unionize<Props>;

1.  `PromiseType<T>`取得Promise修饰类型的键值

import { PromiseType } from 'utility-types';
     
    // 得到: string
    type Response = PromiseType<Promise<string>>;

1.  `DeepReadonly<T>`层层变为可读

import { DeepReadonly } from 'utility-types';
     
    type NestedProps = {
      first: {
        second: {
          name: string;
        };
      };
    };
     
     type ReadonlyNestedProps = DeepReadonly<NestedProps>;
    // 得到: {
    //   readonly first: {
    //     readonly second: {
    //       readonly name: string;
    //     };
    //   };
    // }

1.  `DeepRequired<T>`层层取消可读属性（与DeepReadonly 相反）
2.  `DeepNonNullable<T>`层层取消可选属性

import { DeepNonNullable } from 'utility-types';
     
    type NestedProps = {
      first?: null | {
        second?: null | {
          name?: string | null | undefined;
        };
      };
    };
     
    // 得到: {
    //   first: {
    //     second: {
    //       name: string;
    //     };
    //   };
    // }
    type RequiredNestedProps = DeepNonNullable<NestedProps>;

1.  `DeepPartial<T>`层层变为可选属性
2.  `UnionToIntersection<U>`将且变为或

import { UnionToIntersection } from 'utility-types';
     
    // 得到: { name: string } & { age: number } & { visible: boolean }
    UnionToIntersection<{ name: string } | { age: number } | { visible: boolean }>

> (摘自：https://www.npmjs.com/package/utility-types)