安装
1.安装TypeScript Compiler（确保已经安装了node）
//直接打开命令行工具全局安装。
npm install -g typescript
//或者更新TypeScript Compiler
npm update -g typescript
//查看版本指令
tsc -v
2.在本地目录创建一个文件helloworld.ts文件（typescript文件的后缀是.ts结尾，然后通过编译打包转换为js文件）
//helloworld.ts
function greeter(person: string) {
return "Hello, " + person;
}
let user = "浪儿";
document.body.innerHTML = greeter(user);
3.编译代码（打开命令行，切换到刚才创建的ts文件目录下，运行TypeScript编译器）
tsc helloworld.ts
这个时候同级目录，会多一个helloworld.js文件，这就是编译后的js文件。
//编译后的helloworld.js，对比ts文件看看有什么不一样哦
function greeter(person) {
return "Hello, " + person;
}
var user = "浪儿";
document.body.innerHTML = greeter(user);
真正的引用是.js的这个文件，而不是ts本身。所以编译完成后，还需要一个页面来测试代码是不是可以正常的显示，新建一个叫做index.html的文件,引入helloworld.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<script src="helloworld.js"></script>
</body>
</html>
打开index.html文件，浏览器中显示：“Hello，浪儿”，到此，一个typescript项目正常跑起来了！
vscode 配置typescript环境
1.创建tsconfig.json
输入命令tsc --init，会创建一个如下内容的tsconfig.json(TypeScript编译配置文件)
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
}
}
几个重要的属性解释一下：
- target：编译之后生成的JavaScript文件需要遵循的标准。主要的候选项：es3、es5、es2015、ES2016。
- module：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。
- outDir：编译输出JavaScript文件存放的文件夹。
- esModuleInterop：允许从没有设置默认导出的模块中默认导入。这并不影响代码的显示，仅为了类型检查。
- include、exclude：编译时需要包含/剔除的文件夹。
- 更多tsconfig.json细节配置：英文链接 中文链接
2.运行构建任务
通过按ctrl+shift+b（运行构建任务），弹出如下图：
选择第一个，则是编译.ts文件，（一次编译）
选择第二个，则是监控ts文件（变动就编译）
注：如果有loader配置，例如vue，完全不用选择编译成js，有webpack帮忙完成此任务。
网友评论