写点什么

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

  • 2015-09-28
  • 本文字数:1596 字

    阅读完需:约 5 分钟

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”作为标志,根据用户定义来返回布尔值或其他值。该特性不仅允许typeofinstanceof检查,而且允许接口和定制化的分析。

为了更好的支持不同类型之间的混合以及扩展现有的类,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 读者交流群InfoQ 好读者)。

2015-09-28 19:006758
用户头像

发布了 268 篇内容, 共 121.7 次阅读, 收获喜欢 24 次。

关注

评论

发布
暂无评论
发现更多内容

传统微服务框架如何无缝过渡到服务网格 ASM

阿里巴巴云原生

阿里云 微服务 云原生 Service Mesh 服务网格 服务网格

K8S V1.23 安装--Kubeadm+contained+公网 IP 多节点部署

云原生 k8s Kubernetes 集群

穿越过后,她说多元宇宙真的存在

白洞计划

基于Hadoop豆瓣电影数据分析(代码+原理)

王小王-123

大数据 数据分析 基于Hadoop豆瓣电影

初识Hadoop之概念认知篇

王小王-123

hadoop hadoop概念

在Hadoop环境里面统计西游记文章的词组(hdfs实验)

王小王-123

mapreduce hadoop统计词频 hadoop项目 文本统计分析

架构实战营模块5作业

挖了蘑菇哩斯

架构实战营

架构实战营模块 5 作业

Roy

架构实战营

微博系统中”微博评论“的高性能高可用计算架构

Geek_e8bfe4

“微博评论”的高性能高可用计算架构

Pengfei

Seata 与三大平台携手编程之夏,百万奖金等你来拿

阿里巴巴云原生

阿里云 开源 云原生 seata

【值得收藏】HTML5使用多种方法实现移动页面自适应手机屏幕的方法总结

迷彩

前端 自适应 HTML5, CSS3 6月月更

云技能提升好伙伴,亚马逊云师兄今天正式营业

亚马逊云科技 (Amazon Web Services)

亚马逊云

HashMap分析-新增

zarmnosaj

6月月更

声网自研传输层协议 AUT 的落地实践丨Dev for Dev 专栏

声网

Dev for Dev 网络传输

Jetpack之Room的使用,结合Flow

yechaoa

android flow JetPack 6月月更 Room

Dart 开发技巧

Geek_0a3437

flutter android dart 6月月更

Flutter 中的 ValueNotifier 和 ValueListenableBuilder

坚果

flutter dart 6月月更

M1笔记本居家办公的痛点及解决方案 | 社区征文

IT蜗壳-Tango

6月月更 初夏征文

远程沟通高效的自我总结| 社区征文

卢卡多多

初夏征文

@Scheduled注解的坑,我替你踩了

慕枫技术笔记

后端 6月月更

Serverless 在阿里云函数计算中的实践

阿里巴巴云原生

阿里云 Serverless 云原生 函数计算

淘宝数据可视化大屏案例(Hadoop实验)

王小王-123

海量数据 大数据分析 淘宝项目 hadoop实验 hive项目

淘宝大数据分析案例(百万数据集Hadoop项目)

王小王-123

大数据分析 淘宝大数据 淘宝业务数据 淘宝项目可视化

[译]在软件开发行业工作 6 年后,那些年我曾改过的观念

宇宙之一粟

感悟 6月月更

我们如何拿到自己满意的薪资呢?这些套路还是需要掌握的

看山

闲聊

利用Docker极速下载OpenJDK11源码

程序员欣宸

Docker Openjdk 6月月更

什么是IGMP?IGMP与ICMP有啥区别?

wljslmz

网络协议 6月月更 IGMP 组播

基于学生选课数据库分析(Hadoop实验)

王小王-123

hadoop 大数据分析 学生选课项目 数据库项目

小心transmittable-thread-local的这个坑

看山

Java’

阅读Skeleton.css源码,改善睡眠质量(尽管它只有419行代码)

德育处主任

CSS 源码 前端 6月月更 skeleton.css

TypeScript 1.6发布:完全支持React/JSX_JavaScript_张天雷_InfoQ精选文章