学习TypeScript:初体验

TypeScript 是一种由微软开发的自由和开源的编程语言,它是 JavaScript 的一个超集,添加了类,模块,接口三种特性。

官网地址:http://www.typescriptlang.org/

另附上大神安德斯·海尔斯伯格( Delphi 和 C# 之父,.NET 创立者)长达53分钟的TypeScript讲解视频

我的系统环境是 win7-64bit+Git+Node.js+Npm+SublimeText3,以下操作以此为准。

安装

使用 Node.js 的 npm 包管理工具安装 TypeScript:npm install -g typescript。(Node.js安装参考

使用 Git 安装 SublimeText3 插件:

  1. 先进入 SublimeText3 的包管理文件夹,如果不知道,打开 SublimeText3;使用 Ctrl+Shift+P 打开命令面板,找到Browse Packages,回车后就能打开管理文件夹;我的是C:\Users\Elegant\AppData\Roaming\Sublime Text 3\Packages
  2. 在文件夹鼠标右键打开 Git Bash,输入git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript,运行后,就能从 GibHub 上把插件下载到包管理文件夹;重启 SublimeText3,如果在命令面板能搜索到 TypeScript 相关的命令,说明插件安装成功。

第一个TS文件

在 SublimeText3 上新建 greeter.ts 文件,代码如下:

然后按 Ctrl+B 编译文件,弹出编译选项
compile-TS

Build parameters 中填写你要编译的 TypeScript 文件名,不带后缀(也可以不填),编译后的 JavaScript 文件与 TypeScript 文件在同一目录下,编译结果:

脱离浏览器运行JS

如果你的 JavaScript 代码只有核心语法,不含 DOM 与 BOM,那其实就是 Node.js 的一部分,所以可以脱离浏览器,直接在 SublimeText3 中运行得到结果。
点击 SublimeText3 中的Tools>Build System>New Build System...打开一个文件,在其中输入:

保存时的文件名为 nodejs,选项中出现 nodejs 即是成功:
nodejs-compile

在 greeter.js 文件中按Ctrl+B,即可输出结果:
build-nodejs

参数类型限制

将 greeter.ts 修改,为参数添加类型限制:

然后我们赋一个非 string 的值给变量user

在 SublimeText3 中,已经有类型不相符的提示:
参数类型不符
如果编译,会出现提示error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
但是,这并不会终止编译,因为 JavaScript 原本就是弱类型,参数类型限制只是给开发者的提醒而已。

接口

就以上代码而言,接口其实也是一种类型限制,只不过以上代码的类型是一个对象(OOP 中的对象,不是 JavaScript 中的对象类型),编译结果:

JavaScript 没有那种经典形式的类,只有用对象类型模拟出来的类,所以编译结果是:

运行结果:Hello, Lai Chuanfeng

文后小结

用 TypeScript 编写程序,你不会感觉你是在编写脚本语言,而是在使用那种经典的 OOP 语言(C#,java,php)。TypeScript 弥补了JavaScript 中很大的不足,即面向对象的残缺。截止目前,TypeScript 的最新版本是1.5.3,涵盖了 ES6 中 60% 的新语法,并且从 Angular 2.0 开始,使用TypeScript 开发。所以,拥抱 ES6,拥抱 TypeScript 吧!
另附译文:我用 TypeScript 语言的七个月

发表评论