快速上手

1.tsc

在命令行上，运行TypeScript编译器：

tsc greeter.ts

转换Ts代码为Js代码

2.类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式

function greeter(person: string) {
    return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);

如果传入数组，会报错：

3.接口

允许我们在实现接口时候保证包含了接口要求的结构

interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.innerHTML = greeter(user);

不满足接口时候，编译会报错：

4.类

TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程

在构造函数的参数上使用public等同于创建了同名的成员变量。 class, interface中换行使用;

class Strudent {
    hashKey: string;
    constructor (public name: string, public love: string) {
        this.hashKey = name + love + 'hash';
    }
}
interface Person {
    name: string;
    love: string;
    hashKey: string
}
function greeter(person: Person) {
    return "Hellp, " + person;
}
let user = new Strudent('czf', 'miku');
document.body.innerHTML = greeter(user)

使用Gulp以及相关插件进行Ts编译

1.安装gulp

npm install -g gulp-cli
npm install --save-dev gulp gulp-typescript

2.建立tsconfig.json

{
    "files": [
        "start/learn01.ts"
    ],
    "compilerOptions": {
        "noImplicitAny": true,//不允许隐式的any类型
        "target": "es5", //目标语言
    }
}

3.建立gulpfile.js

var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");
gulp.task("default", function () {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest("dist"));
});

此时在根目录下可以使用gulp进行编译

4.模块化代码

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

import { sayHello } from "./greet";
console.log(sayHello("TypeScript"));

tsconfig.json

{
    "files": [
        "start/learn01.ts",
        "start/person.ts",
        "start/student.ts",
        "start/common/printinfo.ts",
    ],
    "compilerOptions": {
        "noImplicitAny": true,//不允许隐式的any类型
        "target": "es5", //目标语言
    }
}

Browserify

将所有文件捆绑为一个文件

安装相关包

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

tsify是Browserify的一个插件，就像gulp-typescript一样，它能够访问TypeScript编译器
vinyl-source-stream会将Browserify的输出文件适配成gulp能够解析的格式

重写gulpfile.js

var gulp = require("gulp")
var ts = require("gulp-typescript")
var browserify = require('browserify')
var source = require('vinyl-source-stream')
var tsify = require('tsify')
var paths = {
    pages: ['start/*.html']
}
gulp.task('copy-html', function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist"))
})
gulp.task('default', gulp.series('copy-html', function () {
    return browserify({
        basedir: '.',
        debug: true,
        entries: ['start/learn01.ts'],
        cache: {},
        packageCache: {}
    })
    .plugin(tsify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest("dist"));
}))

不要用Gulp3的方式指定依赖任务，你需要使用gulp.series和gulp.parallel，因为gulp任务现在只有两个参数。 gulp.series：按照顺序执行
gulp.paralle：可以并行计算

gulp.task('my-tasks', gulp.series('a', 'b', 'c', function() {
  // Do something after a, b, and c are finished.
}));

gulp.task('build', gulp.parallel('styles', 'scripts', 'images', function () {
  // Build the website.
}));

Watchify，Babel和Uglify

Watchify

我们启动Watchify，让它在后台帮我们编译：

npm install --save-dev watchify gulp-util

var gulp = require("gulp")
var watchify = require("watchify");
var browserify = require('browserify')
var source = require('vinyl-source-stream')
var tsify = require('tsify')
var gutil = require("gulp-util");
var paths = {
    pages: ['start/*.html']
}
var watchedBrowserify = watchify(browserify({
    basedir: '.',
    debug: true,
    entries: ['start/learn01.ts'],
    cache: {},
    packageCache: {}
}).plugin(tsify));
gulp.task('copy-html', function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist"))
})
function bundle() {
    return watchedBrowserify
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest("dist"));
}
gulp.task('default', gulp.series('copy-html', bundle))
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", gutil.log);

Uglify

首先安装Uglify。因为Uglify是用于混淆你的代码，所以我们还要安装vinyl-buffer和gulp-sourcemaps来支持sourcemaps。

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

var gulp = require("gulp")
var watchify = require("watchify");
var browserify = require('browserify')
var source = require('vinyl-source-stream')
var tsify = require('tsify')
var gutil = require("gulp-util");
var uglify = require('gulp-uglify');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var paths = {
    pages: ['start/*.html']
}
var watchedBrowserify = watchify(browserify({
    basedir: '.',
    debug: true,
    entries: ['start/learn01.ts'],
    cache: {},
    packageCache: {}
}).plugin(tsify));
gulp.task('copy-html', function () {
    return gulp.src(paths.pages)
        .pipe(gulp.dest("dist"))
})
function bundle() {
    return watchedBrowserify
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest("dist"));
}
gulp.task('default', gulp.series('copy-html', bundle))
watchedBrowserify.on("update", bundle);
watchedBrowserify.on("log", gutil.log);

Babel

首先安装Babelify和ES2015的Babel预置程序。和Uglify一样，Babelify也会混淆代码，因此我们也需要vinyl-buffer和gulp-sourcemaps。默认情况下Babelify只会处理扩展名为 .js，.es，.es6和.jsx的文件，因此我们需要添加.ts扩展名到Babelify选项。

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

快速开始学习