型チェックに TypeScript を導入（基本） — tsc --init（設定手順）
JavaScript は柔軟ですが「型の間違い」によるバグが起きやすいです。
そこで TypeScript を導入すると「型チェック」ができ、コードの安全性がぐっと上がります。
初心者は「TypeScript = 型付き JavaScript」と覚えると理解しやすいです。
1. TypeScript のインストール
まずプロジェクトに TypeScript を追加します。
npm install --save-dev typescript
2. 設定ファイルの作成（tsconfig.json）
初期化コマンドを実行すると設定ファイルが生成されます。
npx tsc --init
これでプロジェクトルートに tsconfig.json が作成されます。
このファイルでコンパイル方法やチェックルールを指定します。
3. よく使う基本設定
生成された tsconfig.json の中で初心者が押さえておくべき項目：
{
"compilerOptions": {
"target": "ES6", // 出力するJavaScriptのバージョン
"module": "commonjs", // モジュール形式（Node.jsならcommonjs）
"strict": true, // 厳格な型チェックを有効化
"esModuleInterop": true, // import/export を使いやすくする
"outDir": "./dist", // 出力先フォルダ
"rootDir": "./src" // ソースコードフォルダ
}
}
4. 基本のコード例
型付き変数
let count: number = 10;
let name: string = "Aki";
let isActive: boolean = true;
型付き関数
function greet(name: string): string {
return `Hello, ${name}`;
}
console.log(greet("Mika")); // OK
// console.log(greet(123)); // エラー: numberはstringに渡せない
オブジェクトの型
type User = {
id: number;
name: string;
};
const u: User = { id: 1, name: "Ken" };
// const u2: User = { id: "abc", name: "Ken" }; // エラー
5. コンパイルと実行
- TypeScript をコンパイル
npx tsc→srcフォルダの.tsファイルがdistフォルダに.jsとして出力される。 - Node.js で実行
node dist/index.js
6. 例題: 型チェックでバグ防止
function add(a: number, b: number): number {
return a + b;
}
console.log(add(2, 3)); // → 5
// console.log(add("2", "3")); // エラー: stringはnumberに渡せない
- 効果: 間違った型を渡すとコンパイル時にエラーになり、実行前にバグを防げる。
実務でのコツ
strict: trueを必ず有効化 → 型チェックが強力になる。rootDirとoutDirを設定 → ソースと出力を分けて管理しやすい。- VSCode と組み合わせると最強 → エディタが型エラーをリアルタイムで表示してくれる。
練習問題（ユーザー型を使った関数）
type User = {
id: number;
name: string;
};
function printUser(user: User): void {
console.log(`ID=${user.id}, Name=${user.name}`);
}
printUser({ id: 1, name: "Aki" }); // OK
// printUser({ id: "x", name: "Aki" }); // エラー
直感的な指針
- TypeScript = 型付き JavaScript。
tsc --initで設定ファイルを作る。- 型を付けると間違いをコンパイル時に検出できる。
- 初心者は「変数」「関数」「オブジェクト型」から練習すると理解が深まる。
これを覚えれば「型チェックで安全なコード」を書けるようになり、バグを減らして安心して開発できます。