当前位置:   jquery > 正文

TypeScript中"=>"的含义是什么?(胖箭)

typescript,https,javascript,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具

我刚开始学习TypeScript,我看到有很多代码使用这个sytax =>.我通过阅读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> mk...:

也许您将类型信息与函数声明混淆.如果您编译以下内容:

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

你会看到它产生:

var MakePoint;

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

var MakePoint = () => 1;

生产:

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

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


@ShaohaoLin它更短并且省略了名称(`()=> ...`),它保留了`this`的范围,这意味着你不再需要创建`var self = this`变量,或者传递`this `通过函数参数.[更多信息](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
如果MakePoint是一个函数,为什么不只使用常规的JavaScript函数声明呢?例如`function MakePoint(){...}`吗?

2> Ryan Cavanau..:

在类型位置,=>定义一个函数类型,其中参数位于左侧,=>返回类型位于右侧.所以callback: (result: string) => any意味着" callback是一个类型是函数的参数.该函数接受一个名为resulttype的参数string,函数的返回值是类型any".

对于表达式级别的构造,请参阅JavaScript中"=>"(由等于和大于等形成的箭头)的含义是什么?



3> Eric Lippert..:
var MakePoint: () => {  
    x: number; y: number;  
};

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



4> Mohd Belal..:

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

它被称为胖箭(因为它->是一个细箭头,=>是一个胖箭头),也称为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



5> mmcclannahan..:

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

更多内容可以在这里阅读.

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/jquery/detail/13530
推荐阅读
  • 如何解决《使用jQuery将图片从一个div添加到另一个div》经验,为你挑选了1个好方法。html,javascript,css,jquery,dom,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,... [详细]

  • 如何解决《为什么匿名函数会丢失对象范围?》经验,为你挑选了1个好方法。javascript,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人... [详细]

  • 如何解决《为什么我不能使用jQuery检查这个单选按钮?》经验,为你挑选了1个好方法。javascript,jquery,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线... [详细]

  • 如何解决《Chrome扩展程序存储了大量数据》经验,为你挑选了1个好方法。javascript,storage,google-chrome-extension,google-chrome-storage,chrome-sync,DevBox... [详细]

  • 如何解决《angular.js延迟在回调中不起作用》经验,为你挑选了1个好方法。javascript,promise,angularjs,注入,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成... [详细]

  • 如何解决《箭头功能中的默认参数值》经验,为你挑选了1个好方法。javascript,google-chrome,default-parameters,ecmascript-6,chrome,DevBox,在线流程图,编程,编程问答,程序员,... [详细]

  • 如何解决《为什么这不会在内联中工作?》经验,为你挑选了1个好方法。javascript,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工... [详细]

  • 如何解决《新手jquery语法错误》经验,为你挑选了1个好方法。javascript,jquery,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具... [详细]

  • 如何解决《使用具有不同前缀和后缀表达式的共享子表达式进行正则表达式更改》经验,为你挑选了0个好方法。javascript,regex,json,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成... [详细]

  • 如何解决《Javascript数组包含/包含子数组》经验,为你挑选了1个好方法。javascript,arrays,contains,include,indexof,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,j... [详细]

  • 如何解决《Jsfiddle的新UI破坏了我的角度和javascript小提琴》经验,为你挑选了1个好方法。javascript,jsfiddle,angularjs,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,j... [详细]

  • 如何解决《为什么在JS中你不能在原型上设置非函数》经验,为你挑选了1个好方法。javascript,prototypal-inheritance,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生... [详细]

  • 如何解决《如何将变量值从GULP注入到JS文件中》经验,为你挑选了1个好方法。javascript,javascript-objects,gulp,gulp-header,注入,json,DevBox,在线流程图,编程,编程问答,程序员,开... [详细]

  • 如何解决《控制器的ngdoc文档》经验,为你挑选了1个好方法。javascript,documentation-generation,angularjs,ngdoc,grunt-ngdocs,DevBox,在线流程图,编程,编程问答,程序员... [详细]

  • 如何解决《如何生成具有特定长度限制的所有可能组合中的字母?》经验,为你挑选了1个好方法。javascript,arrays,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在... [详细]

  • 如何解决《为什么我的图像高度不能正确缩放?》经验,为你挑选了1个好方法。javascript,css,image-resizing,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成... [详细]

  • 如何解决《将内容推送到数组》经验,为你挑选了1个好方法。javascript,arrays,jquery,local-storage,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生... [详细]

  • 如何解决《使用Protractor获取ng-repeatng-repeat》经验,为你挑选了1个好方法。javascript,bdd,end-to-end,angularjs,protractor,DevBox,在线流程图,编程,编程问答,... [详细]

  • 如何解决《如何在browserify中使用exclude?》经验,为你挑选了1个好方法。browserify,npm,jquery,https,javascript,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,j... [详细]

  • 如何解决《摆脱SVG圆形元素上的锯齿》经验,为你挑选了0个好方法。html,javascript,css,jquery,svg,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳... [详细]

相关标签
  

闽ICP备14008679号