typescript安装以及vscode 配置typescrip

2018-09-26 本文已影响4人 wave浪儿

安装

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帮忙完成此任务。