[TypeScript] Function Overloads in Typescript

Posted 2020-07-26 Answer1215

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‘