simple example of how to define functions overloads on typescript

_functions-overloads.md

The goal: Make the code editor get the expected types definitions while I'm coding

---

• More on Functions | TypeScript Handbook

  • writing good overloads

• TypeScript — Generics and overloads | Charly Poly - 2018/05/19

function-overloads-sample_01.ts

enum ETemplate {
    HELLO_WORLD = 'hellow_world',
    CONTRACT = 'contract',
    REPORT = 'report',
    EMAIL = 'email'
}

type TTemplates = `${ETemplate}`;

interface ITemplateBase<T = TTemplates> {
    templateId: T;
}

interface IHelloWorldTemplate extends ITemplateBase<ETemplate.HELLO_WORLD> {
    greetings: string;
}

interface IContractTemplate extends ITemplateBase<ETemplate.CONTRACT> {
    contractNumber: number;
}

interface IReportTemplate extends ITemplateBase<ETemplate.REPORT> {
    value: number;
}

interface IEmailTemplate extends ITemplateBase<ETemplate.EMAIL> {
    email: string;
}

//------------------------------------------------------------------------------------------------//

function renderTemplate(template: IHelloWorldTemplate): void;
function renderTemplate(template: IContractTemplate): void;
function renderTemplate(template: IReportTemplate): void;
function renderTemplate(template: IEmailTemplate): void;
function renderTemplate(template: any) {
    console.log('do the job', { template });
}

renderTemplate({ templateId: ETemplate.HELLO_WORLD, greetings: "greetings to the eathlings" });
renderTemplate({ templateId: ETemplate.CONTRACT, contractNumber: 123 });
renderTemplate({ templateId: ETemplate.REPORT, value: 1000 });
renderTemplate({ templateId: ETemplate.EMAIL, email: '[email protected]' });

function-overloads-sample_02.ts

enum ETemplate {
    HELLO_WORLD = 'hellow_world',
    CONTRACT = 'contract',
    REPORT = 'report',
    EMAIL = 'email'
}

type TTemplates = `${ETemplate}`;

interface ITemplate<T = TTemplates, D = unknown> {
    templateId: T;
    data: D;
}

interface IHelloWorld {
    greetings: string;
}

interface IContract {
    contractNumber: number;
}

interface IReport {
    value: number;
}

interface IEmail { 
    email: string;
}

//------------------------------------------------------------------------------------------------//

function renderTemplate(template: ITemplate<ETemplate.HELLO_WORLD, IHelloWorld>): void;
function renderTemplate(template: ITemplate<ETemplate.CONTRACT, IContract>): void;
function renderTemplate(template: ITemplate<ETemplate.REPORT, IReport>): void;
function renderTemplate(template: ITemplate<ETemplate.EMAIL, IEmail>): void;
function renderTemplate(template: any) {
    console.log('do the job', { template });
}

renderTemplate({ templateId: ETemplate.HELLO_WORLD, data: { greetings: "greetings to the eathlings" } });
renderTemplate({ templateId: ETemplate.CONTRACT, data: { contractNumber: 123 } });
renderTemplate({ templateId: ETemplate.REPORT, data: { value: 1000 } });
renderTemplate({ templateId: ETemplate.EMAIL, data: { email: '[email protected]' } });