TypeScript 1.6发布：完全支持React/JSX

2012 年，微软推出了一个能够在 Node.js 上运行的开源语言——TypeScript。作为 JavaScript 的超集，TypeScript 在兼容 JavaScript 的同时，额外添加了可选的静态类型和基于类的面向对象编程，并且可用于大规模 JavaScript 应用的开发。TypeScript 一经推出便受到了广泛关注，也逐渐被很多用户所接受。微软公司也听取广大用户的反馈，不断更新 TypeScript。近日，微软再次更新 TypeScript，推出了 1.6 版本。该版本添加了对 React/JSX、类表达式以及很多新功能的支持。

首先，微软的 TypeScript 团队充分听取了来自 React 专家和团队的反馈意见。因此，新版本的 TypeScript 完全支持 React 和 JSX。MSDN 给出了一个 tsx 类型的文档作为示例。该文档中的代码如下所示。

class MyClass extends React.Component{
   render() { <p>Hello, {this.props.who}</p>; }
   props: {
       who?: string;
   } }

var x = <myclass who="hello"></myclass>;

该例子中 TypeScript 代码和 JSX 语法完美共存，使得 React 开发人员可以方便的使用 TypeScript 语言。这样，用户在使用 VS、VS Code 或者 Sublime 的时候，就可以进行 React 和 JSX 的开发。

此外，新版本 TypeScript 添加了对类表达式的支持。如下例所示，该特性使得开发人员可以在使用表达式的时候再根据需求进行类的定义。

class StateHandler extends class { reset() { return true; } } {
  constructor() {
    super();
  }
}

var g = new StateHandler();
g.reset();

在之前的版本中，开发人员可以使用 if 语句来缩小变量的类型。新版本的 TypeScript 考虑到广大用户的需求，直接增加了用户自定义守护函数的支持。

interface Animal {name: string; }
interface Cat extends Animal { meow(); }

function isCat(a: Animal): a is Cat {
 return a.name === 'kitty';
}

var x: Animal;

if(isCat(x)) {
 x.meow(); // OK, x is Cat in this block
}

守护函数采用“a is X”作为标志，根据用户定义来返回布尔值或其他值。该特性不仅允许typeof和instanceof检查，而且允许接口和定制化的分析。

为了更好的支持不同类型之间的混合以及扩展现有的类，TypeScript 1.6 版本还添加了新的类型操作符‘&’。该操作符最大的亮点在于对泛型的支持。

function extend<t u="">(first: T, second: U): T & U {
 let result = <t u=""> {};
 for (let id in first) {
   result[id] = first[id];
 }

 for (let id in second) {
   if (!result.hasOwnProperty(id)) {
     result[id] = second[id];
   }
 }
 return result;
}

var x = extend({ a: "hello" }, { b: 42 });
x.a; // works
x.b; // works </t></t>

之前，很多用户已经希望 TypeScript 能够支持抽象类。现在，新的版本终于添加了对抽象类的支持。

abstract class A {
 foo(): number { return this.bar(); }
 abstract bar(): number;
}

var a = new A();  // error, Cannot create an instance of the abstract class 'A'

class B extends A {
 bar() { return 1; }
}

var b = new b();  // success, all abstracts are defined

类别名也是之前版本的 TypeScript 已经支持的功能。但是，之前的类别名被严格限制了使用范围——只能用于确定的类。新版本 TypeScript 扩展了该功能，开始支持了泛型别名。

type switcharoo<t u=""> = (u: U, t:T)=>T;
var f: switcharoo<number string="">;
f("bob", 4);</number></t>

最后，1.6 版本的 TypeScript 还在 object literal 以及模块解析方面进行了改进。目前，用户已经可以通过官方网站下载用于 Visual Studio 2015 、Visual Studio 2013 的安装文件。而且，用户也可以通过 npm 或者 GitHub 进行下载。

感谢徐川对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作，请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博（ @InfoQ ， @丁晓昀），微信（微信号： InfoQChina ）关注我们，并与我们的编辑和其他读者朋友交流（欢迎加入 InfoQ 读者交流群）。

创作场景

TypeScript 1.6 发布：完全支持 React/JSX