本地创建一个TypeScript环境

一.安装

1.全局安装 npm install -g typescript 【必须】,只有全部安装了才能使用命令生成tsconfig.json;

2.创建一个文件夹,然后局部安装. npm install typescript --dev.

3.生成配置文件. tsc --init. 可以在本地生成一个名为tsconfig.json的文件.【如果生成失败,请先执行第一步全局安装后,再尝试生成】. 或者手动创建也行.

// tsconfig.json
{
  "compilerOptions": {
   /** 编译后文件输出位置 */
    "outDir": "./dist",
    /** 自己写TS代码的文件夹 */
    "rootDir": "./src",
    "target": "es5",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

4.安装ts-node:npm install --dev ts-node. 用来运行ts文件.

5.安装nodemon:npm install nodemon --dev. 配合ts-node实现热更新,自动执行.

6.与tsconfig.json平级创建文件夹和文件src/app.ts;

7.在package.json中配置自动检测,自动重启应用程序.

//package.json

"scripts": {
    "dev":"nodemon --watch src/ -e ts --exec ts-node ./src/app.ts"
 },

nodemon --watch src/ 表示检测目录是package.json同级目录src.

-e ts 表示nodemon命令准备将要监听的是ts后缀的文件

--exec ts-node ./src/app.ts 表示检测到src目录下有任何变化都要重新执行app.ts文件.

完成已上有的配置.已经可以使用 npm run dev 运行 app.ts中的代码了..但还不能在网页上实现热更新.

在网页中运行 ts

1.安装打包工具parcel:npm install parcel@next --dev.

2.创建文件及文件夹:public/index.html.并在index.html中引入../dist/app.ts;

3.在package.json中配置启动命令.

//package.json

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

完成该配置后,则可以使用npm run start运行.

浏览器访问该运行完成的信息,则可以在网页中查看编译后的TS了.