Что означает "=>" в TypeScript? (Fat Arrow)

Я только начал изучать TypeScript и увидел, что в этом синтаксисе много кода =>. Я провел небольшое исследование, прочитав спецификацию TypeScript версии 1.6 и немного погуглив. Я до сих пор не могу понять значение =>.
Для меня это похоже на указатель в C++. Но я не могу это подтвердить. Если кто-нибудь может объяснить следующие примеры, это будет здорово. Спасибо!

Вот примеры, которые я нашел, когда читал спецификацию Typescript:

Типы объектов

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

Вопрос: что делает этот код? Создаете объект с именем MakePoint, где поля x и y имеют тип число? Это конструктор или функция для MakePoint?

Типы функций

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

Вопрос: Что означает => any? Вы должны вернуть строковый тип?

Может кто-нибудь объяснить мне разницу или цель этих примеров на простом английском языке? Спасибо за уделенное время!

Ответы

Ответ 1

Возможно, вы вводите в заблуждение информацию о типе с объявлением функции. Если вы скомпилируете следующее:

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

вы увидите, что он производит:

var MakePoint;

В TypeScript все, что приходит после :, но до = (присвоение), является информацией о типе. Таким образом, ваш пример говорит о том, что тип MakePoint - это функция, которая принимает 0 аргументов и возвращает объект с двумя свойствами, x и y, оба числа. Он не назначает функцию этой переменной. Напротив, компиляция:

var MakePoint = () => 1;

дает:

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

Обратите внимание, что в этом случае стрелка => fat появляется после оператора присваивания.

Ответ 2

В позиции типа => определяется тип функции, где аргументы находятся слева от =>, а тип возврата - справа. Таким образом, callback: (result: string) => any означает: callback - это параметр, тип которого является функцией. Эта функция принимает один параметр с именем result типа string, а возвращаемое значение функции имеет тип any ".

Для конструкции уровня выражения см. В чем смысл "= > " (стрелка, образованная от равных и больше) в JavaScript?

Ответ 3

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

MakePoint - переменная. Тип - это функция, которая не принимает аргументов и порождает числа x и y. Теперь стрелка имеет смысл?

Ответ 4

  Как однажды сказал мудрый человек, "я ненавижу JavaScript, так как он слишком легко теряет смысл".

Она называется жирной стрелкой (поскольку -> - тонкая стрелка, а => - толстая стрелка), а также называется лямбда-функцией (из-за других языков). Другая часто используемая функция - функция жирной стрелки ()=>something. Мотивация для жирной стрелы:

  1. Вам не нужно продолжать печатать function.
  2. Он лексически отражает значение this.
  3. Он лексически отражает значение 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

Если вы запустите этот код в браузере, он внутри функции будет указывать на окно, потому что окно будет тем, что выполняет функцию growOld. Исправлено использование функции стрелки:

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

Ответ 5

Он называется "жирной стрелкой". Он был добавлен в EcmaScript6 и заменяет ключевое слово функции среди других вещей.

Подробнее можно прочитать здесь.

Ответ 6

Непосредственно из ссылки в OP:

В этом примере второй параметр "vote" имеет тип функции

(результат: строка) = > любой что означает, что вторым параметром является функция, возвращающая тип "any", который имеет единственный параметр типа "string" с именем "result".

Ответ 7

Просто его использовали вместо анонимных функций.

Код ниже

function(argument){
return argument. Length
}

будет преобразован в argument => {argument.length};

Для лучшего понимания смотрите ниже:https://codecraft.tv/courses/angular/es6-typescript/arrow/