• typescript高级特性


    1、Partial<T> 可以快速把某个接口类型中定义的属性变成可选的(Optional)
    实现:
    type Partial<T> = { [P in keyof T]?: T[P] | undefined }

    ?: 表示可选

     1 interface Todo {
     2     title: string
     3     description: string
     4 }
     5 
     6 /**keyof 将一个类型的属性名全部提取出来当做联合类型
     7 索引类型查询操作符
     8 */
     9 
    10 type PartialNew<T> = {[P in keyof T]?: T[P] | undefined}
    11 
    12 function updateTodo(todo: PartialNew<Todo>, fieldsToUpdate:Todo){
    13     return {...todo,...fieldsToUpdate};
    14 }
    15 
    16 const todo1 = {
    17     title: "你好"
    18 }
    19 
    20 const todo2 = updateTodo(todo1, {
    21     title: "你好2",
    22     description: "你好描述",
    23 });

    2、Required<T>: 把所有可循啊属性变成必选属性 和Partial正好相反

    实现

    type Required<T> = {[P in keyof T]-?: T[P]}

    -? 字面意思表示去掉

    interface Props {
        a?: string;
        b?: number;
    }
    const obj: Props = { a:'5'}
    type RequiredNew<T> = {[P in keyof T]-?: T[P] }
    const obj2:RequiredNew<Props> = {
        a:'5',
        b:2
    };

    3、Readonly<T> 将属性变成只读的

    type ReadOnly<T> = {

    readonly [P in keyof  T]: T[P];
    }

    interface Todo{
        title: string
    }
    
    type ReadonlyNew<T> = {
        readonly [P in keyof T]: T[P];
    }
    
    const todo:ReadonlyNew<Todo> ={
        title: "2222"
    }
    
    todo.title = "333" //报错

    4、Record<Keys, Type>

    构造一个对象类型,其属性为keys值为Type

    type Record<K extends string | number | symbol, T> = {[P in K]: T;}

    interface CatInfo {
        age: number;
        breed: string;
    }
    
    type CatName = "miffy" | "boris" | "mordred";
    
    type RecordNew<K extends string | number | symbol, T> = {[P in K]: T;}
    
    const cats: RecordNew<CatName, CatInfo> = {
        miffy: { age: 10, breed: "Persian" },
        boris: { age: 5, breed: "Maine Coon" },
        mordred: { age: 16, breed: "British Shorthair" },
    };
    
    cats.boris;

    5、 Pick<Type,keys>

    通过从中选取一组属性keys类构造类型Type

    type Pick<T, K extends keyof  T> = {[P in K]: T[P]}

    //从一个复合类型中,取出几个想要的类型组合
    interface Todo{
        title: string;
        description: string;
        completed: boolean;
    }    
    
    type PickNew<T, K extends keyof T> = {[P in K]: T[P]}
    
    type TodoPreview = PickNew<Todo, "title" | "completed">;
    
    const todo: TodoPreview = {
        title: "Clean room",
        completed: false
    }
    
    todo;

    6、Exclude<Type, ExcludedUnion>

    通过从Type可分配给的所有联合成员中排除来构造一个ExcludedUnion
    type ExcludeNew<T, U> = T extends U ? never : T

    type ExcludeNew<T, U> = T extends U ? never : T
    //"a" | "b" | "c" 表示联合类型
    type T0 = ExcludeNew<"a" | "b" | "c", "a">;

    7、Extract<Type, Union>

    通过从Type可分配的所有联合成员中提取来构造一个类型Union

    type T0 = Extract<T, U> = T extends U ? T : never

    type ExtractNew<T, U> = T extends U ? T : never;
    type T0 = ExtractNew<"a" | "b" | "c", "a" | "f">;

    8、Omit<Type, keys>

    通过从中选取所有属性Type然后删除Keys来构造类型

    type Omit<T, K extends string | number | symbol > = {

      [P in Exclude<keyof T, K>]: T[P]

    }

    // Omit<Type, Keys>
    // 通过从中选取所有属性Type然后删除keys来构造类型
    interface Todo {
        title: string;
        description: string;
        completed: boolean;
        createdAt: number;
    }
    
    type OmitNew<T, K extends string | number | symbol> ={
        [P in Exclude<keyof T, K>]: T[P]
    }
    
    type TodoPreview = OmitNew<Todo, "description">;
    
    const todo: TodoPreview ={
      title: "Clean room",
      completed: false,
      createdAt: 1615544252770,
    }

    9、 NoNullable<Type>

    通过排除null和undefined来构造一个类型

    type NonNullable<T> = T extends null | undefined ? never : T

    type NonNullableNew<T> = T extends null | undefined ? never : T
        
    type To= NonNullableNew<string | number | undefined>

    infer表示在extends条件语句中待推断的类型变量

    type ParamType<T> = T extends  (param: infer P) => any ? P : T

    表示待推断的函数参数

    以上都是常用的,还想了解更多参考下面地址

    参考地址 typescript官网

    https://www.typescriptlang.org/docs/handbook/utility-types.html#partialtype

    日常所遇,随手而记。
  • 相关阅读:
    webpack入门
    vue 知识记录
    vue 服务端渲染案例
    nodemon的简单配置和使用
    vue 非父子组件通信-中转站
    position笔记
    koa 练习
    笔记
    git push代码时的'git did not exit cleanly (exit code 1)'问题解决
    块级元素的text-align对行内元素和果冻元素(inline-block)的作用
  • 原文地址:https://www.cnblogs.com/zhihou/p/15343251.html
Copyright © 2020-2023  润新知