Typescript 实现函数重载的方式

鴉

函数重载

JavaScript并没有提供函数重载
TypeScript提供的函数重载，仅仅用作提示效果，实现还需手动

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

复制代码

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

code


创建函数重载函数

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

1. export function createOverload () {
   
2. 
   
3.     const map: Map<string, Function> = new Map();
   
4. 
   
5.     const overload = ( ...args: any[] ) => {
   
6. 
   
7.         const key = args.map( it => typeof it ).join( " " );
   
8. 
   
9.         const fn = map.get( key );
   
10. 
    
11.         if ( !fn ) throw new Error( "No overload function matched" );
    
12. 
    
13.         return fn( args );
    
14.     };
    
15. 
    
16.     overload.addImpl = function ( args: Array<"number" | "string" | "boolean" | "function" | "object" | "symbol" | "undefined" | "bigint">, fn: Function ) {
    
17. 
    
18.         if ( typeof fn !== "function" ) throw new Error( "last argument must be a function" );
    
19. 
    
20.         const key = args.join( " " );
    
21. 
    
22.         map.set( key, fn );
    
23. 
    
24.     };
    
25. 
    
26.     return overload;
    
27. 
    
28. }

复制代码

使用

1.     const overload = createOverload()
   
2.    
   
3.     overload.addImpl(["string","number"],()=>{
   
4.         console.log("string number")
   
5.     })
   
6.     overload.addImpl(["number","string"],()=>{
   
7.         console.log("number string")
   
8.     })
   
9.    
   
10.     overload("yang jun",18) // console.log("string number")
    
11.     overload(18,"yang jun") // console.log("number string")

复制代码

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

创建抽象类。
在JS中创建抽象类方法，在construct中执行

1. if( new.target === Overload ) throw new Error("不允许直接new")

复制代码

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

1. export abstract class Overload {
   
2. 
   
3.     private overloads = new Map<string, Function>();
   
4. 
   
5.     protected addImpl ( name: string, args: Array<"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function">, fn: Function ) {
   
6. 
   
7.         let overload = null;
   
8. 
   
9.         if ( this.overloads.has( name ) ) {
   
10. 
    
11.             overload = this.overloads.get( name );
    
12. 
    
13.         } else {
    
14. 
    
15.             overload = createOverload();
    
16. 
    
17.             this.overloads.set( name, overload );
    
18. 
    
19.         }
    
20. 
    
21.         overload.addImpl( args, fn );
    
22.     };
    
23. 
    
24.     protected getOverload ( name: string ): Function | undefined {
    
25. 
    
26.         if ( this.overloads.has( name ) ) return this.overloads.get( name );
    
27. 
    
28.         throw new Error( "No overload matched" );
    
29. 
    
30.     }
    
31. 
    
32. }

复制代码

使用

非常舒服，再也不用自己在函数中写一串的 if 了

1. import { Overload } from "./utils";
   
2. 
   
3. class Test extends Overload {
   
4. 
   
5.     constructor () {
   
6. 
   
7.         super();
   
8. 
   
9.         this.addImpl( "getInfo", [ "boolean", "number", "string" ], () => {
   
10.             console.log( "boolean", "number", "string" );
    
11.         } );
    
12.         this.addImpl( "getInfo", [ "number", "string", "boolean" ], () => {
    
13.             console.log( "number", "string", "boolean" );
    
14.         } );
    
15.         this.addImpl( "getInfo", [ "string", "number", "boolean" ], () => {
    
16.             console.log( "string", "number", "boolean" );
    
17.         } );
    
18. 
    
19.     }
    
20. 
    
21.     getInfo ( age: number, name: string, isHandsome: boolean ): Object;
    
22.     getInfo ( isHandsome: boolean, age: number, name: string ): Object;
    
23.     getInfo ( name: string, age: number, isHandsome: boolean ): Object;
    
24. 
    
25.     getInfo (): Object {
    
26.         const overload = this.getOverload( "getInfo" );
    
27.         return overload( ...arguments );
    
28.     }
    
29. 
    
30.     getName ( name: string ) {
    
31. 
    
32.     }
    
33. 
    
34. }
    
35. 
    
36. const test = new Test();
    
37. 
    
38. test.getInfo( 18, "yang jun", true );  //    console.log( "number", "string", "boolean" );
    
39. 
    
40. test.getInfo( "yang jun", 18, true );  //  console.log( "string", "number", "boolean" );
    
41. 
    
42. test.getInfo( true, 18, "yang jun" ); //   console.log( "boolean", "number", "string" );

复制代码

以上就是Typescript 实现函数重载的方式的详细内容，更多关于Typescript函数重载的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/320916fc2.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！