zoukankan      html  css  js  c++  java
  • [TypeScript] Dynamically Allocate Function Types with Conditional Types in TypeScript

    Conditional types take generics one step further and allow you to test for a specific condition, based on which the final type will be determined. We will look at how they work on a basic level and then leverage their power to allocate function types dynamically based on the type of their parameters, all without any overloads.

    For example, the following code, the 'contianer' type is 'any'

    interface StringContainer { 
        value: string;
        format(): string;
        split(): string[]
    }
    
    interface NumberContainer { 
        value: number;
        neatestPrime: number;
        round(): number;
    }
    
    type Item<T> = {
        id: T,
        container: StringContainer | NumberContainer
    }
    
    let item: Item<string> = {
        id: 'ad',
        container: null
    }
    
    item.container.value;
    item.container.split(); // Compiler error

    Conditional Type can help with this:

    type Item<T> = {
        id: T,
        container: T extends string ? StringContainer : NumberContainer
    }

    We can build 'ArrayFilter' type to only get Array based type:

    type ArrayFilter<T> = T extends any[] ? T : never;
    type StringsOrNumbers = ArrayFilter<string | number | string[] | number[]>

    It filters out 'string, number' type becasue they are not match 'any[]' Array type. And 'never' type is ignored.

    Conditional type can replace function overloads:

    interface Book { 
        id: string;
        tableOfContent: string[];
    }
    
    interface Tv { 
        id: number;
        diagonal: number;
    }
    
    interface IItemService { 
        getItem(id: string): Book;
        getItem(id: number): Tv;
        getItem<T>(id: T): Book | Tv;
    }
    
    let itemService: IItemService;

    We can replace the hightlighted function overloads with contidional types:

    interface IItemService { 
        getItem<T>(id: T): T extends string ? Book: Tv;
    }
  • 相关阅读:
    vue-cli + webpack 多页面实例配置优化方法
    Python Web(1):建立第一个Web项目
    C# winform用sharpGL(OpenGl)解析读取3D模型obj
    CSS outline 属性
    sqlserver查询两个值是否相等
    vue v-for(数组遍历)
    内存查看工具RAMMAP说明
    linux 入门
    linux 内核根文件系统
    linux 命令
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10306055.html
Copyright © 2011-2022 走看看