TypeScript | 基礎文法:オブジェクト基礎 – オブジェクト型の基本

TypeScript
スポンサーリンク

オブジェクト型とは何か(まずはざっくりイメージ)

オブジェクト型は、「関連する複数の値を、1つのまとまりとして扱うための型」です。
nameage のような「項目(プロパティ)」と、その型をセットで定義します。

const user = {
  name: "Taro",
  age: 20,
};
TypeScript

JavaScriptではこれだけですが、TypeScriptでは
name は string」「age は number」といったルールを型として決めておけるのがポイントです。


オブジェクト型の基本的な書き方

無名オブジェクト型でその場で書く

関数の引数などに、直接オブジェクト型を書くことができます。

function greet(person: { name: string; age: number }) {
  console.log(`Hello, ${person.name} (${person.age})`);
}

greet({ name: "Taro", age: 20 });
TypeScript

ここで TypeScript は、
person には必ず name: stringage: number がある、と理解します。

name を書き忘れたり、age に文字列を渡そうとすると、コンパイル時にエラーになります。
「どんな項目があって、どんな型か」を構造として決めるのがオブジェクト型です。

型に名前を付ける(type / interface)

同じ形のオブジェクトを何度も使うなら、名前を付けた方が読みやすくなります。

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

function greet(user: User) {
  console.log(`Hello, ${user.name}`);
}
TypeScript

あるいは interface でも同じことができます。

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

どちらも「name: stringage: number を持つオブジェクト」という構造を表します。
「この形のオブジェクトを User と呼ぶ」と決めておくことで、コード全体の意味がぐっと分かりやすくなります。


プロパティ名と型をセットで考える感覚

「キー: 型」のペアが並んでいるだけ

オブジェクト型の中身は、基本的に「プロパティ名: 型」の組み合わせです。

type Product = {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
};
TypeScript

ここで決まるのは、

  • id は number
  • name は string
  • price は number
  • inStock は boolean

というルールです。

const p: Product = {
  id: 1,
  name: "Book",
  price: 1200,
  inStock: true,
};
TypeScript

price"1200" にしたり、inStock"yes" にするとエラーになります。
「項目ごとに型を固定する」ことで、間違ったデータが入るのを防ぐのがオブジェクト型の役割です。


オプションプロパティ(あってもなくてもいい項目)

? を付けると「なくてもOK」になる

すべてのプロパティが必須とは限りません。
「あるかもしれないし、ないかもしれない」項目は、? を付けてオプションにできます。

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

const u1: User = { name: "Taro" };        // OK(age なし)
const u2: User = { name: "Hanako", age: 18 }; // OK(age あり)
TypeScript

age? と書くことで、age は「number かもしれないし、存在しないかもしれない」という意味になります。

このとき、実際に使う側では「ないかもしれない」ことを意識する必要があります。

function printUser(user: User) {
  console.log(user.name);
  if (user.age !== undefined) {
    console.log(user.age);
  }
}
TypeScript

「オプションにする」というのは、
「この項目は必須ではない」という仕様を型に刻むことです。


オブジェクト型を使うメリットを具体的に感じる例

バラバラの引数より、オブジェクト1つの方が分かりやすい

// 悪い例(何が何だか分かりにくい)
function createUser(name: string, age: number, isAdmin: boolean) {}

// 良い例(意味がはっきりする)
type CreateUserParams = {
  name: string;
  age: number;
  isAdmin: boolean;
};

function createUser(params: CreateUserParams) {
  // params.name, params.age, params.isAdmin
}
TypeScript

呼び出し側も、オブジェクト型の方が圧倒的に読みやすくなります。

createUser({
  name: "Taro",
  age: 20,
  isAdmin: false,
});
TypeScript

「どの値がどの意味なのか」が、プロパティ名で一目瞭然です。
オブジェクト型は「意味のあるまとまり」をそのまま型にする道具だと考えると、使いどころが見えてきます。


初心者がまず掴んでおきたい「オブジェクト型の感覚」

オブジェクト型の本質は、とてもシンプルです。

  • 「このオブジェクトには、こういう項目があってほしい」
  • 「この項目には、この型の値だけ入ってほしい」

この2つを、コードの外ではなく「型」として宣言するものです。

だからこそ、

  • ユーザー情報(id, name, email)
  • 商品情報(id, name, price, inStock)
  • 設定(theme, language, debugMode)

のような「意味のあるまとまり」を見つけたら、
一度 { ... } でオブジェクト型として書き出してみるといいです。

「バラバラの変数」から「構造を持った1つの型」に変わった瞬間、
コードの見通しと安全性が、目に見えて変わってきます。

タイトルとURLをコピーしました