初始化工程

针对使用npm的用户：

npm install -g typescript

安装依赖项

npm install -g gulp-cli

全局安装TypeScript和Gulp。（如果你正在使用Unix系统，你可能需要使用 sudo命令来启动npm install命令行。）

npm install --save-dev typescript gulp gulp-typescript

安装typescript，gulp和gulp-typescript到开发依赖项。

npm install --save-dev browserify tsify vinyl-source-stream

tsify是Browserify的一个插件能够访问TypeScript编译器。

vinyl-source-stream会将Browserify的输出文件适配成gulp能够解析的格式，它叫做 vinyl。

npm install --save-dev watchify gulp-util

Watchify启动Gulp并保持运行状态，当你保存文件时自动编译。帮你进入到编辑-保存-刷新浏览器的循环中。

npm install --save-dev gulp-uglify vinyl-buffer gulp-sourcemaps

Uglify帮你压缩代码，将花费更少的时间去下载它们。

npm install --save-dev babelify babel-core babel-preset-es2015 vinyl-buffer gulp-sourcemaps

安装Babelify和ES2015的Babel预置程序。和Uglify一样，Babelify也会混淆代码，因此我们也需要vinyl-buffer和gulp-sourcemaps。

简单的例子

新建一个tsconfig.json文件：

{
    "files": [
        "src/main.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es2015"
    }
}

将ES2015及以上版本的代码转换成ES5和ES3。

新建gulpfile.js文件

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var tsify = require('tsify');
var sourcemaps = require('gulp-sourcemaps');
var buffer = require('vinyl-buffer');
var paths = {
    pages: ['src/*.html']
};

gulp.task('copyHtml', function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest('dist'));
});

gulp.task('default', ['copyHtml'], function () {
    return browserify({
        basedir: '.',
        debug: true,
        // 让 tsify在输出文件里生成source maps。
        entries: ['src/main.ts'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .transform('babelify', {
        presets: ['es2015'],
        extensions: ['.ts']
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('dist'));
});

当 default执行时，copy-html会被首先执行。将src下所有的HTMLcopy到dist目录下

source maps允许我们在浏览器中直接调试TypeScript源码，而不是在合并后的JavaScript文件上调试。点击查看浏览器调试TypeScript

Watchify启动Gulp并保持运行状态，当你保存文件时自动编译。帮你进入到编辑-保存-刷新浏览器的循环中。

Uglify帮你混淆压缩代码

在src目录下新建一个index.html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello World!</title>
    </head>
    <body>
        <p id="greeting">Loading ...</p>
        <script src="bundle.js"></script>
    </body>
</html>

在src目录下新建一个greet.ts文件

export function sayHello(name: string) {
    return `Hello from ${name}`;
}

在src目录下新建一个main.ts文件

import { sayHello } from "./greet";

function showHello(divName: string, name: string) {
    const elt = document.getElementById(divName);
    elt.innerText = sayHello(name);
}

showHello("greeting", "TypeScript");

最后我们运行