Visual Studio Code 自动编译 TypeScript

vscode自动编译ts文件

新建工程目录
```
mkdir ts_project
1
```
进入工程目录
```
cd ts_project
1
```
初始化node工程
```
npm init --yes
1
```
新建 typescript 代码目录 src 和 javascript 代码目录 js
```
mkdir src js
1
```
生成配置文件 tsconfig.json
```
tsc --init
1
```

修改 tsconfig.json 配置

"outDir": "./js",  /* 把ts文件编译成功后放在js目录中(不用新建文件夹会自动生成js文件夹) */
"strict": false,   /* 不使用严格模式 */
1
2

开启自动编译
终端 ——> 点击运行任务 ——> 点击显示所有任务 ——> 点击显示所有任务 ——> 找到要监视的json文件

在src目录编写 typescript 文件 index.ts

let slogan:string = '桃李不言下自成蹊';
console.log(slogan);

1
2
3

观察 js 目录中自动生成了 index.js文件

let slogan = '桃李不言下自成蹊';
console.log(slogan);

1
2
3

编写网页 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

安装轻量级 web 服务器 lite-server

npm install --save-dev lite-server
1

修改 package.json 文件

增加以下内容：

"dev": "lite-server"
1

完整内容如下：

{
  "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"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

控制台运行 web 项目
```
npm run dev
1
```
观察网页控制台

修改源代码文件 src/index.ts

let slogan:string = '我爱你中国';
console.log(slogan);

1
2
3

观察自动编译后的文件 src/index.js

let slogan:string = '我爱你中国';
console.log(slogan);

1
2
3

观察网页控制台
vscode自动编译ts文件

相关阅读:
网易产品面试题：马路上有个红绿灯和斑马线，但是90%的人都不走这个斑马线，怎么解决？
Python常用的新模块特性
阿里云服务器手动搭建WordPress（CentOS 8）
C语言基础知识
ArcGIS丨SWAT丨农业水土环境及面源污染建模及对农业措施的响应
golang字符串转64位整数
es6中的let与const关键字及其与var关键字的不同
Java基础
gitlab拉取项目报128 fatal: unable to access ‘xxx.git/‘
Python实现 Leecodet

原文地址：https://blog.csdn.net/qq_24330181/article/details/126633028