typescript官网

Posted on | In | | 次阅读

ts的配置文件tsconfig.json,包含输入文件列表和编译选项
教程地址

Introduction

TypeScript具有类型系统，且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。

快速上手

了解typescript

  1. 编译代码 
    1
    2
    3
    4
    5
    6
    //greeter.ts
    function greeter(person) {
    	return "Hello," + person
    }
    let user = "Jane User"
    document.body.innerHTML = greeter(user)

编辑器运行

1
tsc greeter.ts

  1. 类型注解
    typescript提供静态的代码分析，分析代码结构和提供的类型注解，e.g:person:string
    代码错误仍可以执行

  2. 接口 interface

    1
    2
    3
    4
    5
    interface Person {
    	firstName: string;
    	lastName: string;
    }
    // person:Person

  3. 类：支持基于类的面向对象编程，可定义一个构造函数和一些公共字段

构造函数的参数上使用public等同于创建了同名的成员变量
类和接口可以一起共同作用

  1. 运行Typescript应用
    1
    2
    //greeter.html
    <script src="greeter.js"></script>

ASP.NET Core

Augular 应用

ASP.NET 4

Gulp

Gulp工程，Typescript文件放在src文件夹下，经ts编译生成的目标文件放在dist目录下

  1. 初始化工程
    init```
    1
    2
    3
    4
    5
    6
    7
    8
    入口文件为/dist/main.js
    2. 安装依赖: typescript gulp gulp-typescript
    gulp-typescript为一个插件，能够访问Typescript编译器
    3. src下创建main.ts
    4. 根目录下新建tsconfig.json：添加compilerOptions
    5. 创建gulpfile.js
    6. 测试
    更改代码后

gulp

1
![avatar]("../picture/gulp1.png")

node dist/main.js

1
2
3
4
5
6
返回运行结果

### 向代码里添加模块
导入模块：构建代码后再添加一些混入的模块
1. 在tsconfig.json中file添加模块src/greet.ts
2. 导入模块

import { sayHello } from “./greet”;

1
2
3
4
5

### Browserify：把所有的模块捆绑成一个Javascript文件
~支持Node.js的CommonJS模块~
1. 安装Browserify，tsify和vinyl-source-stream
tsify为Browserify的一个插件,访问Typescript编译器；vinyl-source-stream将Browserify的输出文件适配成gulp能够解析的格式

//gulpfile.js
gulp.task(“default”, [“copy-html”], function () { //默认先调用copy-html，作为default的依赖项
return browserify({
basedir: ‘.’,
debug: true,
entries: [‘src/main.ts’],
cache: {},
packageCache: {}
})
.plugin(tsify） //使用tsify插件调用Browserify
.bundle()
.pipe(source(‘bundle.js’)) //source为vinyl-source-stream别名，输出文件为bundle.js
.pipe(gulp.dest(“dist”)); //文件生成在dist文件夹中
});

1
2
3
4
5
6
7
8
9
10
11
2. 调试 gulp

### Watchify，Babel，Uglify
Watchify：；Babel：；Uglify：；
1. Watchify：启动Gulp并保持运行状态，自动编译
执行gulp
2. Babel为编译器，将ES2015及以上的版本转换为ES5和ES3
类似于Uglify，Babelify也会混淆代码，所以需要vinyl-buffer和gulp-sourcemap，需要将.ts添加到Babelify选项
更改tsconfig.json中compilerOptions-target为ES2015，compilerOptions-target定义的为Typescript生成的格式，Babel会将Typescript生成的ES2015编译为es5
3. Uglify压缩代码
Uglify用以混淆代码，安装vinyl-buffer和gulp-sourcemaps来支持sourcemaps

gulp.task(“default”, [“copy-html”], function () {
return browserify({
basedir: ‘.’,
debug: true,
entries: [‘src/main.ts’],
cache: {},
packageCache: {}
})
.plugin(tsify)
.bundle()
.pipe(source(‘bundle.js’))
.pipe(buffer()) //调用自身buffer
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write(‘./‘))
.pipe(gulp.dest(“dist”));
});

1
2
3
```
gulp //检查bundle.js是否被压缩
cat dist/bundle.js   ////# sourceMappingURL=bundle.js.map

React和webpack

初始化项目

ts文件放在src文件夹下，通过ts编译器变异，经webpack处理，生成bundle.js文件放在dist目录

安装依赖 安装typescript为一个开发依赖

webpack将所有代码和可选择地将依赖捆绑为一个单独的.js文件

react
react-dom
@types/react
@types/react-dom
后两个为前两个的声明文件，并非所有的包都包含了声明文件，所以ts会检查
awesome-typescript-loader
source-map-loader
第一个让webpack使用(ts的标准配置文件)tsconfig.json编译ts代码
第二个使用ts输出的sourcemap文件来告诉webpack什么时候生成自己的sourcemaps

添加代码

import组件使用相对路径，否则ts只会在node_modules中寻找

添加webpack配置文件

创建webpack.config.js

React

create-react-app

create-react-app my-app –scripts-version=react-scripts-ts