TypeScript で Partial 型、Record 型、Pick 型、Exclude 型を使いこなす
2024-04-02
TypeScript インターフェース内のすべてのプロパティをオプションにする方法
? 演算子を使用する
各プロパティ名の後に ? を付けることで、そのプロパティをオプションにすることができます。
例：
interface Person {
name?: string;
age?: number;
}
const person: Person = {
name: "Alice",
};
// age プロパティは省略可能
console.log(person.age); // undefined
Partial 型は、既存の型を受け取り、その全てのプロパティをオプションにするユーティリティ型です。
interface Person {
name: string;
age: number;
}
const person: Partial<Person> = {
name: "Alice",
};
// age プロパティは省略可能
console.log(person.age); // undefined
インターフェースの合体を使用する
& 演算子を使用して、複数のインターフェースを合体することができます。
interface PersonRequired {
name: string;
age: number;
}
interface PersonOptional {
name?: string;
age?: number;
}
type Person = PersonRequired & PersonOptional;
const person: Person = {
name: "Alice",
};
// age プロパティは省略可能
console.log(person.age); // undefined
その他の注意事項
- オプションプロパティにデフォルト値を設定したい場合は、
?演算子とデフォルト値を一緒に使用することができます。
interface Person {
name?: string = "John Doe";
age?: number;
}
- オプションプロパティが存在するかどうかを確認したい場合は、
in演算子を使用することができます。
const person: Person = {
name: "Alice",
};
if ("age" in person) {
console.log(person.age);
}
上記の3つの方法を理解することで、TypeScript インターフェース内のすべてのプロパティをオプションにすることができます。
interface Person {
name?: string;
age?: number;
}
const person1: Person = {
name: "Alice",
};
// age プロパティは省略可能
const person2: Person = {};
console.log(person1.name); // "Alice"
console.log(person2.age); // undefined
Partial 型を使用する
interface Person {
name: string;
age: number;
}
const person: Partial<Person> = {
name: "Alice",
};
// age プロパティは省略可能
console.log(person.age); // undefined
interface PersonRequired {
name: string;
age: number;
}
interface PersonOptional {
name?: string;
age?: number;
}
type Person = PersonRequired & PersonOptional;
const person: Person = {
name: "Alice",
};
// age プロパティは省略可能
console.log(person.age); // undefined
- オプションプロパティにデフォルト値を設定する
interface Person {
name?: string = "John Doe";
age?: number;
}
const person: Person = {};
console.log(person.name); // "John Doe"
console.log(person.age); // undefined
- オプションプロパティが存在するかどうかを確認する
const person: Person = {
name: "Alice",
};
if ("age" in person) {
console.log(person.age);
} else {
console.log("age プロパティは存在しません");
}
TypeScript インターフェース内のすべてのプロパティをオプションにするその他の方法
Record 型は、キーと値のペアの集合を表すユーティリティ型です。
const person: Record<string, unknown> = {
name: "Alice",
age: 20,
};
// すべてのプロパティはオプション
console.log(person.job); // undefined
Readonly 型と Partial 型を組み合わせる
Readonly 型は、プロパティの書き込みを禁止するユーティリティ型です。
interface Person {
name: string;
age: number;
}
type PersonOptional = Partial<Readonly<Person>>;
const person: PersonOptional = {
name: "Alice",
};
// すべてのプロパティはオプションで、書き込み不可
person.name = "Bob"; // エラーが発生
console.log(person.name); // "Alice"
Pick 型と Exclude 型を使用する
Pick 型は、指定されたプロパティのみを含む新しい型を作成するユーティリティ型です。
interface Person {
name: string;
age: number;
job: string;
}
type PersonOptional = Pick<Person, "name" | "age"> & Exclude<Person, "job">;
const person: PersonOptional = {
name: "Alice",
age: 20,
};
// job プロパティは存在しない
console.log(person.job); // エラーが発生
console.log(person.name); // "Alice"
console.log(person.age); // 20
上記の方法を参考に、状況に応じて最適な方法を選択してください。
typescript
