原文地址:http://www.moye.me/2015/04/25/using_typescript/

入 TypeScript 坑有一段时间了,由衷的看好,所以决定在自留地絮叨一番。

是什么

TypeScript (以下简称TS)是巨硬推出的JavaScript转译语言,这意味着:

  1. 它需要编译
  2. TS代码会被编译成JavaScript代码

TS的特点是提供 模块、类、接口等一系列类型概念,协助开发者在编译时就定位出一些传统JavaScript项目的运行时错误,以实现巨硬所谓的”Robust components”(值得一提的是,TS是大名鼎鼎的 Anders Hejlsberg 主导的项目。

为什么

JavaScript 一般被视为一种动态类型、弱类型的语言,它拥有巨大的灵活性。 如下所示,类型的变化并不受约束:

var x = 10;
console.log(typeof x); // result -> number
x = 'hello';
console.log(typeof x); // result -> string

那么TS引入的类型概念,又为哪般呢?来看一个示例:

我有一个求和的函数

function sum(x, y){
return x + y;
}

但是你也可以这么用,JavaScript没有意见,虽然结果不合理:

sum(100, 'hello'); // result -> 100hello

于是,我们用TS这样的限定,保证以上调用是通不过编译的(输入都是number,返回也必须是number:

function sum(x:number, y:number):number {
return x + y;
}

因为我们坚信,对一个数字和一个字符串进行求和,不是一种理智的需求;修改过后,sum求和的结果便是可信的了。

类示例

在 Node 中,因为流和事件机制的强大,很多时候我们都会让自己的类去继承 events.EventEmitter,JS代码看起来就像是这样:

var events = require('events');
var util = require('util'); function MyClass(){
events.EventEmitter.call(this);
} util.inherits(MyClass, events.EventEmitter);

如果你熟悉Node的一套理论,倒也还好,但其实用TS,能写出更优雅的代码:

import events = require('events');
import util = require('util'); export class MyClass extends events.EventEmitter{
constructor(){
super();
}
}

具体的语法规范这里不做解释,有兴趣的可以参考官方的 Specification

这里想说的是,TS生成的JS代码质量很高,上述片断生成的代码(闭包防污染也考虑到了:

var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var events = require('events');
var MyClass = (function (_super) {
__extends(MyClass, _super);
function MyClass() {
_super.call(this);
}
return MyClass;
})(events.EventEmitter);
exports.MyClass = MyClass;

在WebStorm中使用

鄙人已退 Windows 开发保平安,也就只能说说WebStorm的使用问题了:

首先,你得有一个TS编译器 

npm install -g typescript

然后,在第一次新建.ts文件的时候,WebStorm会询问是否为.ts文件添加watcher,这样在文件有保存动作时,watcher会自动调用编译器去编译&生成——我的选择是“否”:稍微复杂一点的项目都会使用Grunt/Gulp之类的自动化构建工具,编译也就会纳入为构建的一份子,那么以Grunt为例,编译这事交给 grunt-ts 就再合理不过了。grunt-ts配置示例:

ts: {
default: {
src: ['**/*.ts', '!node_modules/**/*.ts'],
target: 'es5',
outDir: '/repo/releases',
options: {
fast: "never",
module: "commonjs",
sourceMap: false,
suppressImplicitAnyIndexErrors: true,
preserveConstEnums: true
}
}
}

TS 在对待import require的库时,有它自己的一套理论:它需要一个.d.ts文件来说明引用库的Schema,比如引用underscore:

import underscore = require('underscore');

那么在项目中,需要存在一个 underscore.d.ts,其中声明这么一句(完整示例请参考underscore.d.ts

declare module "underscore" {
export = _; //...
}

然后在引用的地方声明一个.d.ts,引入:

///<reference path="underscore.d.ts"/>

如此一来,方可正确通过编译,亦能得到WebStorm的智能提示。当然,如果不爽这种麻烦的引用,也可以不用import,直接使用如下形式来跳过TS检查:

var underscore = require('underscore');

一般而言,知名的第三方库,都能在 DefinitelyTyped 项目中找到 .d.ts,而WebStorm亦提供了快捷引用方式:

Preferences -> Languages & Frameworks -> Libraries -> Downloads… -> TypeScript community stubs,选你所需 Download & Install:

参考

  1. TypeScript Handbook:online version

更多文章请移步我的blog新地址: http://www.moye.me/

[Node.js] 使用TypeScript编写Node项目的更多相关文章

  1. Node.js && Angular && TypeScript 环境安装与更新

    安装 Node.js 下载并安装Node.js Angular 执行命令 npm install -g @angular/cli 参考资料: angular quickstart TypeScript ...

  2. 初识node.js(通过npm下载项目依赖的包的过程)

    一.初识node.js 简单的说Node.js 就是运行在服务器端的JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事 ...

  3. 【Visual Studio Code 】使用Visual Studio Code + Node.js搭建TypeScript开发环境

    1.准备工作 Node.js Node.js - Official Site Visual Studio Code Visual Studio Code - Official Site 安装Node. ...

  4. 使用Visual Studio Code + Node.js搭建TypeScript开发环境

    Visual Studio Code搭建Typescript开发环境 —— 相关文章: http://www.cnblogs.com/sunjie9606/p/5945540.html [注意:这里仅 ...

  5. Node.js的安装以及Node.js的模块管理

    索引: Node.js的安装以及Node.js的模块管理Node.js开发环境搭建以及对ES6的支持Node.js构建Vue.js项目Vue.js单文件组件的开发基于Vue.js的UI组件(Eleme ...

  6. node.js入门系列(一)--Node.js简介

    什么是NodeJS JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS,浏览器充当了解析器的角色.而对于需要独立运行的JS,NodeJS就是一个解析器. 每一种解析器都是一 ...

  7. 什么是Node.js?带你初识Node

    什么是Node.js Nodejs是一个基于Chrome v8引擎的JavaScript运行环境 Node.js使用了一个事件驱动,非阻塞式I/O的模型,使其轻量又高效. Node.js 的包管理器 ...

  8. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  9. Installing Node.js via package manager | Node.js

    Installing Node.js via package manager | Node.js   i386 (32-bit)

随机推荐

  1. 状态开关按钮(ToggleButton)和开关(Switch)

    ToggleButton支持的XML属性及相关方法1.android:checked----->setChecked(boolean) ----->设置该按钮是否被选中2.android: ...

  2. linux-13基础命令之-touch,mkdir

    1.  touch 命令 用于创建空白文件与修改文件时间,格式:touch[选项][文件]: linux 下文件时间有三种 @1.更改时间(mtime):内容修改时间: @2.更改权限(ctime): ...

  3. 管理我的数据之GDBM

    管理我的数据之GDBM 作者 He YiJun – storysnail<at>gmail.com 团队 ls 版权 转载请保留本声明! 本文档包含的原创代码根据General Publi ...

  4. MediaWiki安装与配置(Ubuntu 10.4)

    实验室准备发布一个网站,本来是准备外包给别人做的,后来自己调研了一下,发现也没有想象的复杂和困难,于是最近一周自己吭哧吭哧地把网站搭好了. 之所以使用Mediawiki,一是考虑到是以实验室发布,不想 ...

  5. maven配置阿里云镜像

    编辑%maven_home%/conf/settings.xml文件,添加 <mirror> <id>aliyun-maven</id> <mirrorOf& ...

  6. TypeScript之接口类型

    Interfaces 作为TypeScript中的核心特色之一,能够让类型检查帮助我们知道一个对象应该有什么,相比我们在编写JavaScript的时候经常遇到函数需要传递参数,可能在编写的时候知道这个 ...

  7. Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  8. 站在移动互联时代的十字路口上_deviceone

    最近总能看到类似“App已死,服务永生”.“App必死,web永生” .“App已死,微信建站已生”这样的文章.不晓得这些网络写手到底是想代表某些公司的立场.还是想要表达怎么样的一个情结,文章中语气都 ...

  9. [.net 面向对象编程基础] (23) 结束语

    [.net 面向对象编程基础] (23)  结束语 这个系列的文章终于写完了,用了半个多月的时间,没有令我的粉丝们失望.我的感觉就是一个字累,两个字好累,三个字非常累.小伙伴们看我每篇博客的时间就知道 ...

  10. 教你如何完美保存Html编辑器编辑过的文本到Word中

    有时候在网页上面编辑了一段文字,有图片,想保存一份到word文档里面,但是复制粘贴以后发现格式并没有保存下来,今天就来教大家如何完整的保存Html编辑器编辑过的文字(可以包含图片,但是图片必须是绝对路 ...