Visual Studio Code 自动编译 TypeScript
vscode自动编译ts文件
-
新建工程目录
mkdir ts_project -
进入工程目录
cd ts_project -
初始化node工程
npm init --yes -
新建 typescript 代码目录 src 和 javascript 代码目录 js
mkdir src js -
生成配置文件 tsconfig.json
tsc --init -
修改 tsconfig.json 配置
"outDir": "./js", /* 把ts文件编译成功后放在js目录中(不用新建文件夹会自动生成js文件夹) */ "strict": false, /* 不使用严格模式 */ -
开启自动编译
终端 ——> 点击运行任务 ——> 点击显示所有任务 ——> 点击显示所有任务 ——> 找到要监视的json文件
-
在src目录编写 typescript 文件 index.ts
let slogan:string = '桃李不言下自成蹊'; console.log(slogan); -
观察 js 目录中 自动生成了 index.js文件
let slogan = '桃李不言下自成蹊'; console.log(slogan); -
编写网页 index.html 引入 js/index.js 文件
<!DOCTYPE html> <html lang="zh_cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>李昊哲-小课</title> <script src="./js/index.js"></script> </head> <body> </body> </html> -
安装轻量级 web 服务器 lite-server
npm install --save-dev lite-server
-
修改 package.json 文件
增加以下内容：
"dev": "lite-server"完整内容如下：
{ "name": "ts_project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "lite-server" }, "keywords": [], "author": "李昊哲", "license": "ISC", "devDependencies": { "lite-server": "^2.6.1" } } -
控制台运行 web 项目
npm run dev -
观察网页控制台
-
修改源代码文件 src/index.ts
let slogan:string = '我爱你中国'; console.log(slogan); -
观察 自动编译后的文件 src/index.js
let slogan:string = '我爱你中国'; console.log(slogan); -
观察网页控制台
-
vscode自动编译ts文件