记录如何把现有 nodejs 工程改成 TypeScript 工程


初始化工程

在现有 JS 工程,或者空白工程。初始化 TypeScript:

1
tsc --init

该命令会生成 tsconfig.json。 参考官网文档按照你自己的需求进行修改。下面是我使用的配置:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*", "src/types/*"]
    }
  },
  "include": ["src/**/*"]
}

移动源码位置

参考 tsconfig 的配置:

1
2
3
4
5
6
{
 ....
    "include": [
        "src/**/*"
    ]
}

如果你是改造现有项目需要将 js 源码都移动到 src 目录下。如果是全新项目,直接在 src 目录下新建 ts 文件。

修改 package.json

添加编译命令

添加命令使 ts 文件编译成 js 文件。

1
2
    "build-ts": "tsc",
    "watch-ts": "tsc -w"

JS 文件修改

需要 js 文件全部改为 ts 后缀。以下列举一些常见修改点:

修改 require

不再使用 node 的 require 方式引用模块,改为 import。例如:

1
2
3
var express = require("express");
//改为
import express from "express";

修改 module.exports

不再使用 node 的导出方式,改为 export。例如: 例一:

1
2
3
4
5
6
var User = {...};
module.exports = User;
//改为
const User = {...};
export default User;

例二:

1
2
3
4
5
6
7
8
9
//导出
exports.login = ()=>{...}
//导入
const member = require("../controller/member");
//--------------->改为
//导出
export let login =()=>{...}
//导入
import * as member from "../controller/member";

引用声明文件

要利用 ts 的代码提示功能优势以及正确编译。我们还需要引用声明文件,这是 ts 对 js 改造的最大优势,不然用 ts 干嘛呢。引用文件举例:

1
 npm i @types/express --save-dev

大多类型定义都是@types/xxx。

声明类型

ts 所有对象最好都是用指定的类型,不要使用 any(否则就和 js 没有太大区别了)。 例如:Express 类型

1
2
3
import { Request, Response, NextFunction } from "express-serve-static-core";

export let login = async (req: Request, res: Response, next: NextFunction) => {...}