【译】TypeScript 2.2 候选版发布

TypeScript 2.2即将到来,今天我们发布候选版!

如果你是第一次听说TypeScript,那不要紧的,因为TypeScript是一门在JavaScript的基础上添加可选静态类型的语言。基于JavaScript构建,意味着你不需要学习JavaScript以外太多的知识,并且所有现有的代码你也可以使用TypeScript。同时,TypeScript添加的可选类型可以帮助您捕获讨厌的bug,还有通过启用强大的工具支持能提高工作效率。

今天就试试候选版本,你可以使用NuGet获取,或者使用npm运行

npm install -g typescript@rc

您还可以获取Visual Studio 2015的TypeScript版本候选版本(如果已经安装了Update 3)。对其它编辑器的支持得等到我们正式的2.2版本,但你可以看看在Visual Studio CodeSublime Text 3中如何启用更高版本的TypeScript的指南。

为了告诉你新增了哪些特性,这里有几个值得注意的特性来了解此候选版本。

object类型

有些时候,一个API允许你传递除基本类型外任何类型的值。例如,思考Object.create,除非你传递一个对象或null给第一个参数,否则它抛出一个异常。

// 所有这些在运行时都会抛出错误!
Object.create(undefined);
Object.create(1000);
Object.create("hello world");

如果我们试图想出第一个参数的类型,一个简单的方法可能是Object | null。不幸的是,这并不完全奏效。由于结构类型在TypeScript中工作的方式,numberstringboolean都属于Object

为了解决这个问题,我们创建了新的object类型(注意所有这些字母都是小写的!)。
一个更直白的名称可以叫“非基本”类型。

object类型是“空” – 它没有属性,就像{}类型。
这意味着几乎一切都可以分配给object,除了基本类型外。
换句话说,将与numberbooleanstringsymbolnullundefined类型不兼容。

但这意味着我们现在可以正确地将Object.create的第一个参数类型作为object | null

我们预期object基本类型将帮助捕获一大类bug,并更准确地模拟真实世界规范。

我们非常感谢Herrington Darkholme的援手实现这个特性!

改进了对mixins和组合类的支持

mixin模式在JavaScript生态系统中相当常见,在TypeScript 2.2中,我们对语言进行了一些调整,以更好地支持它。

为了做到这一点,我们在TypeScript 2.2中删除了对类的一些限制,就像能够从构造交集类型的值中扩展一样。它还以交集类型上的签名组合的方式调整一些功能。结果是你可以写一个函数

  1. 接受构造函数
  2. 声明一个继承该构造函数的类
  3. 向该新类添加成员
  4. 并返回类本身。

例如,我们可以编写接受一个类的Timestamped函数,并通过添加一个timestamp成员来扩展它。

/** Any type that can construct *something*. */
export type Constructable = new (...args: any[]) => object;

export function Timestamped<BC extends Constructable>(Base: BC) {
 return class extends Base {
 timestamp = new Date();
 };
}

现在我们可以使用任何类通过Timestamped,快速组成一个新的类型。

class Point {
 x: number;
 y: number;
 constructor(x: number, y: number) {
 this.x = x;
 this.y = y;
 }
}

const TimestampedPoint = Timestamped(Point);

const p = new TimestampedPoint(10, 10);
p.x + p.y;
p.timestamp.getMilliseconds();

类似地,我们可以写一个Tagged函数来添加一个tag成员。这些函数实际上使得很容易组合扩展。制作一个带有标签和时间戳的特殊3D点是相当干净的。

class SpecialPoint extends Tagged(Timestamped(Point)) {
 z: number;
 constructor(x: number, y: number, z: number) {
 super(x, y);
 this.z = z;
 }
}

新的JSX生成模式:react-native

在TypeScript 2.1和更早版本中,--jsx编译参数可以使用两个值:

  • preserve 保留JSX语法,并生成.jsx文件。
  • react 将JSX转换为对React.createElement的调用并生成.js文件。

TypeScript 2.2有一个新的JSX生成模式称为react-native,它处于中间位置。在这个方案下,保留JSX语法,但生成.js文件。

这个新模式包含React Native的加载器,它希望所有输入的文件都是.js文件。它既能满足你保留JSX语法又可以从TypeScript获取.js文件的情况。

下一步

我们无法在本篇博客中列出我们工作的一切,你可以在TypeScript Roadmap中看看还有哪些特性。

我们期望您的反馈帮助TypeScript 2.2固定版本的发布!
如果你遇到任何可能的bug,请随时在这里留下反馈,或在GitHub上提出问题

1.学习TypeScript——使用VS Code搭建TypeScript开发环境

前言

TypeScript和VSCode已经成为了2016年前端开发最流行的开发语言和开发工具之一,更多请看2016年JavaScript流行详情。使用TypeScript语言开发的类库和框架也越来越多,鼎鼎大名的Google的Angular 2中文网)项目就是使用TypeScript作为主要的开发语言的(还有JS版本和Dart版本)。

