Interface

Interface を分かりやすく

Interface（インターフェース）は、TypeScript の重要な機能の一つで、特定のオブジェクトが特定の型を持つことを保証します。それはちょっとした契約みたいなものですね。ある機能を提供する際に、その機能が何を必要とし、何を返すのかを定義するものと思ってください。

例えば、あるレストランで働くウェイターを考えてみましょう。彼の役割（interface）は注文を受け取り、料理を運ぶことですよね。この「注文を受け取る」ことと「料理を運ぶ」ことがウェイターのインターフェースとなります。ウェイターにはこの契約を満たす必要があり、それを守らないと問題が生じるんですよ。

このように、TypeScript の interface は、オブジェクトが必ず特定のプロパティやメソッドを持つことを保証し、これを満たさないとコンパイラはエラーを出します。

Interface の歴史的変遷

TypeScript が初めてリリースされたときから、Interface はその中心的な機能でした。それは JavaScript の動的な型システムを補完し、開発者がより堅牢なコードを書くのを助けるためです。

TypeScript のバージョンが進化するにつれて、Interface の機能も強化されました。初期のバージョンでは、Interface は主にオブジェクトの形状を定義するために使われました。しかし、最新のバージョンでは、関数やクラスの型も定義できるようになりました。

また、TypeScript 2.8 では、Conditional Types が導入され、Interface の能力をさらに強化しました。これにより、型が特定の条件を満たす場合に限り、特定の型を持つことができます。

Interface と Jamstack の関係

Jamstack の世界では、Interface の使い方は非常に重要になります。なぜなら、Jamstack は多くの API やサービスと連携することが前提だからです。それらのサービスとの連

携は、基本的にはデータを受け取り、それを表示することが中心となります。

そして、これらのデータを安全に扱うためには、データの形状を正確に把握しておくことが重要ですよね。ここで Interface が大活躍します。API から受け取るデータの形状を Interface で定義することで、データを安全に扱うことが可能になります。

Interface を使うメリット

型安全性の向上

Interface は、オブジェクトが特定の型を持つことを保証します。これにより、予期せぬエラーを防ぐことができ、型安全性が向上します。

より良い開発体験

Interface を使用すると、IDE やエディタが型情報を利用して自動補完やエラーチェックを提供します。これにより、開発者の体験が向上します。

ドキュメンテーションとしての役割

Interface はコードのドキュメンテーションとしても働きます。それが何を期待し、何を提供するのかを示すことで、他の開発者がコードを理解しやすくなります。

Interface を実装

それでは、Interface を使った具体的なコードを見てみましょう。

まず、UserというInterfaceを定義します。このUserはnameとemailという2つのプロパティを持つとします。

interface User {
  name: string;
  email: string;
}

次に、このUser型を用いて、Next.jsのコンポーネントを作成します。

type Props = {
  user: User;
}

const UserProfile = ({ user }: Props) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

このように、Interface を用いることで、コンポーネントのpropsがどのような型を持つべきかを明示的に示すことができ、型安全性を向上させることができます。

InterfaceとTypeの違い

InterfaceとTypeは、TypeScriptにおいて共に型の定義を行うための重要な機能ですが、それぞれには特性と用途が異なります。

Interface

Interfaceは主にオブジェクト型を定義するのに用いられます。クラスの実装に用いることも可能であり、JavaやC#など他の言語から来た人にとっては比較的馴染み深い概念かもしれません。

Interface の大きな特徴の一つは、"宣言のマージ"です。同じ名前のInterfaceを複数定義すると、それらは自動的に一つにマージされます。これにより、既存のInterfaceに新たなプロパティを追加することが可能となります。

interface User {
  name: string;
}

interface User {
  email: string;
}

// User => {
//   name: string;
//   email: string;
// }

Type

一方でTypeは、Interfaceでは表現できないような複雑な型定義が可能です。Union型やIntersection型、タプルなど、より複雑な型を定義する場合にはTypeが用いられます。

type User = {
  name: string;
} | {
  email: string;
};

しかし、TypeはInterfaceと異なり、宣言のマージができません。そのため、後から型の定義を変更することはできません。

InterfaceとTypeの使い分け

一般的には、オブジェクトの形状を定義するときはInterfaceを、それ以外の複雑な型を定義するときはTypeを使用する、という使い分けが推奨されています。ただし、これはあくまで一般的なガイドラインであり、プロジェクトによってはこれに沿わない場合もあります。最終的にはプロジェクトの要件やチームの合意によります。

Interface を学ぶ

とTypeの違いについて詳しく解説している記事です。|