美文网首页
node.js + vscode + typescript

node.js + vscode + typescript

作者: 陈高原 | 来源:发表于2018-10-30 13:44 被阅读0次

添加第三方库

node.js无法直接解析执行ts代码, 所以需要安装typescript将ts代码转换成js代码. 再安装ts-node, 便可以在require与import一个ts文件时自动转换成js. 最后安装@types/node, 增加node.js底层库与方法的智能提示.
一般的第三方库都有对应的 @types/库名 , 如 @types/express

npm install typescript
npm install ts-node
npm install @types/node

配置

tsconfig.json配置

  • target 为生成的js代码目标版本, 根据情况调高调低.
  • strict 用来设置严格模式的开启关闭, 建议开启.
  • rootDir 配置ts代码所在根路径.
  • outDir 配置js代码的生成路径, 一般来说不需要生成js代码, 如果需要发布到npm, 那是需要执行 tsc -d 生成.js与对应的 .d.ts文件, 再将其打包发布
  • experimentalDecorators 是否使用装饰器, 实验性功能, 可自行选择
{
    "compilerOptions": {
        "target": "es6",
        "strict": true,
        "outDir": "./out",
        "rootDir": "./src",
        "module": "commonjs",
        "typeRoots": ["node_modules/@types"],
        "experimentalDecorators": true
    },
    "exclude": [ "node_modules"]
}

初始化流程

ts-register.js

新建一个ts-register.js文件, 主要用来加载ts-node, 并加载上面设置好的对应配置.

require("ts-node").register(require("./tsconfig.json"));

index.js

新建index.js文件, 用来初始化ts环境及执行 src/index.ts 文件

require("./ts-register");  // 加载ts-node及配置
require("./src");  // 执行ts代码

这样就能直接使用node来执行ts代码了:

node index.js

launch.json

如果想用vscode来调试项目或者单个ts文件, 就还要配置一下launch.json文件

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "调试当前ts项目",
            "type": "node",
            "request": "launch",
            "args": [
                "${workspaceRoot}/src/index.ts" // 入口文件
            ],
            "runtimeArgs": ["--nolazy", "-r", "./ts-register"], // 注册ts环境
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        },
        {
            "name": "调试当前ts文件",
            "type": "node",
            "request": "launch",
            "args": ["${relativeFile}"],
            "runtimeArgs": ["--nolazy", "-r", "./ts-register"],
            "sourceMaps": true,
            "cwd": "${workspaceRoot}",
            "protocol": "inspector",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen"
        }
    ]
}

选择对应的调试模式, 再按f5.


@ET_NN)3)){`TN{CE{YXX~H.png

文件结构

  • .vscode -- launch.json
  • src -- index.ts
  • index.js
  • package.json
  • tsconfig.json
  • ts-register.js

相关文章

网友评论

      本文标题:node.js + vscode + typescript

      本文链接:https://www.haomeiwen.com/subject/rbqgtqtx.html