🚀 はじめに

TypeScriptはJavaScriptに静的型付けを加えることで、開発効率とコードの保守性を向上させる強力なツールです。しかし、TypeScriptの真価は、効果的な型定義を作成することにあります。この記事では、TypeScriptの型定義の基礎から応用までを網羅的に解説し、実践的なスキルを習得できるようサポートします。

📚 基礎知識

TypeScriptの型定義は、変数や関数の型を明示的に指定することで、コンパイル時に型チェックを行い、潜在的なエラーを早期に発見することができます。これにより、実行時エラーの減少、コードの可読性向上、リファクタリングの容易化に貢献します。

インターフェース

インターフェースは、オブジェクトの構造を定義するために使用されます。複数のプロパティとメソッドを持つオブジェクトの型を表現するのに適しています。

interface Person {
  name: string;
  age: number;
  greet(): void;
}

const john: Person = {
  name: "John Doe",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

john.greet();

型エイリアス

型エイリアスは、既存の型に新しい名前を付けるために使用されます。複雑な型を簡潔に表現するのに役立ちます。

type Point = {
  x: number;
  y: number;
};

const origin: Point = { x: 0, y: 0 };

function distance(point: Point): number {
  return Math.sqrt(point.x * point.x + point.y * point.y);
}

console.log(distance(origin));

ジェネリクス

ジェネリクスを使用すると、特定の型に依存しない再利用可能なコードを作成できます。これは、さまざまなデータ型で動作する関数やコンポーネントを作成するのに役立ちます。

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

let numberResult = identity(5);
let stringResult = identity("hello");

console.log(numberResult);
console.log(stringResult);

ユーティリティ型

TypeScriptには、`Partial`, `Readonly`, `Pick`, `Omit` などのユーティリティ型が用意されています。これらは、既存の型を操作して新しい型を生成するのに役立ちます。

interface Product {
  id: number;
  name: string;
  price: number;
}

// price プロパティを省略した Product 型
type PartialProduct = Partial;

const partialProduct: PartialProduct = { name: "Laptop" };

console.log(partialProduct);

宣言のマージ

TypeScriptでは、同じ名前のインターフェースや型を複数回宣言することで、それらをマージすることができます。これは、既存の型を拡張したり、異なるモジュールで定義された型を結合したりするのに役立ちます。

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
  name: "Alice",
  age: 25,
};

応用編

より高度な型定義テクニックをいくつか紹介します。これらのテクニックは、複雑なアプリケーションを構築する際に役立ちます。

条件付き型

条件付き型は、型推論に基づいて型を決定するために使用されます。

マッピング型

マッピング型は、既存の型のプロパティを変換して新しい型を生成するために使用されます。

🎉 まとめ