环境

线上运行环境

Typescript 在线上提供了一个 ts 自动运行唤醒，不逊色于任何 IDEA —— Playground

搭建自动运行 ts 的环境

初始化 npm 环境
shell
```
npm init --yes
```
1
全局安装 typescript
shell
```
npm i typescript -g
```
1
生成 tsconfig.json 文件
shell
```
tsc --init
```
1

修改 tsconfig.json 文件

json

"outDir": "./dist" // ts 编译后生成 js 文件保存的目录
"rootDir": "./src" // ts 源文件目录

全局安装 ts-node，此工具可以在 node 环境下，不用编译 ts 文件即可输出结果
shell
```
npm i ts-node -g
```
1
安装 nodemon （自动检测工具）
shell
```
npm i nodemon -D
```
1
配置自动检测命令
json
```
"scripts": {
    "start": "nodemon --watch src/ -e ts --exec ts-node ./src/index.ts"
}
```
1
2
3
- nodemon --watch src/：检测与 package.json 同级目录 src 的变化
- -e ts：监听后缀是 ts 的文件
- --exec ts-node ./src/index.ts：当 src 有任何变化，则重新执行 index.ts 文化
在根目录下创建 src 目录，并可在 src 目录下书写源码

若想查看 ts 编译后的 js 源码，可执行以下命令，并在新生成的 dist 目录中查看
shell
tsc
1

在浏览器环境中运行

初始化 npm 环境
shell
```
npm init --yes
```
1
安装 typescript
shell
```
npm i typescript -D
```
1
安装 Parcel 构建工具（宣称零配置的 webpack）
shell
```
cnpm i parcel-bundler -D
```
1

配置执行命令

shell

"scripts": {
    "start": "parcel ./index.html"
}

创建 index.html 和 index.ts，并把 index.ts 引入 index.html 中

html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <script src="./index.ts"></script>
</head>
<body></body>
</html>

环境 ​

线上运行环境 ​

搭建自动运行 ts 的环境 ​

在浏览器环境中运行 ​

环境

线上运行环境

搭建自动运行 ts 的环境

在浏览器环境中运行