Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use Tuple Union declaration function overload in TypeScript". In daily operation, I believe that many people have doubts about how to use Tuple Union declaration function overload in TypeScript. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to use Tuple Union declaration function overload in TypeScript". Next, please follow the editor to study!

Question:

After adding multiple signatures to the function in TypeScript, you still need to add the corresponding code to determine and obtain the corresponding parameters from different signature parameter lists. The common ways to write it in the past:

Function refEventEmitter (event?: string): void;function refEventEmitter (event: string, callback: () = > void): void;function refEventEmitter (callback: () = > void): void;function refEventEmitter (eventOrCallback?: string | () = > void), callback?: () = > void,): void {let event: string | undefined; if (typeof eventOrCallback = 'function') {callback = eventOrCallback;} else {event = eventOrCallback;} / /.}

This process is because the original parameter list is flattened directly according to the sequence number, and the type correlation between the parameters requires human flesh to ensure that they are correct.

Tips:

At this point, we can deal with various function overloading situations without thinking by using the parameter types of tuple union:

Function refEventEmitter (event?: string): void;function refEventEmitter (event: string, callback: () = > void): void;function refEventEmitter (callback: () = > void): void;function refEventEmitter (. Args: | [event?: string] | [event: string, callback: () = > unknown,] | [callback: () = > unknown]): void {let [event, callback] = args.length = 2? Args: typeof args [0] = = 'function'? [undefined, args [0]]: [args [0], undefined]; / /...}

In fact, the signature list at the top is no longer needed:

Function refEventEmitter (. Args: | [event?: string] | [event: string, callback: () = > unknown,] | [callback: () = > unknown]): void {let [event, callback] = args.length = 2? Args: typeof args [0] = = 'function'? [undefined, args [0]]: [args [0], undefined]; / /.} this article actually dragged on for a long time. When I wrote it, I found that TypeScript already had a built-in refactoring option of "Convert overload list to single signature". You can change the overloaded list into a parameter tuple union with one click.

However, there is still a problem here. The typeof condition judgment in TypeScript cannot narrow the whole object, but can only narrow a certain element or attribute that is typeof. In the above example, there is a problem if you need more than args [0].

At this point, we can introduce a utility function isTypeOfProperty (object, key, type):

At this point the implementation becomes:

Function refEventEmitter (. Args: | [event?: string] | [event: string, callback: () = > unknown,] | [callback: () = > unknown]): void {let [event, callback] = args.length = 2? Args: isTypeOfProperty (args, 0, 'function')? [undefined, args [0]]: [args [0], undefined]; / /...} at this point, the study on "how to declare function overloading with Tuple Union in TypeScript" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.