38文件服务器,TS-38 搭建服务端开发环境

基于expresd搭建

1)全局安装express应用生成器

npm i -g express-generator

2)生成一个express应用

express ts-express

3)进入该项目目录，安装依赖

cd ts-express

npm i

一般的项目到此就搭建好了(可以运行npm start启动)，ts的还需要以下步骤

4)安装ts

npm i -D typescript

5)生成tsconfig.json

tsc --init

6)將工程中所有js文件重命名为ts文件:

app.js -> app.ts

routes/

index.js -> index.ts

users.js -> users.ts

bin/

www(服务端启动脚本) -> server.ts

// bin/server.ts

// var port = normalizePort(process.env.PORT || '3000'); // 改端口为4001

var port = normalizePort(process.env.PORT || '4001');

7)出现了很多报错，处理这些报错

文件中require未定义错误(因为没有node的声明文件)，解决：安装node和express声明文件

npm i @types/node @types/express -D

8)错误少了很多，但是还是有参数未定义 // 如 app.ts 中

var express = requrie('express'); // express类型为any！！！(类型推断未成功)

...

var app = express();

app.use(function(req, res, next) { // 报req, res, next具有隐式any类型，ts类型推断失败

....

});

报req, res, next具有隐式any类型，ts类型推断失败

打开express类型声明文件，类型是以export = xxx的方式导出的，这要求引入时使用import = xxx或import xxx from xxx的方式

将所有导入方式由require改为es6的方式

8)改完后 ，还是有错误

声明文件缺失的问题：

npm i -D @types/http-errors @types/cookie-parser @types/morgan @types/debug

9)还剩下一些报错需要解决

使用类型断言，解决ts无法自动推断出类型的变量(已在声明文件中定义类型)

类型定义缺失的，添加变量的类型注解

addr后加! —— 去除变量联合类型中的null类型

变量后的!: 非空断言操作符

// bin/server.ts

function onListening() {

// 类型信息 —— let addr: string | AddressInfo | null

let addr = server.address();

let bind = typeof addr === 'string' // 类型保护

? 'pipe ' + addr // 这个区块addr为string

// : 'port ' + addr.port; // 这个区块addr为 AddressInfo | null，当类型为null是出错，报错

: 'port ' + addr!.port; // addr后加! —— 去除这个变量的null类型

debug('Listening on ' + bind);

}

经过一系列工程改造，项目没有报错了

10)将ts编译为js(node是不能直接执行ts文件的)

tsconfig.json指定一个输出目录

...

"outDir": "./dist",

...

package.json修改，添加构建脚本

{

...

"scripts": {

...

"build-ts": "tsc"

},

}

运行构建脚本npm run build-ts,

dist目录下生成了构建后的文件,静态资源和模板文件没有拷贝到dist目录下

11)编写脚本，用来做拷贝工作

根目录下新建copyStatic.ts

npm i shelljs @types/shelljs -D,安装shelljs

脚本内容:

shelljs.cp('-R', 'public', 'dist');

shelljs.cp('-R', 'views', 'dist');

- 在package.json中增加拷贝脚本

{

...

"scripts": {

...

"copy-static": "ts-node copyStatic.ts" // 需要暗转ts-node

}

}

- 执行`npm run copy-static`

12)添加build脚本--将构建ts和拷贝文件的脚本合并到一起:

// package.json

{

"scripts": {

...

"build": "npm run build-ts && npm run copy-static"

}

}

npm run build运行该脚本

copyStatic.ts(不需构建)被构建了 -- tsconfig.json中配置忽略掉copyStatic.ts

{

"exclude": [

"copyStatic.ts"

],

}

13)修改启动脚本

// package.json

{

...

"scripts": {

"start": "node ./dist/bin/server.js"

}

}

添加监控脚本

原因:修改文件后，第一步需要构建，第二步需要重启服务，这样很麻烦

// package.json

{

"scripts": {

"watch": "nodemon ./dist/bin/server.js" // 需要安装nodemon

}

}

运行npm run wattch,现在修改文件，只需另一个命令行运行npm run build构建代码，服务会自动重启