[守] TypeScriptことはじめ

はじめに

対象はTypeScript初学者（私）。TypeScript開発において必要最小限のコマンドや手順を備忘としてまとめておきます。「WEB+DB PRESS Vol.117 / 実践投入TypeScript」を参考とさせていただきました。「もっとこうするとよいよ」のようなものがあればコメントいただけると嬉しいです。

※本記事記載のコード、コマンドの最終検証日は2022/02/05、実行環境のNode.jsはv16.13.2、TypeScriptコンパイラはv8.3.2。

開発環境を整備する

前提条件

• Node.jsがインストールされていること

実行手順

プロジェクトのホームディレクトリを整備後、Node.js環境を初期化、TypeScript開発に必要最小限のnpmパッケージをインストールし、TypeScriptコンパイラの設定ファイルを生成します。

commands

# [Step1] プロジェクトのホームディレクトリ (例：sample_project) を作成
$ mkdir sample_project
$ cd sample_project

# [Step2] コンパイル対象TypeScriptファイル（tsファイル）を格納するディレクトリを作成
$ mkdir src dist

# [Step3] コンパイル後のJavaScriptファイル（jsファイル）が格納されるディレクトリを作成
$ mkdir src dist

# [Step4] Node.js環境を初期化
$ npm init --yes

# [Step5] TypeScriptコンパイラ (tsc) をインストール
$ npm install --save-dev typescript 

# [Step6] TypeScriptファイルのコンパイル&実行ツール (ts-node) をインストール
$ npm install --save-dev ts-node

# [Step7] TypeScriptコンパイラの設定ファイル (tsconfig.json) を生成
$ npx tsc --init

コマンド投入後のディレクトリ構造はこのようになります。

${project_home}/
  ├ src/              # [手動生成] コンパイル対象のtsファイルを格納するディレクトリ
  ├ dist/             # [手動生成] コンパイル後のjsファイルが格納されるディレクトリ
  ├ node_modules/     # [自動生成] Node.jsのモジュールが格納されるディレクトリ
  ├ package.json      # [自動生成] Node.jsの設定ファイル
  ├ package-lock.json # [自動生成] Node.jsの設定ファイル
  └ tsconfig.json     # [自動生成] TypeScriptコンパイラの設定ファイル

次にTypeScriptコンパイラのコンパイル条件を設定。tsconfig.jsonを編集します。以下はコンパイル条件をかなり厳格にした場合の例。主要なパラメータの値のみ指定しています。各パラメータの意味は必要に応じて調べてみてください。

./tsconfig.json

{
  "compilerOptions": {
    /* Language and Environment */
    "target": "es5",                          /* コンパイル後jsファイルのECMAScriptバージョンを指定 */
    "lib": ["dom","es2020"],                  /* コンパイル後jsファイルの実行環境で必要なライブラリを指定 */

    /* Modules */
    "esModuleInterop": true,                  /* デフォルトtrue */
    "forceConsistentCasingInFileNames": true, /* デフォルトtrue */
    "module": "commonjs",                     /* 利用するモジュールシステムを指定 */
    "rootDir": "src",                         /* コンパイル対象のtsファイルを格納するディレクトリを指定 */
    "outDir": "dist",                         /* コンパイル後のjsファイルが格納されるディレクトリを指定 */

    /* Interop Constraints */
    "esModuleInterop": true,                  /* デフォルトtrue */
    "forceConsistentCasingInFileNames": true, /* デフォルトtrue */

    /* Type Checking */
    "strict": true,                           /* デフォルトtrue */
    "noUnusedLocals": true,                   /* 未使用のローカル変数は許可しない */
    "noUnusedParameters": true,               /* 未使用の関数引数は許可しない */
    "noImplicitReturns": true,                /* 戻り値の方未一致は許可しない */
    "noFallthroughCasesInSwitch": true,       /* switch文のフォールスルーを許可しない */

    /* Completeness */
    "skipLibCheck": true,                     /* デフォルトtrue */
  },
  "include": [                                /* コンパイル対象を指定 */
    "src/**/*",
  ],
  "exclude" : [                               /* コンパイル対象外を指定 */
    "node_modules",
    "**/*.test.ts",
  ]
}

これで開発環境の整備は完了。

TypeScriptで開発する

コンパイル対象のTypeScriptファイルを用意

実験用に簡単なサンプルコードを用意しました。上記 tsconfig.json で動きます。

src/index.ts

import { hello } from './hello';
hello('yourname');

src/hello.ts

export const hello = (name: string) => {
    console.log(`Hello ${name} !`);
};

コンパイル

ホームディレクトリでコマンド npx tsc を実行すると tsconfig.json/compilerOptions/rootDir で指定したディレクトリに格納されているTypeScriptファイル（tsファイル）がコンパイルされ、コンパイル結果のJavaScriptファイル（jsファイル）が tsconfig.json/compilerOptions/outDir で指定したディレクトリに格納されます。

$ npx tsc

実行

コンパイル結果のjsファイルが実行可能な形態であれば node コマンドで実行できます。

$ node dist/${実行するjsファイル}

# サンプルコードを利用した場合
$ node dist/index.js

コマンド npx ts-node を利用することで、コンパイルと実行を1コマンドで行えます。便利。

$ npx ts-node src/${コンパイルするtsファイル} 

# サンプルコードを利用した場合
$ npx ts-node src/index.ts

あとはひたすらコードを書く。

学習参考リンク

• Webで始めるTypeScript独習 | CodeZine
• TypeScript Deep Dive [英語版] / [日本語版]