TypeScriptのモジュールとプロジェクト設定 | TypeScript入門

exportとimportでファイルを分ける

外から使わせる値や関数だけをexportし、利用側でimportします。

src/price.tsTYPESCRIPT

export function calculateTax(price: number): number {
  return Math.floor(price * 0.1);
}

src/main.tsTYPESCRIPT

import { calculateTax } from "./price.js";

const price = 1500;
console.log(price + calculateTax(price));

実行結果OUTPUT

Node.jsのES Modulesとして実行する設定では、TypeScript側のimportにも出力後の.js拡張子を書きます。設定や実行環境によって解決方法が異なるため、混在させません。

package.jsonへコマンドを登録する

開発者全員が同じコマンドを使えるよう、scriptsへ型チェックとビルドを登録します。

package.jsonの要点JSON

{
  "type": "module",
  "scripts": {
    "check": "tsc --noEmit",
    "build": "tsc",
    "start": "node dist/main.js"
  },
  "devDependencies": {
    "typescript": "使用するバージョン"
  }
}

実行COMMAND

npm run check
npm run build
npm start

成功時の例OUTPUT

> tsc --noEmit
> tsc
> node dist/main.js
1650

package-lock.jsonもバージョン管理し、依存関係の解決結果を共有します。

tsconfig.jsonを読む

学習用の設定例JSON

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "noEmitOnError": true
  },
  "include": ["src/**/*.ts"]
}

設定	役割
`strict`	厳格な型チェック群を有効化
`rootDir`／`outDir`	入力元と出力先を分離
`noEmitOnError`	型エラー時に出力しない
`include`	検査対象を限定

設定は環境に合わせる ブラウザ、Node.js、フレームワークでは推奨設定が異なります。利用する環境の公式テンプレートを基準にし、各項目の意味を確認します。

ライブラリの型定義を扱う

TypeScript対応ライブラリはパッケージ内に型定義を含むことがあります。含まれない場合だけ、対応する@typesパッケージを開発用依存へ追加します。

Node.js APIの型を追加する例COMMAND

npm install --save-dev @types/node

.d.tsは実装ではなく、既存のJavaScript APIの型を宣言するファイルです。型定義を入れても実行用ライブラリ本体が入るとは限りません。

型エラーをskipで隠す前に ライブラリ本体と型定義のバージョン、import方法、公式のTypeScript対応状況を確認します。

小さなプロジェクトを整理する

構成例TEXT

typescript-practice/
├── src/
│   ├── main.ts
│   ├── price.ts
│   └── price.test.ts
├── dist/
├── package.json
├── package-lock.json
└── tsconfig.json

srcへ編集するコード、distへ生成物を置きます。生成物やnode_modulesは通常Gitへ含めず、package.jsonとロックファイルから再現します。

PRACTICE

ミニ課題：単位変換を分離する

摂氏を華氏へ変換するtoFahrenheit関数をtemperature.tsからexportし、main.tsで読み込んで20℃を変換してください。

期待する結果OUTPUT

← 型を使いこなすクラスと設計へ →