TypeScript の型パズル解説

TypeScript は JavaScript に型の概念を導入し、より安全で予測可能なコードを書くことを可能にします。しかし、TypeScript の型システムは非常に強力であるがゆえに、時に複雑に感じることもあります。そこで、今回は TypeScript の型パズルを通して、型の理解を深めていきましょう。

型パズルとは？

型パズルとは、型に関する問題を解くことで、言語の型システムに対する理解を深めることを目的としたものです。パズルを解くことで、日々のコーディングでの型エラーを未然に防ぐ力が養われます。

基本の型パズル

まずは基本的な型パズルから始めましょう。以下のコードを見てください。

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

const result = add(2, "3");

このコードは一見正しそうに見えますが、実はエラーが発生します。add 関数は 2 つの number 型の引数を受け取り、number 型の結果を返すように定義されています。しかし、"3" は string 型なので、引数 b に渡すことはできません。

解決法

この問題を解決するためには、add 関数の引数に正しい型を渡す必要があります。

const result = add(2, 3); // 修正

中級型パズル

次に、少し複雑な型パズルに挑戦してみましょう。

type User = {
  name: string;
  age: number;
};

function getUserName(user: User): string {
  return user.name;
}

const user = {
  name: "Alice",
  age: "25", // なぜか年齢が文字列になっている
};

const userName = getUserName(user);

このコードには、user オブジェクトの age プロパティが文字列で定義されているという問題があります。User 型では age は number 型として定義されているため、この状態では型エラーが発生します。

解決法

user オブジェクトの age プロパティを正しい型に修正します。

const user = {
  name: "Alice",
  age: 25, // 修正
};

応用型パズル

最後に、さらに応用的な型パズルを解いてみましょう。ジェネリクスを使った例です。

function identity<T>(arg: T): T {
  return arg;
}

const result1 = identity<number>(42);
const result2 = identity<string>("hello");

const result3 = identity(42); // ここで推論させる
const result4 = identity("hello");

ジェネリクスを使うと、関数の引数や返り値の型を柔軟に指定することができます。この例では、identity 関数は引数の型をそのまま返します。result3 や result4 のように、型を省略しても TypeScript が自動で推論してくれます。

まとめ

TypeScript の型パズルを解くことで、型システムに対する理解を深めることができます。型を正しく使うことは、安全で効率的なプログラミングの基礎です。ぜひ、日々のコーディングに役立ててください。