フロントエンドではなく、バックエンドで使う。

パッケージ追加

yarn add typescript @types/express @types/node --dev

package.json編集

{
  "name": "sample",
  "version": "0.0.0",
  "license": "MIT",
  "type": "module",
  "engines": {
    "node": "~16.0.0"
  },
  "scripts": {
    "clean": "tsc --build --clean",
    "build": "tsc --build",
    "start": "node ./dist/index.js"
  },
  "packageManager": "yarn@3.2.1",
  "dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.13",
    "@types/node": "^18.0.6",
    "jest": "^28.1.3",
    "typescript": "^4.7.4"
  }
}

ポイントはtypeとscriptsあたり。

“type”: “module”はESM Moduleとして認識させるために必要。

“scripts”はTypeScript関連。
tsconfig.jsonでJavaScript出力先を決めているので、そちらを指定。

ts-node/esmを使えば良いらしいけど、こちらの環境ではモジュールの参照絡みで上手くいかないため、TypeScript→JavaScriptを手動で。

CIツールなら、コマンドが1つ2つ増えたところで些細なもの。

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "ES2022",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "lib": ["es2022"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */

    /* Modules */
    "module": "Node16",                                /* Specify what module code is generated. */
    "rootDir": "./src",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "Node16",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */

    /* Emit */
    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
    "removeComments": true,                           /* Disable emitting comments. */

    /* Interop Constraints */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */

    /* Completeness */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  },
  "ts-node": {
    "esm": true
  }
}

ts-nodeの定義は残骸。今回は要らない。

Node16やES2022を指定しているので、利用するライブラリ次第で自滅しそうだけど、クリーンな環境ってことで。特攻あるのみ。

とりあえず、expressのHello Worldは動かせたのでOKとしよう。