typescript安装以及vscode 配置typescript环境
标签：
JavaScript
安装
1.安装TypeScript Compiler（确保已经安装了node）
//直接打开命令行工具全局安装。npm install -g typescript//或者更新TypeScript Compilernpm update -g typescript//查看版本指令tsc -v
2.在本地目录创建一个文件helloworld.ts文件（typescript文件的后缀是.ts结尾，然后通过编译打包转换为js文件）
//helloworld.tsfunction 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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：编译时需要包含/剔除的文件夹。
2.运行构建任务
通过按ctrl+shift+b（运行构建任务），弹出如下图：
选择第一个，则是编译.ts文件，（一次编译）
选择第二个，则是监控ts文件（变动就编译）
注：如果有loader配置，例如vue，完全不用选择编译成js，有webpack帮忙完成此任务。
作者：wave浪儿
链接：https://www.jianshu.com/p/99fd393193d1
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