オプショナルと Readonly プロパティ

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 41/73。

TypeScriptは、この制御を可能にする2つの強力な修飾子を提供します。それは、オプションプロパティ修飾子とreadonly修飾子です。

? 記号はプロパティを任意（オプショナル）にします。つまり、オブジェクトを作成する際にそのプロパティが存在しなくてもよいという意味です。これは、常に必要とは限らないプロパティに便利です：

interface User {
  name: string;
  email?: string;  // 任意のプロパティ
}

let user1: User = { name: "Alice" };  // 有効 - emailは任意です
let user2: User = { name: "Bob", email: "bob@example.com" };  // これも有効です

readonly修飾子は、オブジェクトの作成後にプロパティが変更されるのを防ぎます。これは、一意の識別子のように、一定に保つべきプロパティに最適です：

interface Product {
  readonly id: number;  // 作成後は変更できません
  name: string;
}

let product: Product = { id: 1, name: "Laptop" };
product.name = "Gaming Laptop";  // 有効
// product.id = 2;  // エラー: 'id'は読み取り専用であるため、代入できません

同じインターフェース上で両方の修飾子を組み合わせることができ、これらの修飾子はインターフェースと型エイリアスの両方で同様に機能するため、オブジェクト構造を正確に制御できるようになります。

チャレンジ

簡単

以下のプロパティを持つ Book という名前のインターフェースを作成してください：

title：型は string（必須）
isbn：型は string（読み取り専用 readonly）
subtitle：型は string（任意 optional）
pages：型は number（必須）
publishedYear：型は number（読み取り専用 readonly）
genre：型は string（任意 optional）

以下のプロパティを持つ Magazine という名前のインターフェースを作成してください：

name：型は string（必須）
issueNumber：型は number（読み取り専用 readonly）
topic：型は string（任意 optional）
monthlySubscription：型は boolean（必須）

作成したインターフェースを使用して、以下の変数を作成してください：

novel という名前の Book 型の変数を作成し、title に "1984"、isbn に "978-0-452-28423-4"、pages に 328、publishedYear に 1949 を設定します。
cookbook という名前の Book 型の変数を作成し、title に "The Joy of Cooking"、isbn に "978-0-7432-4626-2"、subtitle に "All About Baking"、pages に 1132、publishedYear に 2006、genre に "Cooking" を設定します。
techMag という名前の Magazine 型の変数を作成し、name に "Tech Today"、issueNumber に 45、monthlySubscription に true を設定します。
scienceMag という名前の Magazine 型の変数を作成し、name に "Science Weekly"、issueNumber に 12、topic に "Climate Change"、monthlySubscription に false を設定します。

Book 型のパラメータを受け取り、string を返す getBookDetails という名前の関数を作成してください。この関数は、本のタイトルとページ数を "[title] - [pages] pages" の形式で返す必要があります。

Magazine 型のパラメータを受け取り、string を返す getMagazineInfo という名前の関数を作成してください。この関数は、雑誌の名前と号数を "[name] Issue #[issueNumber]" の形式で返す必要があります。

以下の出力を別々の行に表示してください：

novel を引数にして getBookDetails を呼び出し、その結果を表示する
cookbook を引数にして getBookDetails を呼び出し、その結果を表示する
techMag を引数にして getMagazineInfo を呼び出し、その結果を表示する
scienceMag を引数にして getMagazineInfo を呼び出し、その結果を表示する
novel の ISBN を表示する
techMag の購読状況（monthlySubscription プロパティ）を表示する

自分で試してみよう

// TODO: ここにコードを書いてください

// Bookインターフェースを作成します

// Magazineインターフェースを作成します

// インターフェースを使用して変数を作成します

// getBookDetails関数を作成します

// getMagazineInfo関数を作成します

// 必要な出力を表示します