Day 2・オブジェクト・配列・型に名前をつける

interfaceとtype(データの形に名前をつける)

毎回長い型を書くのをやめ、interfaceやtypeでデータの形に名前をつけて再利用する。

同じ形を何度も書くのは大変

前のレッスンで { name: string; age: number; email: string } という型を書きました。でも、この形のユーザーを何箇所でも使うたびに同じ型を書き直すのは面倒で、間違いのもとです。そこで「この形に名前をつけて再利用する」仕組みがとです。

TYPESCRIPT

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

const user: User = {
  name: "田中",
  age: 30,
  email: "tanaka@example.com",
};

interface で User という名前の形を定義し、それを型として使う

interface User { ... } は「User という形はこういうプロパティを持つ」という約束です。一度定義すれば、User と書くだけでその形を指せます。

AIにはこう聞く

「このJSONに対応する interface を作って」とAIに頼むと、形に合った User のような型を一発で作ってくれます。あなたはプロパティ名と型が実際のデータと合っているかを確認します。型に名前があると、AIとの会話でも『User型を渡して』のように短く正確に指示できます。

type というキーワードでも、形に名前をつけられます。オブジェクトの形に名前をつける用途では、interface とほぼ同じように使えます。

TYPESCRIPT

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

const user: User = { name: "田中", age: 30, email: "tanaka@example.com" };

type でも同じ User を定義できる。= が付く点に注意

名前をつけないと重複する

TYPESCRIPT

function greet(u: { name: string; age: number }) {}
function save(u: { name: string; age: number }) {}
// 同じ形を何度も手書き。片方だけ直すと不整合

名前をつけると一箇所で管理

TYPESCRIPT

interface User { name: string; age: number }
function greet(u: User) {}
function save(u: User) {}
// User を直せば全部に反映される

interfaceとtypeどちらを使う

オブジェクトの形に名前をつけるだけなら、どちらを使っても構いません。この教材ではデータの形は interface を中心に使います。type は後で出てくる複数の型を組み合わせる場面(union など)で力を発揮します。まずは「形に名前をつける道具が2つある」と覚えておけば十分です。

定義と使う場所を混同しない

interface User { ... } は「型の定義」で、値そのものではありません。実際のデータ(値)は const user: User = { ... } のように別に用意します。型は設計図、値は実際の中身、という関係です。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

答えられれば、面接で説明できる状態に一歩近づきます。

interface や type を使って型に名前をつける主な利点はどれですか。

次のうち、type を使った正しい定義はどれですか。

APIから受け取るユーザーデータに interface で名前をつけておくと、開発中にどんな場面で役立ちますか。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。