29.使用TypeScript

1.0 前言

目前在实际的项目开发中，TypeScript 应用的越来越多，基本成了很多公司的标配，TypeScript 这种强类型语言除了代码提示，类型校验，在项目比较大的时候，能很好的控制代码质量，这节我们就试试 Koa 集成 TypeScript 开发。

2.0 集成TypeScript 开发环境

本质上 Node.js 只能执行 CommonJS 规范的 .js 文件，所以 写好 TypeScript 代码会经过编译后生成 .js 文件，我们先熟悉下基本使用。

2.0.1 安装 TypeScript

npm install typescript --save-dev

TypeScript 的配置信息是通过 tsconfig.json 来配置的，接下来我们配置一个最简单的 配置文件。

{
    "version": "4.0.2", // typescript 版本
    "compilerOptions": {
        "target": "es2017", 
        "module": "CommonJS",
        "inlineSourceMap": true,
    },
    "include": [
        "app/**/*",
        "app.ts",
        "bin/www.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

接下来 我们创建 test.ts

export function test(a: string) {
    console.log(a);
}

一个最简单 ts 就写好来，接下里我们运行下：

npx tsc test.ts

上面这个命令表示把 test.ts 编译成 test.js，tsc 这个命令是 typescript 这个 package 里包含的，生成 test.js 如下：

"use strict";
exports.__esModule = true;
exports.test = void 0;
function test(a) {
    console.log(a);
}
exports.test = test;

这样就编译成 Node.js 可执行的 CommonJS 模块 js 文件。以上就是一个 TypeScript 最小使用例子了。

2.0.2 Koa 集成 TypeScript

首先我们需要安装 koa 这些依赖 TypeScript 类型定义，有些 package 默认自带类型定义，同时社区在 @type 这个group 下社区开发了很多,我们执行以下命令：

npm  i -D @types/node @types/koa @types/koa-router @types/koa-send

这样我们安装好了 Koa 几个常见库的类型定义。接下来我们把 app.js 改造成 app.ts，代码如下：

import * as Koa from "koa";
import * as koaBody from "koa-body";
import * as Static from "koa-static";
import * as Views from "koa-views";
import * as path from "path";
import router from "./app/routers";
import config from "./app/config";
import { logger, accessLogger } from "./app/log4j/logger";
import model from "./app/models/index";
const app = new Koa();
app.use(accessLogger());
app.use(async (ctx, next) => {
    ctx.model = model;
    await next();
});
app.on("error", (err) => {
    logger.error(err);
});
app.use(async (ctx, next) => {
    ctx.config = config;
    await next();
});
app.use(
    koaBody({
        multipart: true, // 支持文件上传
        formidable: {
            uploadDir: path.join(__dirname, "static/upload/"), // 设置文件上传目录
            keepExtensions: true, // 保持文件的后缀
            maxFieldsSize: 2 * 1024 * 1024, // 文件上传大小
        },
    })
);
// 加载模板引擎
app.use(
    Views(path.join(__dirname, "./views"), {
        extension: "ejs",
    })
);
app.use(Static(path.join(__dirname, "./static")));
app.use(router.routes()).use(router.allowedMethods());
export default app;

这样我们把 app.ts 改造成了符合 Typescript 规范的代码，接下来我们看看，用户新增这个接口。

import { findAll, findById, add, remove } from "../services/user";
import { Context } from "koa";
interface AddRequestBody {
    name: string;
    email: string;
}
async function addUser(ctx: Context) {
    const { path } = ctx.request.files.file;
    const { name, email } = <AddRequestBody>ctx.request.body; // 获取 request body 字段
    const imgUrl = path.split("/static")[1];
    if (!name || !email || !imgUrl) {
        ctx.body = {
            messge: "参数错误",
            success: true,
        };
        return;
    }
    const data = await add({ name, email, imgUrl });
    ctx.body = {
        data: data,
        success: true,
    };
}

我们这里用 AddRequestBody 来定义了 POST 请求过来的数据格式，非常方便。

热加载

开发过程中我们不可能每次都先执行 tsc 命令编译一次，这样会非常麻烦，**Typescript 提供 了 ts-node 这个 package，它包裹了 Node.js，可以直接运行 .ts 格式文件，这样就少去了编译环节。

首先安装依赖：

npm  i -D ts-node

然后改变 package.json。

 "scripts": {
        "dev": "cross-env NODE_ENV=dev nodemon --watch  ts-node bin/www.ts",
        "start:qa": "cross-env NODE_ENV=qa && node bin/www",
        "start:prod": "cross-env NODE_ENV=dev && pm2 start ./bin/www --watch --name koa-test",
        "lint": "lint-staged",
        "tsc": "tsc"
    }

这样我们借助 nodemon 和 ts-node 就很好实现了 热加载。

那这里我们就介绍了 Koa 集成 TypeScript，整个 Demo 我已经改造成 TypeScript 了，可以把源码拉下来，本地看看。

3.0 Eslint 集成 TypeScript

Koa 集成好以后，我们接下来需要把 Eslint 也改造下，支持 TypeScript 语法规则。

3.0.1 安装依赖

npm i -D @typescript-eslint/eslint-plugin  @typescript-eslint/parser

3.0.2 改造.eslintrc.js

添加对应依赖，配置文件

{
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint", "prettier"],
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  parserOptions: {
        ecmaVersion: 2020,
  },
}

如上我们把对应的配置加上以后就可以使用起来了，非常方便，非常简单，这样不符合 TypeScript 语法规则的，都会出现红色提示。

4.0 小结

这节我们梳理了 Koa 结合 TypeScript 的基本使用，还有 Eslint 集成 TypeScript 语法规则。大家可以对着 Demo 好好梳理一遍，Demo 地址