typescript 在 nodejs开发中的使用

注：本文的面向读者，假设你已经对typescript和nodejs有了初步的了解了：知道如何安装npm 包，如何运行node代码，以及tsc是做什么的。

代码提示

安装@types/node库文件，编写代码的时候，编辑器才会智能提示。

npm install @types/node -D

效果：

此时，编辑器还是会提示一些浏览器环境的api，如window对象。

这是因为tsconfig.json配置文件中的compilerOptions.lib的默认值包含了DOM的库。按需配置需要的lib 即可覆盖默认值。（库列表详见这里https://www.typescriptlang.or...）

{
  "compilerOptions": {
    "lib": ["ES6"]
  }
}

expressjs

因为本人主要使用express，express的用法看官方文档，这里只列出了 typescript和express 搭配使用的一些细节。

npm install @types/express -D 安装express的接口描述文件。

原来js中commonjs的写法：

const express=require("express")
const app=express()

转换成在 ts 中esm的写法：

import * as express from "express"
const app = express()

express-session

我的express项目中使用 express-session 来实现用户登录态的功能。
具体这个库的使用方法看这个库的官方文档就行了，这里主要展示和ts的相关用法。

安装库的描述文件：

npm install @types/express-session -D

使用：

文档给的引入用法是这样的：

var session = require('express-session')

那么对应的esm用法是这样的：

import * as session from 'express-session'

按照官方的文档的例子，用户登录后，将用户信息绑定到req.session的user属性上了，在ts中使用会提示这个错误，

这时需要我们告诉编辑器/编译器，req.session上有这个属性。

在项目增加types.d.ts文件，内容如下：

import "express-session"

declare module "express-session" {
  interface SessionData {
    user: {name:string,age:number} //给 req.session.user
  }
}

这样就能正常使用了。

debug 调试

1. 设置 tsconfig.json文件中的compilerOptions.sourceMap为true:

   {
     "compilerOptions": {
      ……
      "sourceMap": true,
      "lib": ["ES6"],
      ……
     }
   }

2. 创建.vscode/launch.json文件，内容如下：

   {
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/src/app.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
   }

   注意其中的 program 支持以 .ts文件；

3. npx tsc -w 编译代码（我一般习惯手动执行，也可以参考文档配置debug之前自动执行tsc 任务）
4. 按F5启动调试模式，或点击菜单中的【运行】-【启动调试】调试功能。
   详见VSCode 的文档https://code.visualstudio.com... 。

运行

当我们运行 nodejs 代码的时候，执行的是编译后的代码，这时候如果代码里面报错希望提示在源码里的位置，可以通过--enable-source-maps，启动服务:

node --enable-source-maps dist/app.js

效果如下：

这种方式不需要改代码，好于我之前写的这篇文章里面的方式。

常见问题

typescript 版本

早期我习惯是 npm install typescript -g 全局安装typescript。
有时候不同项目使用的typescript 版本不一样，所以更好的方式是执行npm install typescript 安装到项目里，每个项目自己安装自己对应的ts版本。然后通过npx tsc调用项目内的typescript 编译代码。

此外，VSCode 默认使用VSCode自带的typescript进行代码解析，如果自带的版本和项目内使用版本不一样，有时候编辑器会提示语法错误（常出现在VSCode 自带的版本高于项目内使用的版本且tsconfig.json 中配置了strict模式时），可以通过如下操作，让编辑器使用项目内的typescript进行解析服务。

打开任一ts文件，点击右下角的 typescript 左边的{},然后在悬浮窗里点击Select Version

再选择 Use Workspace Version：

windows 系统下，文件名大小写的问题

在windows 操作系统中，文件名是不区分大小写的，当a.ts 文件编译成a.js文件后，这时候我们修改了ts文件名，将a.ts改成了A.ts，那么windows不会重新编译出一个A.js文件，还是复用原来的a.js文件，所以这时候运行代码的时候就会，提示找不到A.js文件，解决办法是将a.js文件手动删除掉，并触发tsc编译。