Surcharge de fonctions en TypeScript

Il arrive parfois de rencontrer des fonctions qui retournent des valeurs dont le type dépend des paramètres passés. Pour cela, en TypeScript, on utilise la surcharge de fonctions. Elle permet d'indiquer différentes variantes de signatures pour une fonction.

Regardons un exemple. Supposons que nous ayons une fonction qui divise les caractères d'une chaîne de caractères en un tableau de lettres :

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

Supposons également que nous ayons une fonction qui divise les chiffres d'un nombre en un tableau de digits :

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

Combinons maintenant les deux fonctions en une seule. La nouvelle fonction, selon le type du paramètre, doit retourner soit un tableau de nombres, soit un tableau de chaînes de caractères.

Utilisons la surcharge pour déclarer les différentes signatures de notre fonction :

function splitVal(val: number): number[];
function splitVal(val: string): string[] {
	// implémentation des deux signatures
}

Écrivons maintenant l'implémentation de la fonction. Dans son code, nous devons déterminer par une condition quelle signature de fonction a été utilisée, et en fonction de cela, exécuter le code approprié avec un résultat du type attendu :

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);
	}
}

Contrairement à d'autres langages, en TypeScript, la surcharge crée une seule fonction. Il n'est pas possible de créer plusieurs fonctions avec un même nom, mais avec des signatures différentes.

Écrivez une fonction qui va retourner ou modifier le texte d'un élément DOM. Elle doit fonctionner de la manière suivante :

text('#elem', 'text'); // définira le texte
text('#elem');         // retournera le texte actuel