Typescript 实现函数重载的方式

 更新时间:2024年05月11日 08:42:52   作者:你也向往长安城吗  
函数重载简单点说就是,同一个函数的不同实现方式,根据传入的参数的类型或者长度,决定最终调用哪一个实现,本文给大家介绍了Typescript 实现函数重载的方式,需要的朋友可以参考下

函数重载

JavaScript并没有提供函数重载

TypeScript提供的函数重载,仅仅用作提示效果,实现还需手动

函数重载简单点说就是,同一个函数的不同实现方式,根据传入的参数的类型或者长度,决定最终调用哪一个实现

最终效果,TypeScript的类型校验也会变化

code

创建函数重载函数

根据参数的类型,调用不同的实现,如果没有对应的实现,则报错。

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")

封装一层,因为上述使用没有代码提示,离了代码提示活不下去了

创建抽象类。

在JS中创建抽象类方法,在construct中执行 if( new.target === Overload ) throw new Error("不允许直接new")

在下述实现中,转为 es6 类实现,新增了重载函数的映射表,用于继承类的多个函数的重载。

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" );

    }

}

使用

非常舒服,再也不用自己在函数中写一串的 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 实现函数重载的方式的详细内容,更多关于Typescript函数重载的资料请关注脚本之家其它相关文章!

相关文章

  • Raphael带文本标签可拖动的图形实现代码

    Raphael带文本标签可拖动的图形实现代码

    Javascript和Raphael顺便学习了一下,主要是为了实现一个可拖动的矩形同时矩形上还得显示标签,网上关于这方面的知识提的很是于是本人自不量力写了一下,感兴趣的你可不要错过了哈,希望可以帮助到你
    2013-02-02
  • 一些常见的TypeScript面试题汇总

    一些常见的TypeScript面试题汇总

    TS是强类型的JS超集,支持ES6语法,支持面向对象编程的概念,如类、接口、继承、泛型等,下面这篇文章主要给大家介绍了关于一些常见的TypeScript面试题的相关资料,需要的朋友可以参考下
    2024-09-09
  • 使用JS获取当前地理位置的2种方法举例

    使用JS获取当前地理位置的2种方法举例

    这篇文章主要给大家介绍了关于使用JS获取当前地理位置的2种方法,获取当前位置在实际场景中非常有用,比如定位用户的位置,为其推荐周边的商家和服务等,需要的朋友可以参考下
    2023-11-11
  • 关于Error:Unknown option '--inline'报错的解决办法

    关于Error:Unknown option '--inline'报错的解决办法

    这篇文章主要给大家介绍了关于Error:Unknown option '--inline'报错的解决办法,文中将解决的办法介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • JavaScript简单实现合并两个Json对象的方法示例

    JavaScript简单实现合并两个Json对象的方法示例

    这篇文章主要介绍了JavaScript简单实现合并两个Json对象的方法,结合实例形式分析了json对象的遍历、添加实现合并的相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • JavaScript定时器原理详解

    JavaScript定时器原理详解

    这篇文章主要介绍了JavaScript定时器原理,setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数,文章围绕JavaScript定时器相关资料展开以下内容,需要的朋友可以参考一下
    2021-12-12
  • javascrip关于继承的小例子

    javascrip关于继承的小例子

    javascrip关于继承的小例子,需要的朋友可以参考一下
    2013-05-05
  • JS IE和FF兼容性问题汇总

    JS IE和FF兼容性问题汇总

    以下以 IE 代替 Internet Explorer,以 MF 代替 Mozzila FF,对于js爱好者必看的一些知识总结。
    2009-02-02
  • 深入理解JS的事件绑定、事件流模型

    深入理解JS的事件绑定、事件流模型

    这篇文章主要介绍了JS的事件绑定、事件流模型的相关知识,非常不错,具有参考借鉴价值,感兴趣的朋友跟随脚本之家小编一起看看吧
    2018-05-05
  • JS查找字符串中出现次数最多的字符

    JS查找字符串中出现次数最多的字符

    本文给大家带来两种js中查找字符串中出现次数最多的字符,在这两种方法中小编推荐使用第二种,对js查找字符串出现次数的相关知识感兴趣的朋友一起看看吧
    2016-09-09

最新评论