web-dev-qa-db-fra.com

Quelle est la signification de "=>" dans TypeScript? (Grosse flèche)

Je viens juste de commencer à apprendre TypeScript, et j'ai vu qu'il y avait beaucoup de code utilisant cette syntaxe =>. J'ai fait des recherches en lisant la Spécification de TypeScript Version 1.6 et des recherches sur Google. Je n'arrive toujours pas à comprendre le sens de =>.
Pour moi, cela ressemble à un pointeur en C++. Mais je ne peux pas le confirmer. Si quelqu'un peut expliquer les exemples suivants, ce sera génial. Je vous remercie! 

Voici les exemples que j'ai trouvés lorsque je lisais la spécification de TypeScript:

Types d'objet

var MakePoint: () => {  
    x: number; y: number;  
};

Question: Que fait ce code? Création d'un objet appelé MakePoint, où les champs x et y sont de type number? Est-ce un constructeur ou une fonction pour MakePoint?

Types de fonctions

function vote(candidate: string, callback: (result: string) => any) {  
 // ...  
}

Question: Quelle est la signification de => any? Devez-vous renvoyer un type de chaîne? 

Quelqu'un peut-il m'expliquer la différence ou le but de ces exemples en anglais simplifié? Merci pour votre temps!

typescript
66
Shaohao Lin

Peut-être confondez-vous les informations de type avec une déclaration de fonction. Si vous compilez ce qui suit :

var MakePoint: () => {x: number; y: number;};

vous verrez que cela produit:

var MakePoint;

Dans TypeScript, tout ce qui vient après le : mais avant un = (affectation) correspond aux informations de type. Votre exemple indique donc que le type de MakePoint est une fonction qui prend 0 argument et renvoie un objet avec deux propriétés, x et y, les deux nombres. Ce n'est pas assigner une fonction à cette variable. En revanche, compiler:

var MakePoint = () => 1;

produit:

var MakePoint = function () { return 1; };

Notez que dans ce cas, la flèche => gras vient après l'opérateur d'affectation.

72
mk.

Dans une position de type, => définit un type de fonction dans lequel les arguments sont situés à gauche du => et le type de retour est à droite. Donc callback: (result: string) => any signifie "callback est un paramètre dont le type est une fonction. Cette fonction prend un paramètre appelé result de type string et la valeur de retour de la fonction est de type any".

Pour la construction au niveau de l'expression, voir Que signifie "=>" (une flèche formée d'égaux & supérieure à) en JavaScript?

24
Ryan Cavanaugh
var MakePoint: () => {  
    x: number; y: number;  
};

MakePoint est une variable. Son type est une fonction qui ne prend aucun argument et produit des nombres x et y. La flèche a-t-elle un sens?

15
Eric Lippert

Comme un homme sage a dit un jour "Je déteste le JavaScript car il a tendance à en perdre trop facilement le sens". 

Cela s'appelle la flèche grosse (parce que -> est une flèche fine et => est une flèche grosse) et aussi appelée fonction lambda (à cause d'autres langues). Une autre caractéristique couramment utilisée est la fonction flèche lourde ()=>something. La motivation pour une grosse flèche est:

  1. Vous n'avez pas besoin de continuer à taper function.
  2. Il capture lexicalement la signification de this.
  3. Il capture lexicalement la signification de arguments 
function Person(age) {
this.age = age;
this.growOld = function() {
    this.age++;
  }
}

var person = new Person(1);
setTimeout(person.growOld,1000);

setTimeout(function() { console.log(person.age); },2000); // 1, should have been 2

Si vous exécutez ce code dans le navigateur, cela dans la fonction va pointer sur window car window sera ce qui exécute la fonction growOld. Le correctif consiste à utiliser une fonction de flèche:

function Person(age) {
this.age = age;
this.growOld = () => {
    this.age++;
  }
}
var person = new Person(1);
setTimeout(person.growOld,1000);

setTimeout(function() { console.log(person.age); },2000);// 2
9
Mohd Belal

C'est ce qu'on appelle une "grosse flèche". Il a été ajouté dans EcmaScript6 et remplace le mot-clé de fonction, entre autres. 

Plus peut être lu ici .

5
mam8cc

Directement à partir du lien dans OP:

Dans cet exemple, le second paramètre à "voter" a le type de fonction 

(résultat: chaîne) => any ce qui signifie que le second paramètre est une fonction renvoyant le type 'any' ayant un seul paramètre de type 'chaîne' nommé 'résultat'.

3
Amit

Tout simplement son été utilisé à la place de fonctions anonymes.

Le code ci-dessous 

function(argument){
return argument. Length
}

sera transformé en argument => {argument.length};

Pour une meilleure compréhension, voir ci-dessous: https://codecraft.tv/courses/angular/es6-TypeScript/arrow/

0
Ashok Kumar