5分钟上手TypeScript
初始化工程
针对使用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");
最后我们运行
gulp
然后在浏览器里打开dist/index.html
