OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

TypeScript新功能实例讲解:支持更多EcmaScript6特性


分享到
分类 技术前沿   关键字 开源   发布 kris  1428205528831
注意 转载须保留原文链接,译文链接,作者译者等信息。  
TypeScript 1.5 Alpha正式发布,这是TypeScript 1.5的预览版。此版本增加许多新功能。

注* 在这篇文章中我们会为每个ts示例附加所编绎出的js文件。通过NPM安装TypeScript编绎器,并编绎ts文件:

//全局安装
npm install typescript -g
//编绎TS文件
tsc helloworld.ts


更多的ES6功能的支持


在TypeScript 1.5中,我们加入了大量新的 ES6 功能。这些类型系统将能让使用新的 ES6 代码模式。

模块(Modules)


ES6 的模块语法是实现模块化的有力途径。通过导入整个模块或个别接口,您可以实现与模块的交互。

ES6允许你只导出、导入特定的功能,你还可以在模块功能上面添加default, 比如:

// math.ts

export function add(x, y) { return x + y }
export function subtract(x, y) { return x – y }
export default function multiply(x, y) { return x * y }

// myFile.ts

//只导入math中的add,subtract方法
import {add, subtract} from "math";
//将math中的默认导出方法命名为times
import times from "math";
var result = times(add(2, 3), subtract(5, 3));

如果您一直在使用TypeScript,你可能会注意到有关于TypeScript外部模块(external modules)的报错。这并不意外。当我们为TypeScript创建外部模块时,我们正在对解决这个问题。我们鼓励开发人员使用更强的 ES6 模块语法。

注* 通过编绎出的结果可以看出export的实现原理:

// math.js

function add(x, y) { return x + y; }
exports.add = add;
function subtract(x, y) { return x - y; }
exports.subtract = subtract;
function multiply(x, y) { return x * y; }
exports.default = multiply;

// myFile.js

var math_1 = require("math");
var math_2 = require("math");
var result = math_2.default(math_1.add(2, 3), math_1.subtract(5, 3));

解构(Destructuring)


解构是ES6的新功能。有了它,你可以分开声明对象或数组的对象。


// 解构声明一个数组, x对应10, y对应20
var [x, y] = [10, 20];
[x, y] = [y, x];  // 简单的交换

// 你还可以在函数传入参数中使用此声明
var myClient = {name: "Bob", height: 6};
function greetClient({name, height: howTall}) {
  console.log("Hello, " + name + ", who is " + howTall + " feet tall.");
}
greetClient(myClient);

传入的对象含有name和height属性,通过此语言,height将被重命名为howTall变量;


注* 编绎出来的结果,你可能会注意到_b变量声明被放到了最后,实际输出结果确实如此,但JS会自动把声明提升,因此不会引起任何问题。

var _a = [10, 20], x = _a[0], y = _a[1];
_b = [y, x], x = _b[0], y = _b[1]; // 简单的交换


var myClient = { name: "Bob", height: 6 };
function greetClient(_a) {
    var name = _a.name, howTall = _a.height;
    console.log("Hello, " + name + ", who is " + howTall + " feet tall.");
}
greetClient(myClient);
var _b;

更多


我们同样为枚举添加了 for-of 支持, let/const 声明, unicode 支持, 和对 computed properties 更好的支持。



修饰符(Decorators)



我们也采纳了Angular,Ember和Aurelia (Durandal的制造商) 团队的建议,添加了 ES7 新的修饰符的建议。新的修饰符声明起来更加简洁。在此示例中,我们看到 @memoize 装饰应用在 getter/setter 上的例子:


class Person {
  @memoize
  get name() { return `${this.first} ${this.last}` }

  set name(val) {
    let [first, last] = val.split(' ');
    this.first = first;
    this.last = last;
  }
}

注* memoize 是指记住(缓存)某些输入参数的输出结果,提高响应速度,下面是编绎出的结果:

var __decorate = this.__decorate || function (decorators, target, key, value) {
var kind = typeof (arguments.length == 2 ? value = target : value);
for (var i = decorators.length - 1; i >= 0; --i) {
var decorator = decorators[i];
switch (kind) {
case "function": value = decorator(value) || value; break;
case "number": decorator(target, key, value); break;
case "undefined": decorator(target, key); break;
case "object": value = decorator(target, key, value) || value; break;
}
}
return value;
};
var Person = (function () {
function Person() {
}
Object.defineProperty(Person.prototype, "name", {
get: function () { return this.first + " " + this.last; },
set: function (val) {
var _a = val.split(' '), first = _a[0], last = _a[1];
this.first = first;
this.last = last;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Person.prototype, "name", __decorate([memoize], Person.prototype, "name", Object.getOwnPropertyDescriptor(Person.prototype, "name")));
return Person;
})();











原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  2. 6款基于Node.JS的开源内容管理和静态网站生成系统
  3. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  4. NativeScript的竞争者React Native:又一个用JavaScript写原生iOS应用的项目
  5. 微软,IBM,ARM等大公司先后加入对Node.js/io.js的支持
  6. 微软博客:Angular 2将基于TypeScript
  7. history.js 一个无刷新就可改变浏览器栏地址的插件(不依赖jquery)
  8. AngularJS和$scope.$apply()用法的最佳实践
  9. trim-html:NodeJS的HTML文本截取库(自动生成正文摘要)
  10. 用纯css改变下拉列表select框的默认样式
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 技术前沿
  1. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  2. 微软博客:Angular 2将基于TypeScript
  3. 专为控制打印设计的CSS样式
  4. 什么是Viewport Meta(width详解)及在手机上的应用
  5. io.js新支持的ECMAScript 6功能特性详解
  6. NodeJS连接Redis:安装及开机自动启动设置
  7. Duktape:一个新的小巧的超精简可嵌入式JavaScript引擎
  8. HTML5的TCP和UDP Web Socket API草案定稿
  9. SpiderMonkey的JavaScript引擎[Firefox]性能超越V8[Chrome]
  10. 基于 Web 的 Go 语言 IDE

 关键字 - 开源
  1. 15个最好用的Node.JS后端框架
  2. Mongoose学习参考文档——基础篇
  3. Node.JS与USB接口通信:检测U盘/移动硬盘插拔事件和发送接数据
  4. 一个程序员是如何搞挂NPM和Node社区的
  5. 迫于社区压力:React(Native)16将更换成MIT开源协议
  6. 开源Node.js商城:基于Thinkjs+Mysql的开源微信小程序商城
  7. 使用NodeJS搭建邮件自动发送服务器
  8. NodeJS 文件(夹)压缩/解压方案(zip/unzip)-Linux上zip相关命令
  9. QRCode:用纯JavaScript实现的微信二维码图片生成器
  10. Stop-Server:用手机关闭你的电脑

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号