Maison > interface Web > js tutoriel > Annotation de fonctions dans Typescript

Annotation de fonctions dans Typescript

Barbara Streisand
Libérer: 2024-12-23 12:27:35
original
542 Les gens l'ont consulté

Annotating Functions in 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
}
Copier après la connexion
Copier après la connexion

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

function optional(a: number, b?: number){
    console.log(a)
}
Copier après la connexion
Copier après la connexion

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
}
Copier après la connexion
Copier après la connexion

pour que nous puissions utiliser la fonction comme ceci ;

const n  = multiplier(6)
n(8) // 48
Copier après la connexion
Copier après la connexion

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
}
Copier après la connexion

Donc pour annoter la fonction multiplicateur, on a

function multiplier(factor: number): (value: number) => number{
    return value => factor * value
}
Copier après la connexion

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]
}
Copier après la connexion

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
}
Copier après la connexion

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]
}
Copier après la connexion

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)
}
Copier après la connexion

On peut l'annoter comme ça

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

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
}
Copier après la connexion

ou la méthode array.filter() ?

function myFilter<Input>(arr: Input[], fn: (item: Input) => boolean): Input[]{
    return arr.filter(fn)
}
Copier après la connexion

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]
}
Copier après la connexion

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.
Copier après la connexion

On peut aussi utiliser des interfaces

interface Lengthly{
    length: number;
}

function pickInnerFirst<T extends Lengthly>(array: Array<T>): T{
    return array[0][0]
}
Copier après la connexion

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
Copier après la connexion

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
}
Copier après la connexion
Copier après la connexion

Cet extrait reviendra

function optional(a: number, b?: number){
    console.log(a)
}
Copier après la connexion
Copier après la connexion

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
}
Copier après la connexion
Copier après la connexion

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
Copier après la connexion
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal