tutorial - Qual é o significado de "=>" no TypeScript?(Flecha Gorda)




typescript é (6)

Eu apenas comecei a aprender TypeScript e vi que há muito código usando esta sintaxe => . Eu fiz algumas pesquisas lendo a Especificação do TypeScript versão 1.6 e algumas pesquisas no Google. Ainda não consigo entender o significado de => .
Para mim, parece um ponteiro em C ++. Mas não posso confirmar. Se alguém puder explicar os seguintes exemplos, isso será ótimo. Obrigado!

Aqui estão os exemplos que eu encontrei quando estava lendo a especificação do TypeScript:

Tipos de Objetos

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

Pergunta: O que esse código está fazendo? Criando um objeto chamado MakePoint , onde os campos x e y são do tipo numérico ? Isso é um construtor ou uma função para o MakePoint ?

Tipos de Função

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

Pergunta: Qual é o significado de => any ? Você precisa retornar um tipo de string?

Alguém pode me explicar a diferença ou o objetivo desses exemplos em inglês simples? Obrigado pelo seu tempo!


Como um homem sábio disse uma vez: "Eu odeio JavaScript, pois tende a perder o significado disso com muita facilidade".

É chamada de seta gorda (porque -> é uma seta fina e => é uma seta gorda) e também chamada de função lambda (devido a outros idiomas). Outro recurso comumente usado é a função de seta gorda ()=>something . A motivação para uma flecha gorda é:

  1. Você não precisa continuar digitando a function .
  2. Ele capta lexicamente o significado this .
  3. Capta lexicamente o significado dos 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 você executar esse código no navegador, isso dentro da função apontará para a janela porque a janela será o que executa a função growOld. Correção é usar uma função de seta:

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

É chamado de "flecha gorda". Foi adicionado no EcmaScript6 e substitui a palavra-chave function entre outras coisas.

Mais pode ser lido here .


Diretamente do link no OP:

Neste exemplo, o segundo parâmetro para 'vote' tem o tipo de função

(resultado: string) => any, o que significa que o segundo parâmetro é uma função que retorna o tipo 'any' que possui um único parâmetro do tipo 'string' denominado 'result'.


Em uma posição de tipo, => define um tipo de função em que os argumentos estão à esquerda de => e o tipo de retorno está à direita. Portanto, callback: (result: string) => any meio " callback é um parâmetro cujo tipo é uma função. Essa função recebe um parâmetro chamado result do tipo string e o valor de retorno da função é do tipo any ".

Para a construção no nível da expressão, consulte Qual é o significado de "=>" (uma seta formada de iguais e maiores que) em JavaScript?


Talvez você esteja confundindo informações de tipo com uma declaração de função. Se você compilar o seguinte :

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

você verá que produz:

var MakePoint;

No TypeScript, tudo o que vem depois do : mas antes de um = (atribuição) é a informação do tipo. Portanto, seu exemplo está dizendo que o tipo de MakePoint é uma função que recebe 0 argumentos e retorna um objeto com duas propriedades, x e y , ambos os números. Não está atribuindo uma função a essa variável. Por outro lado, compilando:

var MakePoint = () => 1;

produz:

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

Observe que, nesse caso, a seta gorda => vem após o operador de atribuição.


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

MakePoint é uma variável. Seu tipo é uma função que não aceita argumentos e produz números x e y. Agora a flecha faz sentido?







typescript