文档章节

TypeScript系列1-简介及版本新特性

一配
 一配
发布于 2015/08/15 22:03
字数 1564
阅读 1184
收藏 6

1. 简介

    随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响。由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择: AngularJS/Angula2 + Ionic框架 + Cordova。想要学习好Angula2以及阅读其代码, 就必须了解和学习TypeScript,也因此需要学习好ES6以及Web Component。近期将开始学习TypeScript语言。

    下面先看看TypeScript语言的发展:

    鉴于JavaScript这种脚本语言很难应用于大规模Web应用的开发,微软公司在2012年推出了新的开源编程语言——TypeScript。作为Object Pascal和C#之父Anders Hejisberg的又一作品,TypeScript是JavaScript的超集,但完全兼容JavaScript。相比于JavaScript,TypeScript增加了可选类型、类和模块,扩展了原有的语法,使得代码组织和复用变得更加有序,方便进行大型Web应用的开发。

    微软是在2012.11月份将TypeScript语言开源,0.8.1版本是第二个开源的版本[1]。

    2014年4月,TypeScript 1.0版本正式发布[2]。之后,微软公司不断更新该语言,陆续推出了1.3、1.4版本。

    2015年7月20日TypeScript1.5版本正式发布[3]。 

    2015年9月2日TypeScript1.6 Beta版本发布[6]。

2. TypeScript 1.5版本新特性

[4]虽然对TypeScript 1.5版本的新特性进行了翻译,但其中一些关键字词上含义偏差较远,而且没有给出举例的代码,下面内容主要是参考[3][4]重新整理的。

首先,在ES6(ECMAScript 6,即ECMAScript 2015)的支持方面。TypeScript 1.5版本增加了对ES6中Modules、Destructuring、Spread、for..of、Symbols、Computed Properties、Let/Const、和Tagged String Templates等新特性的支持。这些新特性使得TypeScript向成为ES6的超集并为ES6的所有主要特性提供类型检查的目标迈进了一大步。

其次,在模块(Module)方面,TypeScript 1.5也进行了很大改动。TypeScript 1.5支持ES6的新模块语法——ES6模块可以用import导入模块并用export导出每一个公共API,甚至可以只导入公共API所需要使用的那部分。

import * as Math from "my/math";
import { add, subtract } from "my/math";


而且,开发人员还可以使用default export声明表示模块的核心内容,从而可以对API做更精确控制。

// 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
import {add, subtract} from "math";
import times from "math";
var result = times(add(2, 3), subtract(5, 3));

在math.ts文件的最后一行用了'export default',这一行可控制这是一个'default' export,当只是用名称而不是用花括号({})来导入具体的exports时就导出这个缺省export,就像myFiles.ts文件的第二行。


此外,TypeScript 1.5对模块进行了简化,并换用更加简洁的名称——内部模块改称为“namespace”,外部模块才为“module”。

由于JavaScript既用于浏览器也用于服务器端,因此TypeScript已经支持将模块编译为AMD或 CommonJS。为了支持更多的JavaScript实践,TypeScript 1.5新增加了两个新的模块输出格式:SystemJS和UMD,其中SystemJS可以使ES6 modules更接近于原生语义(native semantics)而不需要ES6兼容的浏览器引擎,UMD输出单个模块,从而可与AMD和 CommonJS一起配合

再次,在创建更轻量、可移植的项目方面。鉴于VS Code、Sublime、Atom和其他编辑器已经开始支持tsconfig.json文件,TypeScript 1.5的编译器也开始支持该类型文件,使得用户可以指定工程中的文件和编译选项。该方法创建的项目既可在命令行也可在编辑器中进行开发,更加轻量化。

最后,TypeScript 1.5还添加了ES7中建议的Decorator特性的支持,该特性目前由Angular、Ember和Aurelia团队在合作开发 。由于目前ES7仍然处于开发阶段,其Decorator特性也被视为实验性质。但是,用户目前已经可以进行体验,感受其强大之处。

下面是在Angular 2中使用decorators:

import {Component, View, NgFor, bootstrap} from "angular2/angular2";
import {loadFile} from "audioFile";
import {displayAudioFile} from "displayAudio";

@Component({selector: 'file-list'})
@View({
  template: `  
    <select id="fileSelect" size="5">    
      <option *ng-for="#item of items; #i = index"      
        [selected]="selected === item"(click)="updateSelection()">{{ item }}
      </option>  
    </select>`,  
  directives: [NgFor]
})

class MyDisplay {  
  items: string[];
  
  constructor() {    
    this.items = ["item1", "item2"];  
  }  
  updateSelection() { … }
}

Decorators可以将元数据(metadata)关联到类以及类成员上,并更新那些被装饰的功能。上面代码中,Angular 2使用Decorators来定义类中的HTML selector和template。

3. TypeScript 1.6 Beta版本新特性

React中采用JSX语法编写DOM和native component,但JSX语法与TypeScript中的映射(cast)语法冲突。

为了支持React/JSX, TypeScript从1.6版本开始引入一个新的.tsx文件后缀,使能TypeScript文件中的JSX,同时采用新的'as'运算符作为映射的缺省方式[6]。

同时,对象检查规则更加严格,例如

