TypeScript中“=>”的含义是什么？ （胖箭）

7 回答

• 25

  也许您将类型信息与函数声明混淆 . 如果你compile the following：

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

  你会看到它产生：

  var MakePoint;
  

  在TypeScript中， : 之后但 = （赋值）之前的所有内容都是类型信息 . 所以你的例子是说MakePoint的类型是一个接受0参数的函数，并返回一个具有两个属性的对象， x 和 y ，两个数字 . 它没有为该变量分配函数 . 相比之下，编译：

  var MakePoint = () => 1;
  

  生产环境 ：

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

  请注意，在这种情况下， => fat箭头位于赋值运算符之后 .

  回复于 2024-04-28T18:48:01+08:00
• 73

  在类型位置， => 定义一个函数类型，其中参数位于 => 的左侧，返回类型位于右侧 . 所以 callback: (result: string) => any 表示“ callback 是一个类型为函数的参数 . 该函数接受一个名为 result 的 result 参数，该函数的返回值为 any ” .

  对于表达式级别构造，请参阅What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?

  回复于 2024-04-28T18:48:01+08:00
• 5

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

  MakePoint 是一个变量 . 它的类型是一个不带参数并产生数字x和y的函数 . 现在箭头有意义吗？

  回复于 2024-04-28T18:48:01+08:00
• 0

  作为一个聪明的人曾经说过“我讨厌JavaScript，因为它很容易失去这个意思” .

  它被称为 fat arrow （因为 -> 是一个细箭头， => 是一个胖箭头），也称为lambda函数（因为其他语言） . 另一个常用功能是胖箭头功能 ()=>something . 胖箭的动机是：

  • 您无需继续输入 function .

  • 它在词汇上捕获了 this 的含义 .

  • 它在词汇上捕获了 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
  

  如果你在浏览器中运行这个代码，那么函数内部将指向window，因为window将执行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
  

  回复于 2024-04-28T18:48:01+08:00
• 3

  它被称为“胖箭” . 它被添加到EcmaScript6中并替换了function关键字等 .

  更多内容可以阅读here .

  回复于 2024-04-28T18:48:01+08:00
• 9

  直接来自OP中的链接：

  在这个例子中，'vote'的第二个参数有函数类型（result：string）=> any，这意味着第二个参数是一个返回类型'any'的函数，它有一个'string'类型的参数，名为'result' ” .

  回复于 2024-04-28T18:48:01+08:00
• 16

  简单地它被用来代替匿名函数 .

  以下代码

  function(argument){
  return argument. Length
  }
  

  将转变为 argument => {argument.length};

  为了更好地理解，请参阅以下内容：https://codecraft.tv/courses/angular/es6-typescript/arrow/

  回复于 2024-04-28T18:48:01+08:00