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


初始化工程

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

tsc --init

该命令会生成tsconfig.json。

参考官网文档按照你自己的需求进行修改。下面是我使用的配置:

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es6",
        "noImplicitAny": true,
        "moduleResolution": "node",
        "sourceMap": true,
        "outDir": "dist",
        "baseUrl": ".",
        "paths": {
            "*": [
                "node_modules/*",
                "src/types/*"
            ]
        }
    },
    "include": [
        "src/**/*"
    ]
}

移动源码位置

参考tsconfig的配置:

{
 ....
    "include": [
        "src/**/*"
    ]
}

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

修改package.json

添加编译命令

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

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

JS文件修改

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

修改require

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

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

修改module.exports

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

例一:

var User = {...};
module.exports = User;
//改为
const User = {...};
export default User;

例二:

//导出
exports.login = ()=>{...}
//导入
const member = require("../controller/member");
//--------------->改为
//导出
export let login =()=>{...}
//导入
import * as member from "../controller/member";

引用声明文件

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

 npm i @types/express --save-dev

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

声明类型

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

例如:Express类型

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

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