var x: { foo: number };
x = { foo: 1, baz: 2 };  // 错误,多了一个property 'baz', 但在1.6版本之前无法检测出

var y: { foo: number, bar?: number };
y = { foo: 1, baz: 2 };  // 错误, 多了一个或拼写错误property 'baz', 但在1.6版本之前无法检测出

另外,提升模块解析,使解析更为自然。还增加支持ES6中类表达式(class expressions),开始支持generators。

4. 参考资料

[1] Announcing TypeScript 0.8.1, 15 Nov 2012, http://blogs.msdn.com/b/typescript/archive/2012/11/15/announcing-typescript-0-8-1.aspx

[2] Announcing TypeScript 1.0, 2 Apr 2014, http://blogs.msdn.com/b/typescript/archive/2014/04/02/announcing-typescript-1-0.aspx

[3] Announcing TypeScript 1.5, 20 Jul 2015, http://blogs.msdn.com/b/typescript/archive/2015/07/20/announcing-typescript-1-5.aspx

[4] TypeScript 1.5正式发布:深度支持ECMAScript, 2015年7月26日, http://www.infoq.com/cn/news/2015/07/TypeScript-ECMAScript

[5] TypeScript的崛起, 2015年4月13日, http://www.infoq.com/cn/news/2015/04/TypeScript-rise

    英文The Rise of TypeScript? March 30, 2015, http://developer.telerik.com/featured/the-rise-of-typescript/

[6] Announcing TypeScript 1.6 Beta: React/JSX, better error checking, and more, 2 Sep 2015, http://blogs.msdn.com/b/typescript/archive/2015/09/02/announcing-typescript-1-6-beta-react-jsx-better-error-checking-and-more.aspx

© 著作权归作者所有

共有 人打赏支持
一配
粉丝 34
博文 137
码字总数 94295
作品 0
西城
私信 提问
TypeScript 0.9 正式版发布

去年 10 月,微软发布了 TypeScript 的首个公开版本。今天 TypeScript 经过一个预览版后,正式发布了 0.9 里程碑版本。 TypeScript 0.9 包含很多新特性,包括对语言本身特性的扩充以及改善和...

oschina
2013/06/19
1K
14
TypeScript 1.5 Alpha 发布,微软脚本语言

TypeScript 1.5 Alpha 发布,该版本提供更好的 ES6 体验、修饰器以及一个全新的 Sublime 插件。TypeScript 1.5 Alpha 的新特性说明请点击我 。 TypeScript 1.5 Alpha 已经提供下载: https:...

oschina
2015/04/03
2.4K
11
TypeScript手册翻译系列3-类

类 传统的JavaScript语言基于函数和原型链继承机制的方式构建可重用的组件,但这对于OO编程人员来说显得比较笨拙,因为是在类的基础上来继承。从JavaScript标准ECMAScript 6开始可以采用面向...

一配
2015/08/17
0
0
TypeScript系列 - 什么是TypeScript

看了很多关于TypeScript的文章,总体说来没有很好的,一个系统的学习TypeScript的资源。 接下来,我将给大家带来TypeScript的系列,让你和我一样,一步一步的学习TypeScript,并且学以致用。...

Hongten
08/02
0
0
TypeScript手册翻译系列5-函数

函数 函数是JavaScript中任意应用程序的基本构件块。可以在函数基础上建立抽象层,模拟类,信息隐藏,模块。在TypeScript中,虽然已经有类和模块,但函数函数仍然扮演着如何做事的关键角色。...

一配
2015/09/05
0
2

没有更多内容

加载失败,请刷新页面

加载更多

【转载】缓存穿透,缓存击穿,缓存雪崩解决方案分析

前言 设计一个缓存系统,不得不要考虑的问题就是:缓存穿透、缓存击穿与失效时的雪崩效应。 缓存穿透 缓存穿透是指查询一个一定不存在的数据,由于缓存是不命中时被动写的,并且出于容错考虑...

xiaomin0322
15分钟前
0
0
Maven: Non-resolvable import POM:Failure to find *** in *** was cached in the local repository.

clean or package spring cloud 项目时,IDE 打印如下报错: Non-resolvable import POM: Failure to find org.springframework.cloud:spring-cloud-dependencies:pom:Greenwich.M3 in https......

AmosWang
18分钟前
0
0
性能优化(性能优化概述)

软件系统质量特性 安全性 同时兼顾向合法用户提供服务,以及阻止非授权使用软件及资源的能力。 健壮、可靠 软件系统在一定的时间内无故障运行的能力、容错能力、恢复能力 。 可用性、易用性、...

这很耳东先生
22分钟前
0
0
ZooKeeper命令大全

创建节点 # 创建节点,-s表示顺序节点,-e表示临时节点,默认是持久节点create [-s] [-e] path data acl # 示例create /zk-book 123 查看节点 ls path [watch] # 示例ls /zk-book 获取...

爱宝贝丶
32分钟前
2
0
Elasticsearch节点角色类型node.master和node.data说明s

一般地,ElasticSearch集群中每个节点都有成为主节点的资格,也都存储数据,还可以提供查询服务。这些功能是由两个属性控制的(node.master和node.data)。默认情况下这两个属性的值都是tru...

傲娇字符
48分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部