express引入typescript

·  阅读 61

为了后续方便统一技术栈,打算后面全部转为ts去统一处理express

1、新建包文件package.json

npm init -y  //快速生成package.json文件
复制代码

2、安装Typescript

npm install typescript -s
复制代码

安装完成后,需要执行

tsc --init  // 生成tsconfig.json 配置文件
复制代码

执行命令需要注意,有四种方式

  • 可以直接全局安装typescriptnpm install -g typescript,然后再运行tsc --init
  • 可以直接通过 npx tsc --init(npm从5.2版本开始都自带npx,使得运行node_modules目录中的package命令更加方便。当你运行npx 时,npx会自动查找node_modules目录中对应的package位置,并从中找到可以执行的文件)
  • 可以进入node-modules/.bin/后,运行命令tsc --init
  • 也可以直接package.json文件中的scripts对象中添加执行命令为"runTsc":"tsc --init",然后再运行npm run runTsc

3、简单修改tsconfig.json配置信息

{ 
    "compilerOptions":{
        "rootDir": "./src",
         "outDir": "./build",              
    },
    "include":["src/**/*"] //表示只会编译src下的.ts文件
}
复制代码

4、安装express及其他插件

npm install express -s // 安装express
npm install @types/express -s //用于识别 x.ts文件
npm install @types/node -s //开发 Nodejs 程序,为了获得合适的类型校验和代码提示,我们需要引入 Nodejs 的类型文件
复制代码

5、创建个helloworld测试

新增build文件和src文件夹,与tsconfig.json中对应,同时新增/src/app/app.ts,内容如图所示

image.pngpackage.json中添加对应的指令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
    "dev":"node ./build/app/app.js"
  },
复制代码

控制台运行npm run build生成app.js文件,然后运行npm run dev,就可以正常访问http://localhost:3000/

6、监视文件调试

  • 如果需要简单调试ts生成js,可以通过npx tsc --watch命令,可以自动检测.ts文件是否有变化,有变化就会自动转为js文件
  • 直接运行ts文件调试:
    • 1、安装对应插件npm install -s @types/node nodemon ts-node
    • 2、package.json中添加指令,通过nodemon监听所有ts文件更改,然后再执行运行入口文件就可以实时生效
        "scripts": { "localDev": "nodemon --watch **/*.ts --exec \"ts-node\" ./src/app/app.ts" }
    复制代码
    • 3、更改入口文件,控制台会变化结果如图,重新刷新页面,页面会发生变化

image.png

参考资料

阮一峰的npxvscode集成tstsconfig.json配置信息ts-node

分类:
前端
收藏成功!
已添加到「」, 点击更改