Visual Studio CodeでTypeScript開発を快適に！tsconfig.jsonとspec/testフォルダの活用術

TypeScript で tsconfig.json と spec/test フォルダを設定する方法

このチュートリアルでは、TypeScript プロジェクトで tsconfig.json ファイルと spec/test フォルダを使用して、テストと開発環境を効率的に設定する方法を説明します。

前提知識

• Visual Studio Code の基本的な使い方
• TypeScript の基本的な知識

手順

1. プロジェクトのセットアップ

   • 新しいディレクトリを作成し、プロジェクトの名前を付けます。
   • ディレクトリ内に src フォルダを作成します。
   • src フォルダ内に、ソースコードを格納するサブフォルダを作成します。
   • src フォルダ内に spec フォルダを作成します。

2. tsconfig.json ファイルの作成

   • プロジェクトのルートディレクトリに tsconfig.json ファイルを作成します。
   • 以下の内容を tsconfig.json ファイルに追加します。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "outDir": "./dist",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "spec/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

• 上記の設定は、以下のことを意味します。
  • ターゲット JavaScript バージョンを ES6 に設定します。
  • CommonJS モジュール方式を使用します。
  • 厳格なモードを有効にします。
  • ES モジュール相互運用性を有効にします。
  • ライブラリチェックをスキップします。
  • ファイル名のケースを一致させます。
  • 暗黙の any 型の使用を禁止します。
  • null と undefined のチェックを厳格にします。
  • コンパイルされたコードを dist フォルダに出力します。
  • @ プレフィックス付きのパスを src フォルダ内のパスにマップします。
  • src フォルダ内のすべての TypeScript ファイルと spec フォルダ内のすべての TypeScript ファイルを含めます。
  • node_modules フォルダと dist フォルダを除外します。

1. テストの実行

   • テストランナー (Jest など) をインストールします。
   • 以下のコマンドを実行して、テストを実行します。

npx jest

• 上記の設定はあくまで一例であり、プロジェクトのニーズに合わせて調整する必要があります。

Visual Studio Code で TypeScript プロジェクトを開発する場合、以下の設定を行うことで、開発環境をより快適に利用することができます。

• ステータスバーに緑色のチェックマークが表示されれば、TypeScript の設定が正しく行われています。
• Visual Studio Code でプロジェクトを開きます。
• tsconfig.json ファイルをプロジェクトルートに配置します。
• TypeScript 拡張機能をインストールします。

project-root
├── src
│   ├── index.ts
│   └── math.ts
├── spec
│   └── math.spec.ts
├── tsconfig.json
└── package.json

package.json

{
  "name": "typescript-example",
  "version": "1.0.0",
  "description": "TypeScript example project",
  "main": "src/index.ts",
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "@types/jest": "^28",
    "jest": "^28",
    "ts-node": "^10"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "outDir": "./dist",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "spec/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

src/index.ts

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

src/math.ts

import { add, subtract } from "./index";

export function multiply(a: number, b: number): number {
  return a * b;
}

export function divide(a: number, b: number): number {
  return a / b;
}

spec/math.spec.ts

import { add, subtract, multiply, divide } from "../src/math";

describe("Math operations", () => {
  it("should add two numbers correctly", () => {
    expect(add(1, 2)).toBe(3);
  });

  it("should subtract two numbers correctly", () => {
    expect(subtract(4, 2)).toBe(2);
  });

  it("should multiply two numbers correctly", () => {
    expect(multiply(3, 5)).toBe(15);
  });

  it("should divide two numbers correctly", () => {
    expect(divide(10, 2)).toBe(5);
  });
});

実行方法

1. プロジェクトディレクトリに移動します。

npm install
npx jest

tsconfig.json ファイルの include と exclude オプションを省略すると、TypeScript コンパイラはプロジェクト内のすべての TypeScript ファイルを自動的にコンパイルします。これは、小規模なプロジェクトや、すべてのファイルをコンパイルする必要があるプロジェクトに適しています。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "outDir": "./dist"
  }
}

paths オプションを使用してエイリアスを設定する

tsconfig.json ファイルの paths オプションを使用して、エイリアスを設定することができます。これは、長いパスを入力せずに、コード内でモジュールを簡単に参照できるようにするのに役立ちます。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "outDir": "./dist",
    "paths": {
      "@math": ["src/math"],
      "@utils": ["src/utils"]
    }
  }
}

上記の設定では、@math プレフィックス付きのパスは src/math フォルダ内のパスにマップされ、@utils プレフィックス付きのパスは src/utils フォルダ内のパスにマップされます。

baseUrl オプションを使用して基本パスを設定する

tsconfig.json ファイルの baseUrl オプションを使用して、基本パスを設定することができます。これは、すべてのパスを相対パスではなく、絶対パスとして解釈するように TypeScript コンパイラに指示するのに役立ちます。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "outDir": "./dist",
    "baseUrl": "./src"
  }
}

上記の設定では、すべてのパスは src フォルダを基準とした絶対パスとして解釈されます。

watch オプションを使用して、ファイル変更を監視する

tsconfig.json ファイルの watch オプションを使用して、ファイル変更を監視し、変更があった場合は自動的にコンパイルするように TypeScript コンパイラに指示することができます。これは、開発中にコードを頻繁に変更する場合に役立ちます。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "outDir": "./dist",
    "watch": true
  }
}

上記の設定では、TypeScript コンパイラはファイル変更を監視し、変更があった場合は自動的にコンパイルします。