使用vscode写typescript（node.js环境）起手式

2024年4月13日 169次阅读 来源: zhoutk

动机

一直想把typescript在服务端开发中用起来，主要原因有：

  • javascript很灵活，但记忆力不好的话，的确会让你头疼，看着一月前自己写的代码，一脸茫然。
  • 类型检查有利有敝，但在团队开发中，限制个人的天马行空还是很有效的;
  • node对模块等es6特性的支持不尽人意，目前我只用node长期支持版所能支持的特性，个人不愿用babel之类的工具;
  • 开始用webstorm开发，结果它象visual studio系列一样，越来越臃肿;转而用vscode，但它的绝配是typescript;

问题

之前也陆陆续续试着用了，但总被一些困难绊住了，主要有以下几点：

  • vscode开发调试typescript环境的搭建，因为vscode版本更新也快，网上资料繁杂;
  • tsconfig.json的配置
  • tslint.json的配置
  • 全局变量的使用与设定;

解决

经过多次的不断尝试，今天终于达到自己满意的地步了。

环境搭建，基于最新版（1.26.1）

安装node.js

从官网下载对应操作系统的安装包，按说明安装。

全局安装typescript

    npm i -g typescript

生成并配置tsconfig.json

运行命令：

    tsc --init

配置文件：

{
  "compilerOptions": {
    "target": "es2017",                         // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "module": "commonjs",                       // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "moduleResolution": "node",                 // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
    "emitDecoratorMetadata": true,              // 为装饰器提供元数据的支持
    "experimentalDecorators": true,             // 启用装饰器
    "allowSyntheticDefaultImports": true,       // 允许从没有设置默认导出的模块中默认导入。
    "strict": true,                             // 启用所有严格类型检查选项
    "noImplicitAny": true,                      // 在表达式和声明上有隐含的 any类型时报错
    "alwaysStrict": true,                       // 以严格模式检查没个模块，并在没个文件里加入 'use strict'
    "sourceMap": true,
    "noEmit": false,                            // 不生成输出文件
    "removeComments": true,                     // 删除编译后的所有的注释
    "importHelpers": true,                      // 从 tslib 导入辅助工具函数
    "strictNullChecks": true,                   // 启用严格的 null 检查
    "lib": ["es2017"],                          // 指定要包含在编译中的库文件
    "typeRoots": ["node_modules/@types"],
    "types": [
      "node",
    ],
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": [                                 // 需要编译的ts文件一个*表示文件匹配**表示忽略文件的深度问题
    "./src/*.ts",
    "./src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist",
    "**/*.test.ts",
    "public"
  ]
}

生成项目配置package.json

运行命令：

    npm init

配置文件：

    {
  "name": "arest",
  "version": "0.1.0",
  "description": "a rest server use kao2, typescript & mongo db.",
  "main": "app.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zhoutk/arest.git"
  },
  "keywords": [
    "rest",
    "koa2",
    "typescript",
    "mongo"
  ],
  "dependencies": {
    "koa": "^2.5.2"
  },
  "author": "zhoutk@189.cn",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/zhoutk/arest/issues"
  },
  "homepage": "https://github.com/zhoutk/arest#readme",
  "devDependencies": {
    "@types/koa": "^2.0.46",
    "@types/node": "^10.9.4",
    "tslint": "^5.11.0",
    "typescript": "^3.0.3"
  }
}

监测文件改动并编译

运行命令：

    tsc -w

配置vscode项目启动launch.json

配置好后，按F5即可开始调试运行程序

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/dist/app.js",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

tslint的配置与生效

使用tslint可以定制团队共同使用的一些编码规则，这里需要注意的是，不但要全局安装typescript,tslint，还要在项目中安装，不然不能生效。这个鬼折腾了我好久！

{
    "rules": {
        "class-name": true,
        "comment-format": [
            false,
            "check-space"
        ],
        "indent": [
            true,
            "spaces"
        ],
        "no-duplicate-variable": true,
        "no-eval": true,
        "no-internal-module": true,
        "no-trailing-whitespace": false,
        "no-var-keyword": true,
        "one-line": [
            true,
            "check-open-brace",
            "check-whitespace"
        ],
        "quotemark": [
            true,
            "single"
        ],
        "semicolon": [true, "never"],
        "triple-equals": [
            true,
            "allow-null-check"
        ],
        "typedef-whitespace": [
            true,
            {
                "call-signature": "nospace",
                "index-signature": "nospace",
                "parameter": "nospace",
                "property-declaration": "nospace",
                "variable-declaration": "nospace"
            }
        ],
        "variable-name": [
            true,
            "ban-keywords"
        ],
        "whitespace": [
            true,
            "check-branch",
            "check-decl",
            "check-operator",
            "check-separator",
            "check-type"
        ]
    }
}

全局变量的使用

全局变量虽然不能滥用，便也不能没有，以下几点是关键：

  • tsconfig.json中加入 “types”: [ “node”]
  • npm i @types/node
  • 建立globals.d.ts(文件名可以随意取)，在其中声名全局变量（这是让ide知道）
  • 在入口文件（app.ts）中引入全局模块并赋值给node的全局变量global（这是让代码知道）

项目地址

这个项目我准备将express+mysql的成功经验移植到koa2+mongo中来。

https://github.com/zhoutk/arest

使用方法

git clone https://github.com/zhoutk/arest
cd arest
npm i

tsc -w
用vscode打开项目，并按F5运行

小结

终于迈入typescript坑中，痛并快乐着！

    原文作者：zhoutk
    原文地址: https://segmentfault.com/a/1190000016305647
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