Typescript 實(shí)現(xiàn)函數(shù)重載的方式

更新時間：2024年05月11日 08:42:52 作者：你也向往長安城嗎

函數(shù)重載簡單點(diǎn)說就是,同一個函數(shù)的不同實(shí)現(xiàn)方式,根據(jù)傳入的參數(shù)的類型或者長度,決定最終調(diào)用哪一個實(shí)現(xiàn),本文給大家介紹了Typescript 實(shí)現(xiàn)函數(shù)重載的方式,需要的朋友可以參考下

函數(shù)重載

JavaScript并沒有提供函數(shù)重載

TypeScript提供的函數(shù)重載，僅僅用作提示效果，實(shí)現(xiàn)還需手動

函數(shù)重載簡單點(diǎn)說就是，同一個函數(shù)的不同實(shí)現(xiàn)方式，根據(jù)傳入的參數(shù)的類型或者長度，決定最終調(diào)用哪一個實(shí)現(xiàn)

最終效果,TypeScript的類型校驗(yàn)也會變化

code

創(chuàng)建函數(shù)重載函數(shù)

根據(jù)參數(shù)的類型，調(diào)用不同的實(shí)現(xiàn)，如果沒有對應(yīng)的實(shí)現(xiàn)，則報(bào)錯。

export function createOverload () {

    const map: Map<string, Function> = new Map();

    const overload = ( ...args: any[] ) => {

        const key = args.map( it => typeof it ).join( " " );

        const fn = map.get( key );

        if ( !fn ) throw new Error( "No overload function matched" );

        return fn( args );
    };

    overload.addImpl = function ( args: Array<"number" | "string" | "boolean" | "function" | "object" | "symbol" | "undefined" | "bigint">, fn: Function ) {

        if ( typeof fn !== "function" ) throw new Error( "last argument must be a function" );

        const key = args.join( " " );

        map.set( key, fn );

    };

    return overload;

}

使用

    const overload = createOverload()
    
    overload.addImpl(["string","number"],()=>{
        console.log("string number")
    })
    overload.addImpl(["number","string"],()=>{
        console.log("number string")
    })
    
    overload("yang jun",18) // console.log("string number")
    overload(18,"yang jun") // console.log("number string")

封裝一層，因?yàn)樯鲜鍪褂脹]有代碼提示，離了代碼提示活不下去了

創(chuàng)建抽象類。

在JS中創(chuàng)建抽象類方法，在construct中執(zhí)行 if( new.target === Overload ) throw new Error("不允許直接new")

在下述實(shí)現(xiàn)中，轉(zhuǎn)為 es6 類實(shí)現(xiàn)，新增了重載函數(shù)的映射表，用于繼承類的多個函數(shù)的重載。

export abstract class Overload {

    private overloads = new Map<string, Function>();

    protected addImpl ( name: string, args: Array<"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function">, fn: Function ) {

        let overload = null;

        if ( this.overloads.has( name ) ) {

            overload = this.overloads.get( name );

        } else {

            overload = createOverload();

            this.overloads.set( name, overload );

        }

        overload.addImpl( args, fn );
    };

    protected getOverload ( name: string ): Function | undefined {

        if ( this.overloads.has( name ) ) return this.overloads.get( name );

        throw new Error( "No overload matched" );

    }

}

使用

非常舒服，再也不用自己在函數(shù)中寫一串的 if 了

import { Overload } from "./utils";

class Test extends Overload {

    constructor () {

        super();

        this.addImpl( "getInfo", [ "boolean", "number", "string" ], () => {
            console.log( "boolean", "number", "string" );
        } );
        this.addImpl( "getInfo", [ "number", "string", "boolean" ], () => {
            console.log( "number", "string", "boolean" );
        } );
        this.addImpl( "getInfo", [ "string", "number", "boolean" ], () => {
            console.log( "string", "number", "boolean" );
        } );

    }

    getInfo ( age: number, name: string, isHandsome: boolean ): Object;
    getInfo ( isHandsome: boolean, age: number, name: string ): Object;
    getInfo ( name: string, age: number, isHandsome: boolean ): Object;

    getInfo (): Object {
        const overload = this.getOverload( "getInfo" );
        return overload( ...arguments );
    }

    getName ( name: string ) {

    }

}

const test = new Test();

test.getInfo( 18, "yang jun", true );  //    console.log( "number", "string", "boolean" );

test.getInfo( "yang jun", 18, true );  //  console.log( "string", "number", "boolean" );

test.getInfo( true, 18, "yang jun" ); //   console.log( "boolean", "number", "string" );

以上就是Typescript 實(shí)現(xiàn)函數(shù)重載的方式的詳細(xì)內(nèi)容，更多關(guān)于Typescript函數(shù)重載的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: