TypeScriptの基本型と型推論を理解しよう

プログラミング言語

TypeScriptは、JavaScriptに静的型付けを加えた言語です。型を付けることで、実行前にバグを発見でき、エディタの補完精度も大きく向上します。本記事では、TypeScriptの基本型と、コードを書く負担を減らす「型推論」の仕組みを、初心者向けにわかりやすく解説します。

TypeScriptの基本型

TypeScriptには、JavaScriptと同じプリミティブ型に加え、独自の型表現があります。まずは押さえておきたい主要な型から見ていきます。

プリミティブ型

const title: string = "TypeScript";
const count: number = 42;
const isActive: boolean = true;
const nothing: null = null;
const notDefined: undefined = undefined;

配列とタプル

const nums: number[] = [1, 2, 3];
const tags: Array<string> = ["ts", "js"];

// タプル:要素ごとの型と順序が固定
const point: [number, number] = [10, 20];

オブジェクト型

type User = {
  id: number;
  name: string;
  email?: string;       // ? でオプショナル
  readonly createdAt: Date; // 読み取り専用
};

const user: User = { id: 1, name: "Alice", createdAt: new Date() };

ユニオン型・リテラル型

複数の型を「または」で組み合わせるのがユニオン型、特定の値だけを許可するのがリテラル型です。両者の組み合わせで、JavaScriptでは表現しにくい厳密な型定義ができます。

type Status = "draft" | "published" | "archived";
type Id = string | number;

let s: Status = "draft";   // OK
// s = "deleted";          // エラー:許可されていない値

any・unknown・never

  • any:型チェックを無効化(極力避ける)
  • unknown:任意の値だが、使う前に型を絞る必要がある(anyの安全版)
  • never:到達不能・絶対に発生しない値を表す
function parse(value: unknown) {
  if (typeof value === "string") {
    return value.toUpperCase(); // ここではstringに絞り込まれている
  }
}

型推論とは

TypeScriptは、型注釈を書かなくても値や使われ方から自動で型を判定してくれます。これが「型推論」です。すべてに型を書く必要はなく、推論にまかせるほどコードは読みやすくなります。

const name = "Bob";       // string と推論
const score = 100;        // number と推論
const fruits = ["apple"]; // string[] と推論

function double(n: number) {
  return n * 2;           // 戻り値は number と推論
}

contextual typing(文脈からの推論)

コールバック関数の引数のように、「文脈上どんな型であるべきか」が決まる場面では、引数に型を書かなくてもTypeScriptが推論してくれます。

[1, 2, 3].map((n) => n * 2);
// n は number と推論される

const assertion で推論を狭める

配列やオブジェクトリテラルに as const を付けると、推論結果が「読み取り専用+具体的なリテラル型」に絞り込まれます。

const role = "admin" as const;   // 型は "admin"("admin"|"user"ではない)
const tuple = [1, "x"] as const;  // readonly [1, "x"]

型注釈を書くべき場面・任せる場面

  • 書くべき:関数の引数、公開API、外部入力(fetch結果など)
  • 推論に任せてよい:ローカル変数、戻り値(公開関数は明示する派も多い)、コールバック引数

tsconfigはstrictをONに

TypeScriptの恩恵を最大化するなら、tsconfig.json"strict": true を有効にしましょう。null安全・厳密な関数型チェックなど、複数の厳格モードが一括で有効になります。

まとめ

TypeScriptは「すべてに型を書く」のではなく、必要なところだけ明示し、あとは推論に任せるのが上手な使い方です。基本型・ユニオン・リテラル・unknownを押さえ、推論を活かしてシンプルに書くことを意識してみてください。strictモードを有効にして書き始めれば、自然と型のセンスが磨かれていきます。