现在浏览器显然已经不能满足了JS了,很多App也开始使用JS开发了,使用基于TypeScript的IonicNativeScript能够快速高效地帮助你开发APP。

TypeScript是JavaScript的超集,TypeScript只是增强了JavaScript而非改变了JavaScript,TypeScript同样也是基于ECMAScript标准的编程语言。因此非常流行的Vue和React及我们常用Jquery等类库都可以使用TypeScript来编码,TypeScript强大的智能类型分析系统,能够使你的代码更加强壮。

说了这么多TypeScript的优点,下面让我们来学习如果在VScode中使用TypeScript开发项目吧。

下载TypeScript

TypeScript官网中文网)提供了多种下载方式,我们使用NPM来下载TypeScript,如果你没有安装NPM,请到Nodejs官网进行安装。

在CMD(Windows系统)或者终端(macOS系统)中输入一下命令:

npm install -g typescript

安装完毕后我们输入tsc -v可以查看当前安装的TypeScript版本号。当前最新的版本是2.1.5。

下载VSCode

VSCode是我使用过最棒的编辑器没有之一,比Sublime Text还有优秀。

VSCode官网就可以下载相应系统的VSCode安装包,最新的VSCode版本是1.9。

VSCode下载图

创建项目

创建目录

首先我们创建一个项目文件夹,比如叫ts_vscode,然后创建一些主要目录,在VSCode中打开项目,在macOS上我们可以直接使用命令来操作:

# 创建ts_vscode及主要文件夹
mkdir -p ts_vscode/src/{css,images,fonts}

# 使用VSCode打开
code ts_vscode

目录结构:

ts_vscode/
    └─src/
        ├─ css/
        ├─ fonts/
        └─ images/

创建package.json

使用命令npm init来创建package.json文件,一般默认就可以,具体详情可以看这里

创建

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    └─ package.json

创建tsconfig.json

使用tsc --init命令就可以快速创建一个tsconfig.json文件,关于tsconfig.json的属性描述请访问这里

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    ├─ package.json
    └─ tsconfig.json

安装项目依赖和开发依赖

我们的这个项目使用jQuery和Bootstrap来做,因此我们使用npm来安装:

npm install jquery bootstrap --save

我们的项目使用了TypeScript来开发,因此我们需要下载相对应的声明文件,关于声明文件请访问这里。安装声明文件命令:

npm install @types/jquery @types/bootstrap -save-dev

创建index.html

ts_vscode目录下创建index.htmlindex.html文件中放入下面的代码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TypeScript with VSCode</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="./src/css/index.css">
</head>

<body>
  <h1 class="text-center"></h1>
  <div class="container">
    <div class="row show-grid">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row show-grid">
      <div class="col-md-6">
        <button type="button" class="btn btn-default" aria-label="Left Align">
          <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
        </button>
      </div>
      <div class="col-md-6">
        <button type="button" class="btn btn-default btn-lg">
          <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
        </button>
      </div>
    </div>
  </div>
  <!-- /.modal -->
  <!-- js -->
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="./src/index.js"></script>
</body>

</html>

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    └─ images/
    ├─ index.html
    ├─ package.json
    └─ tsconfig.json

创建index.ts文件并编写TS代码

src目录下创建index.ts文件。我们使用TS编写一个类,并使用这个类的方法向index.htmlh1标签中插入一句话,代码如下:

class Main {
    constructor() {

    }

    name: string;

    show(text: string): void {
        let $ele: JQuery = $("h1");
        $ele.text(text);
    }
}

let main = new Main();
main.name = "Hello TypeScript";
main.show(main.name);

目录结构:

ts_vscode/
    ├─ src/
    │    ├─ css/
    │    ├─ fonts/
    │    ├─ images/
    │    └─ index.ts
    ├─ index.html
    ├─ package.json
    └─ tsconfig.json

编译和启动项目

我们使用package.json中的scripts来编译和启动项目。

编译比较简单,tsc命令就可以编译项目,tsc -w命令监控并自动编译,编译会使用tsconfig.json中的配置项。

启动项目我们安装live-server,来帮助我们启动一个服务器环境,live-server非常轻便且带有自动刷新功能,我们使用npm全局安装即可:

npm install -g live-server

安装完毕后,我们修改package.json中的scripts如下:

"scripts": {
    "test": "tsc -w & live-server"
}

最终目录结构:

最终目录结构

最后我们在终端中输入npm t就可以启动项目了,启动成功后如下图:

启动项目成功

尝试改变项目文件,你可以发现浏览器会自动编译和自动刷新哦。

总结

本文章我们认识了VSCode和TypeScript,学会了基本的安装和编译及简单的TypeScript代码编写。本篇文章的示例代码请访这里

下篇文章我们将学习如何构建打包TypeScript项目。

[译]TypeScript 2.0 Beta发布

今天我们非常兴奋地推出了TypeScript 2.0 beta版。如果你还不熟悉TypeScript,现在你就可以去我们的网站上学习。

