TypeScriptの始め方 — 型チェック・コンパイル・実行を順に試す

ひよこ

TypeScriptは、JavaScriptとどう違うの？

ペンギン先生

JavaScriptに型を使った検査を加えられる言語だよ。数値が必要な関数へ文字列を渡す、といった食い違いを実行前に見つけやすくするんだ。型注釈はJavaScriptへ変換すると消えるので、利用者の入力が正しいかを実行時に検査する仕組みとは別だよ。

ひよこ

何からインストールすればいい？

ペンギン先生

まずNode.jsとnpmを用意し、学習用の空のフォルダでnpm init -y、npm install -D typescript @types/nodeと進めよう。この例はグローバルではなくプロジェクト内に入れるよ。2026年10月9日の手順確認にはTypeScript 7.0.2を使ったんだ。

ひよこ

tsconfig.jsonって、自動生成すればいいんだよね？

ペンギン先生

npx tsc --initで作れるけれど、出力先やモジュール設定は作るものに合わせる必要があるよ。今回はNode.jsで動かす小さな例なので、下に短い設定を載せた。設定を使うときはnpx tsc -p .と実行しよう。ファイル名を渡す方法とは混ぜないのが分かりやすいね。

ひよこ

型はすべて自分で書かないとだめ？

ペンギン先生

初期値から型を推論できる場面では省略できるよ。関数の引数や外から受け取るデータの境界など、意図をはっきりさせたいところに書こう。stringは文字列、numberは数値、booleanは真偽値で、配列ならstring[]のように表せるんだ。

ひよこ

interfaceとtype、どちらを使えばいいの？

ペンギン先生

どちらもオブジェクトの形を表せるよ。interfaceには同名宣言のマージがあり、typeはユニオン型などにも名前を付けられる。どちらが常に優れるとは決めず、公開する型の用途やプロジェクトの規約に合わせるといいよ。

ひよこ

成功と失敗で戻り値が違うときは？

ペンギン先生

kindなどの目印を付けたユニオン型にすると、分岐した後に使えるプロパティを絞り込めるよ。下の例は文字列を数値へ変換し、成功と失敗を表示する。型を書くだけでなく、数値として妥当かは実際の条件式で確かめるんだ。

ひよこ

ジェネリクスやunknownは、いつ使うの？

ペンギン先生

ジェネリクスは入力と出力の型の関係を保つために使えるよ。型が分からない外部入力はunknownとして、typeofなどで確認してから扱う。anyや型アサーションで押し通すと検査を避けられるので、データが正しい証明にはならないんだ。

ひよこ

既存のJavaScriptにも少しずつ入れられる？

ペンギン先生

allowJsでJavaScriptをプロジェクトへ含め、checkJsやファイル単位の指定で検査する方法があるよ。段階的に進められるけれど、ファイル名だけ変えれば移行完了ではないんだ。Viteなどで変換だけを行う場合も、型チェックを別の工程で実行することを確認しよう。

最初に分けたい3つの作業

型チェックで食い違いを調べ、JavaScriptへ変換し、実行環境で動かす。 この3段階を一度ずつ試すのが、この入門の目標です。

TypeScriptの型は、APIの返り値やフォーム入力の内容を自動的に検証するものではありません。変換後のJavaScriptに型注釈は残らないため、外から来る値は実行時にも確かめます。

1. 空のフォルダで準備する

Node.jsとnpmを用意し、次を実行します。既存のアプリではなく、新しい学習用フォルダを使ってください。

mkdir ts-first
cd ts-first
npm init -y
npm install -D typescript @types/node
npx tsc --version

2026年10月9日の確認ではTypeScript 7.0.2を使用しています。package-lock.json はインストールした依存関係を記録するので、再現用に保存します。

フォルダ内に src ディレクトリと、次の tsconfig.json を作ります。

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

これはNode.js向けの設定例です。ブラウザやReactのアプリには、その環境に合う設定を使います。strict は厳密な検査群、noEmitOnError はエラー時のJavaScript出力を止める設定です。

2. 型付きの関数を動かす

src/main.ts を作ります。

interface User {
  name: string;
  age: number;
}

function greet(user: User): string {
  return 'こんにちは、' + user.name + 'さん！';
}

const user = { name: 'ひよこ', age: 3 };
console.log(greet(user));
// greet({ name: 'ひよこ', age: '3' }); // 有効にすると型エラー

設定ファイルを指定してチェックし、変換してから実行します。

npx tsc -p . --noEmit
npx tsc -p .
node dist/main.js

最初のコマンドは検査だけを行い、問題がなければ通常は何も表示しません。2つ目で dist/main.js ができ、3つ目で「こんにちは、ひよこさん！」が表示されます。

コメントにした greet(...) の行を有効にしてもう一度型チェックすると、age に文字列を渡した食い違いを検出できます。確認後はコメントへ戻してください。

この設定を使う手順では tsc src/main.ts に置き換えません。 ファイルを直接渡す呼び方は、プロジェクト設定を使う呼び方と同じではありません。エラー表示や設定の適用範囲を混同しないよう、ここでは -p . に統一します。

3. 成功と失敗をユニオン型で分ける

次のコードを src/main.ts の末尾へ追加し、同じ3コマンドで確認します。

type ParseResult =
  | { kind: 'ok'; value: number }
  | { kind: 'error'; message: string };

function parseCount(input: string): ParseResult {
  const value = Number(input);
  if (input.trim() === '' || !Number.isInteger(value) || value < 0) {
    return { kind: 'error', message: '0以上の整数を入力してね' };
  }
  return { kind: 'ok', value };
}

for (const input of ['3', 'ひよこ']) {
  const result = parseCount(input);
  if (result.kind === 'ok') {
    console.log(result.value);
  } else {
    console.log(result.message);
  }
}

追加部分は 3 と「0以上の整数を入力してね」を表示します。kind を見て分岐すると、成功側では value、失敗側では message を使えます。数値の検証そのものは Number.isInteger などの実行時の処理が行っています。

もう少し知りたい型の使い方

たとえば配列の先頭を返す関数は、空配列の場合も考えます。

function first<T>(items: T[]): T | undefined {
  return items[0];
}

「どんな配列でも必ずTが返る」とはしません。型を詳しく書くことより、実際に起こる結果を型へ反映することが大切です。

よくあるつまずきと次の一歩

• tscが見つからない: プロジェクト内でインストールが済んでいるか確認し、npx tsc で実行します。
• 型エラーなのに動くことがある: 変換ツールが型検査をしているか、エラー時の出力を止めているかを確認します。型検査と変換は分けて実行される場合があります。
• APIの値を型アサーションで変えたのに壊れる: as User などは実データの内容を変換・検証しません。実行時の条件式や検証ライブラリが必要です。
• 既存のJavaScriptを移したい: allowJs と必要に応じて checkJs を使い、小さく検査範囲を増やします。ビルド設定や外部ライブラリの型も確認します。

構文に不安があればJavaScript入門、画面を作りたければReact入門へ進めます。

参考資料

• TypeScript Tooling in 5 minutes

• TSConfig Reference

• Everyday Types

• Narrowing

• TypeScript CLI Options

• Generics