Visual Studio CodeでTypeScript開発を快適に！tsconfig.jsonとspec/testフォルダの活用術
TypeScript で tsconfig.json と spec/test フォルダを設定する方法
このチュートリアルでは、TypeScript プロジェクトで tsconfig.json ファイルと spec/test フォルダを使用して、テストと開発環境を効率的に設定する方法を説明します。
前提知識
- TypeScript の基本的な知識
- Visual Studio Code の基本的な使い方
手順
-
プロジェクトのセットアップ
- 新しいディレクトリを作成し、プロジェクトの名前を付けます。
- ディレクトリ内に
srcフォルダを作成します。 srcフォルダ内に、ソースコードを格納するサブフォルダを作成します。
-
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フォルダを除外します。
-
テストの実行
- テストランナー (Jest など) をインストールします。
- 以下のコマンドを実行して、テストを実行します。
npx jest
補足
- 上記の設定はあくまで一例であり、プロジェクトのニーズに合わせて調整する必要があります。
Visual Studio Code で TypeScript プロジェクトを開発する場合、以下の設定を行うことで、開発環境をより快適に利用することができます。
- TypeScript 拡張機能をインストールします。
tsconfig.jsonファイルをプロジェクトルートに配置します。- Visual Studio Code でプロジェクトを開きます。
- ステータスバーに緑色のチェックマークが表示されれば、TypeScript の設定が正しく行われています。
tsconfig.json ファイルと spec/test フォルダを使用することで、TypeScript プロジェクトのテストと開発環境を効率的に設定することができます。Visual Studio Code と組み合わせて使用することで、さらに快適な開発環境を構築することができます。
TypeScript で tsconfig.json と spec/test フォルダを設定するサンプルコード
プロジェクト構成
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"
}
}
{
"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);
});
});
実行方法
- プロジェクトディレクトリに移動します。
npm install
npx jest
このコマンドを実行すると、Jest テストランナーが起動し、spec フォルダ内のすべてのテストファイルを実行します。テストが成功すると、緑色の出力がコンソールに表示されます。テストが失敗すると、赤い出力がコンソールに表示され、エラーの詳細が表示されます。
TypeScript で tsconfig.json と spec/test フォルダを設定するその他の方法
include と exclude オプションを省略する
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 フォルダ内のパスにマップされます。
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 フォルダを基準とした絶対パスとして解釈されます。
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 コンパイラはファイル変更を監視し、変更があった場合は自動的にコンパイルします。
TypeScript で tsconfig.json ファイルと spec/test フォルダを設定する方法はいくつかあります。上記で紹介した方法は、ほんの一例です。プロジェクトのニーズに合わせて、最適な方法を選択してください。
typescript visual-studio-code tsconfig
