Qual è il significato di “=>” in TypeScript? (Fat Arrow)

Ho appena iniziato a imparare TypeScript, e ho visto che c’è un sacco di codice usando questo sytax => . Ho fatto qualche ricerca leggendo la specifica di TypeScript Version 1.6 e alcuni googling. Non riesco ancora a capire il significato di => .
Per me, sembra un puntatore in C ++. Ma non posso confermarlo. Se qualcuno può spiegare i seguenti esempi, sarà fantastico. Grazie!

Ecco gli esempi che ho trovato leggendo le specifiche di Typescript:

Tipi di oggetti

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

Domanda: cosa sta facendo questo codice? Creare un object chiamato MakePoint , dove i campi x e y sono di tipo numerico ? È un costruttore o una funzione per MakePoint ?

Tipi di funzione

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

Domanda: qual è il significato di => any ? Devi restituire un tipo di stringa?

Qualcuno può spiegarmi la differenza o lo scopo di questi esempi in inglese normale? Grazie per il tuo tempo!

Forse stai confondendo le informazioni sul tipo con una dichiarazione di funzione. Se si compila il seguente :

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

vedrai che produce:

 var MakePoint; 

In TypeScript, tutto ciò che viene dopo il : ma prima di un = (assegnazione) è il tipo di informazione. Quindi il tuo esempio sta dicendo che il tipo di MakePoint è una funzione che accetta 0 argomenti e restituisce un object con due proprietà, y , entrambi i numeri. Non sta assegnando una funzione a quella variabile. Al contrario, compilando:

 var MakePoint = () => 1; 

produce:

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

Nota che in questo caso, la freccia => fat arriva dopo l’operatore di assegnazione.

In una posizione di tipo, => definisce un tipo di funzione in cui gli argomenti si trovano a sinistra di => e il tipo di ritorno è a destra. Quindi callback: (result: string) => any means ” callback è un parametro il cui tipo è una funzione, che prende un parametro chiamato result di type string , e il valore restituito dalla funzione è di tipo any “.

Per il costrutto a livello di espressione, vedi Qual è il significato di “=>” (una freccia formata da uguale a maggiore di) in JavaScript?

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

MakePoint è una variabile. Il suo tipo è una funzione che non accetta argomenti e produce numeri xey. Ora la freccia ha senso?

Come un uomo saggio una volta ha detto “Odio JavaScript perché tende a perdere il significato di questo fin troppo facilmente”.

Si chiama freccia grassa (perché -> è una freccia sottile e => è una freccia grossa) e anche chiamata funzione lambda (a causa di altre lingue). Un’altra funzione comunemente usata è la funzione fat arrow ()=>something . La motivazione per una freccia grossa è:

  1. Non è necessario continuare a digitare la function .
  2. Cattura lexically il significato di this .
  3. Cattura lessicamente il significato degli 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 

Se si esegue questo codice nel browser, all’interno della funzione si punta alla finestra perché la finestra sarà ciò che esegue la funzione growOld. La correzione consiste nell’utilizzare una funzione freccia:


 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 

Si chiama “freccia grossa”. È stato aggiunto in EcmaScript6 e sostituisce la parola chiave function tra le altre cose.

Più può essere letto qui .

Direttamente dal link in OP:

In questo esempio, il secondo parametro per ‘votare’ ha il tipo di funzione

(result: string) => any che significa che il secondo parametro è una funzione che restituisce il tipo ‘any’ che ha un singolo parametro di tipo ‘string’ chiamato ‘result’.

Semplicemente è stato usato al posto di funzioni anonime.

Il codice sottostante

 function(argument){ return argument. Length } 

sarà trasformato in argument => {argument.length};

Per una migliore comprensione fare riferimento al seguente: https://codecraft.tv/courses/angular/es6-typescript/arrow/