[TypeScript] Function Overloads in Typescript
typescript in Function
2023-09-14 08:59:19 时间
It's common in Javascript for functions to accept different argument types and to also return different types. In this lesson we learn how to 'teach' Typescript about these dynamic functions so that we can still benefit from the powerful static type analysis.
const getTasks = (taskname: string, x: any) : any => { if(typeof x === 'function'){ return {taskname, fn: x}; } if(Array.isArray(x)){ return {taskname, deps: x}; } }; const task1 = getTasks('taskname1', ['dep1', 'dep2']); const task2 = getTasks('taskname2', function(){}); task1.fn(); // Runtime Error, fn not exists on task1 task2.deps; // Runtime Error, deps not exists on task2
In the code above, the IDE cannot help much during the compile time.
But if we use Function overloads, then IDE can help to check error:
interface GroupTask { taskname:string deps:string[] } interface Task { taskname:string fn:Function } function getTasks(taskname:string, x:string[]):GroupTask function getTasks(taskname:string, x:Function):Task function getTasks(taskname:string, x:any):any { if (typeof x === 'function') { return {taskname, fn: x}; } if (Array.isArray(x)) { return {taskname, deps: x}; } } const task1 = getTasks('taskname1', ['dep1', 'dep2']); const task2 = getTasks('taskname2', function () { }); task1.fn // Property 'fn' doesn't not exist on type 'GrouptTask' task2.deps // Property 'deps' doesn't not exist on type 'Task'
相关文章
- [Typescript] Generics in Function Overloads
- [Typescript] Use Generics in a Reduce Function
- [Typescript] Use the Nullish Coalescing Operator in TypeScript (isNil)
- [Typescript] Extend Functionality of a TypeScript Class with Decorators
- [TypeScript] Use the JavaScript “in” operator for automatic type inference in TypeScript
- [Typescript] Make TypeScript Class Usage Safer with Strict Property Initialization
- [TypeScript] Define Custom Type Guard Functions in TypeScript
- [Typescript Kaop-ts] Use AOP in Vue Components with TypeScript and Kaop-ts
- [Vue + TS] Use Properties in Vue Components Using @Prop Decorator with TypeScript
- [TypeScript] Distinguishing between types of Strings in TypeScript
- [Typescript] Write clean Type 1 - Generic slots, using built-in types as much as possible
- [Typescript] Generics in a Class Names Creator
- [Typescript] Use Generics in a Reduce Function
- [Typescript] Using Generic Context to Avoid Distributivity in Conditional Types
- [Typescript] 43. Medium - Percentage Parser
- [Typescript] Making TypeScript Stick - 3
- [React Typescript 2022] Use TypeScript to Type a React Class Component
- [React Typescript 2022] Refactor a React Component using TypeScript
- [Typescript] Use the Nullish Coalescing Operator in TypeScript (isNil)
- [TypeScript] Dynamically Allocate Function Types with Conditional Types in TypeScript
- [VueJS + Typescript] Decouple Dependencies Using IoC Containers in Vue with TypeScript and InversifyJS
- [Typescript] Sorting arrays in TypeScript
- [TypeScript] Using Assertion to Convert Types in TypeScript
- 如何全局安装和卸载typescript?typescript常用命令