获取beta版,你可以下载TypeScript 2.0 Beta for Visual Studio 2015 (此更新需要VS 2015 Update 3),或者运行

npm install -g typescript@beta

这个版本包含大量新特性,如新的方式获取.d.ts文件,但是这里的一些特性仅仅是对其了解。

非空类型

nullundefined是JavaScript bugs中最常见的两个来源。在TypeScript 2.0 之前,nullundefined存在每一类型域中。这意味着如果你有一个带有string类型参数的函数,你不能肯定是单一类型的,实际上有可能是string类型,也有可能是null类型。

在TypeScript 2.0,新的--strictNullChecks编译参数改变这一不确定性。string类型就是string类型,number类型就是number类型。

let foo: string = null; // 错误!

如果你为空呢?我们已经带来两个新的类型:nullundefined。正如你所料,null仅仅是null,undefined仅仅是undefined。对它们自己而言作用不大,但是你可以在联合类型中使用它们去定义是否可以包含null/undefined

let foo: string | null = null; // 正确!

由于作为开发者的你可能经常比编辑器的类型系统懂得更多,因此我们还推出了一个后缀操作符!,这个操作符可以从任何一个表达式从排除nullundefined

declare let strs: string[] | undefined;

// 错误! 'strs' 也许是undefined.
let upperCased = strs.map(s => s.toUpperCase());

// 'strs!' 意味着我们确定它不是'undefined', 因此我们可以调用'map'.
let lowerCased = strs!.map(s => s.toLowerCase());

基于控制流的类型分析

TypeScript对处理可空类型的支持成为可能,要归功于在整个程序中跟踪类型的变化。在2.0中,我们已经开始使用控制流分析,以便更好地了解在指定的位置是什么类型。例如,考虑下面这个函数。

/**
 * @param recipients An array of recipients, or a comma-separated list of recipients.
 * @param body Primary content of the message.
 */
function sendMessage(recipients: string | string[], body: string) {
 if (typeof recipients === "string") {
 recipients = recipients.split(",");
 }

// TypeScript 知道这里的'recipients'是'string[]'类型.
 recipients = recipients.filter(isValidAddress);
 for (let r of recipients) {
 // ...
 }
}

注意,在if块内赋值后,TypeScript知道它已经被处理成为了一个string类型的数组。这类事情可以在早期发现问题并节省你在调试上花费的时间。

let bestItem: Item;
for (let item of items) {
 if (item.id === 42) bestItem = item;
}

// 错误! 如果'items'是空的,'bestItem' 可能还没有被初始化。
let itemName = bestItem.name;

我们非常感谢Ivo Gabe de Wolff,他参与这一特性的实施工作,这也开始了他的论文项目并成长为TypeScript本身的一部分。

简易模块声明

有时候你仅仅想要告诉TypeScript有一个模块存在,并且你可能不关心它具体的内容是什么样子的。以前你要像下面这样写:

declare module "foo" {
 var x: any;
 export = x;
}

但是这样太麻烦的,因此我们使声明模块变得更加简易并且摆脱了样板。在TypeScript 2.0 中你可以这么写

declare module "foo";
declare module "bar";

当你准备好最终要写一个包含具体内容的模块时,你可以返回这些声明并定义你需要的结构。

如果你依靠一个有很多模块的软件包呢?为每一个模块书写一遍可能是痛苦的,但是TypeScript 2.0 通过使用通配符*使之变得容易。

declare module "foo/*";

现在您可以导入任何以foo/开头的路径,TypeScript会认为它存在。
你可以利用这一点,如果你的模块加载器也知道如何导入基于一个特定的模式。例如:

declare module "*!text" {
 const content: string;
 export = content;
}

现在每当你导入一个结尾带有!text的路径时,TypeScript就会知道导入的是string类型。

import text = require("./hello.txt!text");
text.toLowerCase();

关于模块这一部分,博客描述的太简单了,很多人可能不能明白,建议看看GitHub上的这部分内容

下一步

你可能想知道的一个特性是在ES3和ES5中支持async/await,最初,这是定于2.0版本。然而,合理的实现async/await,我们需要重写TypeScript的emitter,这会引起一系列的变化。这样做的同时还要保持TypeScript快速更新,就需要大量的工作和对细节的关注。虽然我们对于今天的实现充满了信心,但是信心不是彻底的测试,并且需要更多的时间用于async/await的稳定。你可以在TypeScript 2.1 中期待它的出现,如果你想要跟踪进度,在GitHub上的Pull request当前是公开的

TypeScript 2.0 还充满了许多有用的新功能,随着时间的推移我们将推出更多细节。如果你想听到更多的新特性,你可以看一下我们的wiki。在未来的几周内,一个更加稳定的候选版本将发布,随后最终的正式版将会发布。

我们很乐意听听你的任何反馈,无论是在下面的评论或GitHub上。黑客快乐!