Functie-overloading in TypeScript

Soms komen we functies tegen die waarden teruggeven waarvan het type afhangt van de doorgegeven parameters. Hiervoor gebruikt TypeScript functie-overloading . Het maakt het mogelijk om verschillende varianten van functie-signaturen op te geven.

Laten we een voorbeeld bekijken. Stel we hebben een functie die de karakters van een string splitst in een array van letters:

function splitStr(str: string): string[] {
	return str.split('');
}

Stel we hebben ook een functie die de cijfers van een getal splitst in een array van digits:

function splitNum(num: number): number[] {
	let str: string = String(num);
	let arr: string[] = str.split('');
	
	return arr.map(elem => +elem);
}

Laten we beide functies in één functie samenvoegen. De nieuwe functie moet, afhankelijk van het type parameter, of een array met getallen of een array met strings teruggeven.

Laten we overloading gebruiken om verschillende signaturen voor onze functie te declareren:

function splitVal(val: number): number[];
function splitVal(val: string): string[] {
	// implementatie van beide signaturen
}

Laten we nu de implementatie van de functie schrijven. In de code moeten we met een voorwaarde bepalen welke van de functie-signaturen is geactiveerd, en afhankelijk daarvan de juiste code uitvoeren met een resultaat van het juiste type:

function splitVal(val: number): number[];
function splitVal(val: string): string[] {
	if (typeof val === 'string') {
		return val.split('');
	} else {
		let str: string = String(val);
		let arr: string[] = str.split('');
		
		return arr.map((elem: string): number => +elem);
	}
}

In tegenstelling tot andere talen, wordt in TypeScript bij overloading één functie gemaakt. Het is niet mogelijk om meerdere functies met dezelfde naam te maken, maar met verschillende signaturen.

Schrijf een functie die de tekst van een DOM-element teruggeeft of wijzigt. Ze moet als volgt werken:

text('#elem', 'text'); // stelt de tekst in
text('#elem');         // geeft de huidige tekst terug