モジュールのレッスン (2/2)
ユーティリティの種類
TypeScript は、一般的な型変換を容易にするために、いくつかのグローバル ユーティリティ型を提供します。これらの型は汎用であり、既存の型から宣言的に新しい型を構築できます。
最も一般的に使用されるユーティリティ タイプは次の 4 つです。
1. Partial<T>
T 型のすべてのプロパティを オプション にします。これは、呼び出し元がフィールドのサブセットのみを提供する可能性がある更新/パッチ関数に非常に役立ちます。
interface User {
id: number;
name: string;
email: string;
}
// All properties of User become optional: { id?: number; name?: string; email?: string; }
type UserUpdate = Partial<User>;2. Readonly<T>
T 型のすべてのプロパティを 読み取り専用 にします。プロパティを再割り当てしようとすると、コンパイル時にコンパイラ エラーが発生します。
interface Point {
x: number;
y: number;
}
const p: Readonly<Point> = { x: 10, y: 20 };
// p.x = 5; // Error: cannot assign to 'x' because it is a read-only property3. Pick<T, Keys>
T 型から特定のキーのセット (文字列共用体で表される) のみを選択して型を作成します。
interface Article {
id: number;
title: string;
content: string;
views: number;
}
// Selects only 'title' and 'views': { title: string; views: number; }
type ArticlePreview = Pick<Article, 'title' | 'views'>;4. Omit<T, Keys>
T 型から特定のキーのセットを削除して型を作成します。これは Pick の二重です。
interface Product {
id: number;
name: string;
price: number;
secretVendorCode: string;
}
// Removes 'secretVendorCode': { id: number; name: string; price: number; }
type PublicProduct = Omit<Product, 'secretVendorCode'>;5. Record<Keys, Type>
プロパティ キーが Keys、プロパティ値が Type であるオブジェクト タイプを作成します。これは、キーを値にマッピングし、辞書やハッシュ テーブル (キーと値のマップ) を表すのに非常に便利です。
type Page = 'home' | 'about' | 'contact';
interface PageInfo {
title: string;
}
// Creates a dictionary with keys 'home' | 'about' | 'contact' and values PageInfo
const nav: Record<Page, PageInfo> = {
home: { title: 'Home Page' },
about: { title: 'About Us' },
contact: { title: 'Contact Us' },
};自分で試してみてください
演習 1: 部分的なプロファイル更新
元のプロファイル (Profile) と更新オブジェクト (updates) を受け入れる updateProfile 関数を完了します。プロファイルのすべてのフィールドはオプションです。元のプロパティと更新を組み合わせた新しい Profile オブジェクトを返す必要があります。
ヒントを表示
update パラメータには Partial<Profile> ユーティリティ タイプを使用し、スプレッド演算子を使用してオブジェクトをマージします: { ...original, ...updates }。
3 回の試行後に解決策が利用可能になります
演習 2: 省略を使用して機密フィールドを削除する
UserAccount タイプを指定して、機密性の高い PasswordHash プロパティを省略した SafeUser という名前のタイプ エイリアスを定義します。
ヒントを表示
タイプ SafeUser = Omit<UserAccount, 'passwordHash'> を使用します。指定したフィールドを省略します。
3 回の試行後に解決策が利用可能になります
演習 3: Pick および Readonly を使用したパブリック構成
AppConfig タイプを指定して、Pick を使用して選択された apiEndpoint およびポート プロパティのみを含む読み取り専用 (Readonly) バージョンである PublicConfig という名前のタイプ エイリアスを定義します。
ヒントを表示
タイプ PublicConfig = Readonly<Pick<AppConfig, 'apiEndpoint' | を使用します。 'ポート'>>;
3 回の試行後に解決策が利用可能になります
演習 4: レコードと読み取り専用のユーザー レジストリ
id:number および name:string フィールドを持つ User インターフェイスを指定して、User のすべてのフィールドを読み取り専用にする ReadOnlyUser タイプを作成します。次に、キーが文字列 (文字列 ID など)、値が ReadOnlyUser である辞書を表す UserRegistry 型を作成します。
ヒントを表示
Readonly<User> を使用して ReadOnlyUser を定義し、Record<string, ReadOnlyUser> をレジストリに定義します。
3 回の試行後に解決策が利用可能になります