0Pricing
TypeScript Academy · レッスン

オブジェクト型、optional/readonly、インデックスシグネチャ

プロパティを持つオブジェクト型を定義し、一部をoptionalまたはreadonlyに設定し、柔軟なキーにはインデックスシグネチャを使います

「オブジェクト型、optional/readonly、インデックスシグネチャ」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

導入

目標：TypeScriptで構造化されたオブジェクトを定義します。オブジェクト型、オプションプロパティ、readonly修飾子、動的なキーに対応するインデックスシグネチャについて学びます。

基本的なオブジェクト

オブジェクト型は、プロパティ名とその型を定義します。すべてのオブジェクトは、宣言された構造を満たす必要があります。

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

const u: User = { id: 1, name: "Ada" };
console.log(u);

オプショナルプロパティ

オプショナルプロパティには「?」を使用します。オブジェクトでは省略でき、TypeScriptは使用前にundefinedかどうかをチェックします。

type User = {
  id: number;
  name: string;
  email?: string; // optional
};

const a: User = { id: 1, name: "Ada" };
const b: User = { id: 2, name: "Lin", email: "l@example.com" };

readonlyプロパティ

readonlyを付けると、初期化後にプロパティを再代入できなくなります。定数や設定オブジェクトに適しています。

type Config = {
  readonly version: number;
  name: string;
};

const cfg: Config = { version: 1, name: "App" };
// cfg.version = 2; // Error, readonly

インデックスシグネチャ

インデックスシグネチャを使うと、特定の型を持つ未知のプロパティ名を許可できます。たとえば、キーは文字列で、値は数値になります。

type Dictionary = {
  [key: string]: number;
};

const scores: Dictionary = { math: 95, eng: 88 };
console.log(scores["math"]);

概念の組み合わせ

同じ型でreadonly、オプショナル、インデックスシグネチャを組み合わせると、柔軟性と安全性を両立したモデルを作成できます。

type Settings = {
  readonly id: string;
  theme?: "light" | "dark";
  [extra: string]: string | number | undefined;
};

const s: Settings = { id: "abc", theme: "dark", fontSize: 14 };
console.log(s);

オプショナルプロパティの確認

確認問題：「?」をプロパティの後に付けると、何を意味しますか？

まとめ

まとめ：オブジェクトでは、必須、オプショナル、readonly、インデックスシグネチャのプロパティを宣言できます。これらの機能によって、柔軟性と安全性のバランスを取れます。

よくある質問

「オブジェクト型、optional/readonly、インデックスシグネチャ」レッスンは無料ですか？

はい。「オブジェクト型、optional/readonly、インデックスシグネチャ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「オブジェクト型、optional/readonly、インデックスシグネチャ」で何を学びますか？

プロパティを持つオブジェクト型を定義し、一部をoptionalまたはreadonlyに設定し、柔軟なキーにはインデックスシグネチャを使います ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「オブジェクト型、optional/readonly、インデックスシグネチャ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. オブジェクト型、optional/readonly、インデックスシグネチャ
  2. InterfaceとType Aliasの比較
  3. 構造的型付けと余分なプロパティチェック
← TypeScript Academyに戻る