Annotation de fonctions dans Typescript

La manière la plus basique d'annoter une fonction en dactylographié est la suivante

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}

les paramètres facultatifs sont annotés avec des points d'interrogation param ? comme ça

function optional(a: number, b?: number){
    console.log(a)
}

Mais qu'en est-il des fonctions de rappel, ou des fonctions où le type des arguments et les types de retour sont liés (dans ce cas, générique).

---

Valeurs de fonction

Observez cette fonction JavaScript

function multiplier(factor){
    return value => factor * value
}

pour que nous puissions utiliser la fonction comme ceci ;

const n  = multiplier(6)
n(8) // 48

Les valeurs des fonctions sont annotées en dactylographie comme ceci

(param1: type, param2: type)=> type

// or

const add: (a: number, b: number)=> number = function (a, b){
    return a + b
}

Donc pour annoter la fonction multiplicateur, on a

function multiplier(factor: number): (value: number) => number{
    return value => factor * value
}

Votre IDE (de préférence) VSCode, déduira automatiquement le type de valeur (être un nombre) dans la logique de la fonction

---

Fonctions génériques

Cette annotation de fonction est fausse

function pickFirst(array: Array<T>): T{
    return array[0]
}

Naturellement, cela génère une erreur qui
Impossible de trouver le nom T

par conséquent, le format d'annotation des fonctions génériques est

function fnName <T,U>(param: T): U{
    //logic
}

Observez où les noms génériques ont été déclarés. donc, pour annoter correctement la fonction ci-dessus ;

function pickFirst<T>(array: Array<T>): T{
    return array[0]
}

Maintenant, ça marche.

Mais qu'en est-il des fonctions génériques qui ont des paramètres de fonction.

Par exemple, nous souhaitons annoter une fonction de carte personnalisée nommée myMap qui a été écrite comme ceci en Javascript

function myMap(arr, fn){
    rreturn arr.map(fn)
}

On peut l'annoter comme ça

function myMap<Input, Output>(arr: Input[], fn: (item: Input, index?: number) => Output): Output[]{
    return arr.map(fn)
}

Ce que nous devons noter dans l'extrait ci-dessus, c'est que la fonction fn prend un élément du même type du tableau d'entrée et renvoie un type de sortie.

Qu'en est-il de la méthode statique Array.from() ?

function myFrom<Type>(iterable: Iterable<Type>): Array<Type>{
    // logic
}

ou la méthode array.filter() ?

function myFilter<Input>(arr: Input[], fn: (item: Input) => boolean): Input[]{
    return arr.filter(fn)
}

Contraintes génériques

Vous pouvez également contraindre les variables génériques à des types qui ont une propriété particulière. Par exemple,

function pickInnerFirst<T extends {length: number}>(array: Array<T>): T{
    return array[0][0]
}

Cette fonction sélectionne le tout premier élément d'un tableau à 2 dimensions

Cela garantit que cela ne fonctionne que pour les tableaux et les chaînes (principalement) de telle manière que

pickOne([12, 20, 30]) // wont work.

On peut aussi utiliser des interfaces

interface Lengthly{
    length: number;
}

function pickInnerFirst<T extends Lengthly>(array: Array<T>): T{
    return array[0][0]
}

---

Interfaces de fonctions

Au cas où vous ne le sauriez pas, Les fonctions sont des objets et elles ont des propriétés

const add = (a, b) => a + b

console.log(add.toString()) //(a, b) => a + b

// also
console.log(Object.getPrototypeOf(add) == Function.prototype) //true
console.log(Object.getPrototypeOf(Function.prototype) == Object.prototype) //true

Le deuxième exemple indique que la fonction add est un enfant de Object.prototype (même si ce n'est pas un enfant direct) et est donc un objet.

Assez drôle, vous pouvez attacher des propriétés à une fonction en JavaScript

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}

Cet extrait reviendra

function optional(a: number, b?: number){
    console.log(a)
}

Observez qu'en A nous avons attaché une propriété appelée description à la fonction qui ne peut être possible qu'avec des objets.

C'est pour conclure que;

Les objets peuvent être décrits avec des interfaces (normalement). Pour les fonctions, cela est également possible. cependant, c'est seulement quelque chose que vous devez prendre en compte lorsque vous ajoutez des propriétés spéciales à vos fonctions.

function multiplier(factor){
    return value => factor * value
}

Au commentaire A est l'endroit où nous décrivons les arguments et les types de retour de la fonction.

Donc, pour annoter le code précédent en dactylographié,

const n  = multiplier(6)
n(8) // 48

Observez la façon dont nous avons utilisé l'interface dans la fonction scream en A.

---

Pourquoi devrais-je comprendre comment annoter des fonctions dans Typescript ?

Eh bien, cela aide à créer un système de typage beaucoup plus intelligent, ce qui réduit à son tour vos risques de bugs. Si vous créez une bibliothèque ou un framework, vous devrez peut-être utiliser certains ou la plupart des concepts mentionnés ici.
Si vous utilisez uniquement des bibliothèques, ces concepts ne sont pas vraiment nécessaires, même s'ils peuvent vous donner une compréhension beaucoup plus approfondie des bibliothèques avec lesquelles vous travaillez.

Si vous avez des questions ou s'il y a des erreurs dans cette rédaction, n'hésitez pas à les partager dans les commentaires ci-dessous ⭐

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!