1、初始化项目
npm init -y
2、生成tsconfig.json文件
tsc --init
修改 tsconfig.json 中的配置
"outDir": "./dist", //--outDir是ts编译后生成js文件保存的目录
"rootDir": "./src", //--rootDir是自己编写的ts源文件所在的目录
注意: dist src package.json 必须是在一个目录下
3、安装 ts-node
ts-node让node能直接运行ts代码，无需使用tsc将ts代码编译成js代码。【ts-node则包装了node，它可以直接的运行ts代码】
cnpm i ts-node -g
4、安装nodemon工具 【自动检测工具】
nodemon作用：【nodemon可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序】
cnpm install -g nodemon
5、在package.json中配置自动检测，自动重启应用程序
nodemon --watch src/ 表示检测目录是package.json同级目录src
-e ts 表示nodemon 命令准备将要监听的是ts后缀的文件
--exec ts-node ./src/project/app.ts 表示检测到src目录下有任何变化 都要重新执行app.ts文件
"scripts": {
"dev": "nodemon --watch src/ -e ts --exec ts-node ./src/app.ts"
}
6、Parcel打包支持浏览器运行TS文件
npm install parcel-bundler -D
在package.json中给npm添加启动项，支持启动parcel工具包
"scripts": {
"start": "parcel ./index.html"
},
在src同级目录添加index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="src/app.ts"></script>
</head>
<body></body>
</html>
