前端nodejs + typescript + express

注:ts能写出非常严谨的代码,并且转换js会更加好

一、搭建环境

1、新建文件夹,初始化npm init --yes出现package.json

前端nodejs + typescript + express

2、cnpm i typescript -g 全局安装typrscript

前端nodejs + typescript + express

3、tsc --init 生成ts的配置文件tsconfig.json(通过这个文件可以对ts进行转换)

前端nodejs + typescript + express

4、npm install express 构建本地服务,使用express

前端nodejs + typescript + express

生成dependencies,对应生产

前端nodejs + typescript + express

5、npm i @types/node -g 安装@types/node模块(@types/node模块会帮助我们引入typescript需要的内容)

前端nodejs + typescript + express

6、npm i @types/express -D 安装本地开发ts对应的express( -D代表的是当前项目中安装,-g是全局的)

前端nodejs + typescript + express

生成devDependencies,对应开发

前端nodejs + typescript + express

二、修改tsconfig.json配置文件,使用es6已经tsc后文件输出到build文件夹下

前端nodejs + typescript + express

前端nodejs + typescript + express

三、修改package.json,启动命令 npm run start-nodemon 执行两个命令,tsc先转换ts为js,在启动build/server.js

前端nodejs + typescript + express

前端nodejs + typescript + express

四、以上代码可以实现npm run start-nodemon启动代码,但是每次修改都需要重启比较麻烦,我们来安装nodemon插件

npm i nodemon -g

前端nodejs + typescript + express

安装完成我们来修改package.json文件,新增运行脚本

"dev":"nodemon -e ts -w ./ -x npm run start-nodemon"

注:-e代表后缀为ts的,-w监听 ,npm run start-nodemon运行上面配置的脚本

前端nodejs + typescript + express

此时我们修改ts文件将会监听自动重启

前端nodejs + typescript + express