TypeScript开发环境

发表于 | 分类于 |

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由于主流浏览器不支持 TS 和不完全支持 ES6 语法，所以我们需要一个编译器将 TpysScript 编译为 JavaScript。

编译器分两种一种是在线编译器，在百度搜索 Typescript，就可以找到：http://www.typescriptlang.org/play/index.html可以将TS代码转化成JS代码。
另一种就是本地编译器。我使用的 vscode，下面是配置过程。

先全局安装 typescript(需安装 node)

1
npm install -g typescript

然后创建一个工作目录并添加一个tsconfig.json, 我使用的是 angular 的配置，有兴趣的可以查看ts 官方文档

1
2
3
4
5
6
7
8
9
10
11
12
13
{
	"compilerOptions": {
		"target": "es5",
		"module": "commonjs",
		"moduleResolution": "node",
		"sourceMap": true,
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"lib": ["es2015", "dom"],
		"noImplicitAny": true,
		"suppressImplicitAnyIndexErrors": true
	}
}

使用 Ctrl+Shift+B 快捷键，会出现如下界面
vscode-tsconfig.png
点击配置生成任务，可以看到 typescript 有两个配置，如果运行一次选择创建，持续运行选择监听，然后会生成.vscode 文件夹。如果是创建项目，则在编译的时候要手动 Ctrl+Shift+B。如果是监听，只需要在开始项目的时候启动即可。
我使用的是监听模式，先在根目录下创建 Hello.ts

1
2
3
4
5
6
7
8
class Hello {
    sayHello(name:string){
        if(!name) name = 'TypeScript';
        return `Hello ${name}`;
    }
}

export = new Hello();

保存后，你会发现多出了两个文件，分别是 Hello.js 和 Hello.js.map,看看 Hello.js 的内容

1
2
3
4
5
6
7
8
9
10
11
"use strict";
var Hello = (function () {
	function Hello() {}
	Hello.prototype.sayHello = function (name) {
		if (!name) name = "TypeScript";
		return "Hello " + name;
	};
	return Hello;
})();
module.exports = new Hello();
//# sourceMappingURL=Hello.js.map

这就成功把 TS 编译成了 JS。

[越努力，越幸运！]