原文地址: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. 直接通过Ajax 处理程序加 Action名,取得变量值。

    var set_value;$(document).ready(function () {            var query = createParam('GetValue', '0');   ...

  2. 调试SQLSERVER (三)使用Windbg调试SQLSERVER的一些命令

    调试SQLSERVER (三)使用Windbg调试SQLSERVER的一些命令 调试SQLSERVER (一)生成dump文件的方法调试SQLSERVER (二)使用Windbg调试SQLSERVER ...

  3. select * from table 时间长

    优化中发现一个存储过程执行20秒通过profiler 抓取发现时间主要消耗在一个select * from 表,那么问题来了select几万数据竟然花了将近20秒? 问题排查清了程序前端使用了data ...

  4. SQL SERVER 内存学习系列(二)-DMV查看内存信息

    内存管理在SQL Server中有一个三级结构.底部是内存节点,这是最低级的分配器,用于SQL Server的内存.第二个层次是由内存Clerk组成,这是用来访问内存节点和缓存存储,缓存存储则用于缓存 ...

  5. 循序渐进做项目系列(1):最简单的C/S程序——让服务器来做加法

    (本文是专门针对未接触过C/S开发的初学者而写的,C/S开发高手请自动忽略啊~~) 还在写“Hello world!”式的单机程序吗?还在各种拖控件吗?是否自己都觉得有点low呢?来个质的飞跃吧!看看 ...

  6. angularjs组件之input mask

    今天将奉献一个在在几个angularjs项目中抽离的angular组件 input mask.在我们开发中经常会对用户的输入进行控制,比如日期,货币格式,或者纯数字格式之类的限制,这就是input m ...

  7. java提高篇(二十)-----集合大家族

          在编写java程序中,我们最常用的除了八种基本数据类型,String对象外还有一个集合类,在我们的的程序中到处充斥着集合类的身影!java中集合大家族的成员实在是太丰富了,有常用的Arra ...

  8. Windows 安装 MongoDB 服务

    第一步 以管理员权限打开命令提示符 按Windows+R键(Ctrl和Alt中间的那个,有微软Logo的键),输入cmd打开命令提示符 第二步 创建数据库目录. 使用mkdir命令,创建数据库的目录和 ...

  9. jQuery 绑定事件到动态创建的元素上

    在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...

  10. 【译】用jQuery 处理XML--写在前面的话

    用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...