用Typescript编写node服务器程序

文章目录

1. 1. 准备
2. 2. 建立项目
   1. 2.1. 基本配置
   2. 2.2. typescript编译器配置
   3. 2.3. 目录结构
3. 3. webstorm 配置
4. 4. VS Code 配置
5. 5. 编写服务器程序

Typescript语言虽然初学麻烦，但显然是越用越顺手的，因为在编码中可以避免原生javascript的很多坑。本文将记录并介绍怎么用ts来编写node程序。

准备

首先，系统中需要有以下的工具：

• node js：建议使用较新的版本
• tsc：typescript编译器，npm install -g typescript安装，tsc -v查看版本号。
• 趁手的编辑器或IDE：本文介绍webstorm以及vscode的配置方法。
• nodemon插件：主要用于自动刷新服务器，也可以用别的工具或手动刷新。npm install -g nodemon安装，nodemon -v查看版本号。

建立项目

基本配置

新建一个空的项目文件夹，命令行输入：

npm init -y

目录下会生成一个package.json文件，然后修改文件以配置所需的依赖项：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^8.0.53",
    "@types/express": "^4.0.39",
    "express": "^4.16.2"
  }
}

npm install，安装所需的依赖。

文件内容解释：@types/xxx是类型定义模块，必不可少。这里装了个express框架方便使用。

typescript编译器配置

命令行使用tsc --init初始化一份tsconfig.json文件，也可以手工创建它，区别是命令行生成的文件每个配置项都有详细的英文说明。修改这个配置文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",                     
    "watch": true,
    "lib": ["es6"],
    "outDir": "./build",                        
    "rootDir": "./server",
    "experimentalDecorators": true,        
    "emitDecoratorMetadata": true        
  },
  "include": [
    "./server/**/*"
  ],
  "exclude": [
      "node_modules"
  ]
}

其中的”compilerOptions”是编译选项，具体详情：

• 中文文档
• 英文文档

上述配置的主要意思：

• target是编译后的js代码遵循何种规范。
• module用来指定设置编译后的js代码使用何种模块规范。由于是开发node.js项目，所以选择commonjs。
• watch为true时会监视输出文件，在它们改变时重新编译。
• lib数组定义开发时会用到的语法。
• outDir指向了编译后的js代码输出的地方。
• rootDir会告诉编译器，此目录下的文件需要经过编译。
• experimentalDecorators和emitDecoratorMetadata和装饰器相关，意思是在编译的时候要保留装饰器的元数据。
• "include": [ "./server/**/*" ]是指./src下的所有文件，是我们真正需要被编译的，其他目录将会被排除。
• exclude定义了须排除的文件

实际配置可能会跟这份配置表有出入，可以根据文档及个人需求灵活使用

目录结构

在根目录下创建目录server，服务器的业务逻辑将会写在这个目录下面。一个初始的项目目录就生成了，它是这样的：

webstorm 配置

打开设置搜索typescript的设置项：

勾选启用typescript编译器，并选择使用tsconfig.json配置文件。

当server.ts的代码有变动时，编译器就会自动执行编译：

VS Code 配置

在vscode编辑器中，我没有找到自动编译的设置。不过没有关系，我们可以手动编译。

打开vscode的集成终端，在命令行中输入tsc，ts代码有变动时，tsc会自动编译。如图：

编写服务器程序

在sever.ts简单编写如下代码并保存：

import * as express from "express";

export class ServerMsg {
    constructor(
        public msg:string = '测试信息'
    ) {}
}

const app = express();

app.get('/test', (req, res) => {
    let msgs:ServerMsg = new ServerMsg();
    res.send(msgs.msg)
})

const server = app.listen(8000, 'localhost', () => {
    console.log('服务器已启动：http://localhost:8000')
})

命令行输入nodemon build/server，回车。

打开http://localhost:8000/test，可以看到，服务器返回的消息已经被接收：

查看并对比build/server.js：

可以看到，编译出来的js文件也是非常清爽干净。

---

微软爸爸的ts真好用。