Visual Studio Code 自动编译 TypeScript

发布于：2023-01-04 ⋅ 阅读:(461) ⋅ 点赞:(0)

微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

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文件

本文含有隐藏内容，请开通VIP 后查看

Visual Studio Code 自动编译 TypeScript

vscode自动编译ts文件

网站公告

今日签到

热门文章

最新发布