TypeChallengeのPickを解くために必要な知識まとめ

こんにちは！

今回はTypeChallengeの初級編第一問、「Pick」を解くために必要な知識をまとめていきます。

取り上げるのは、extends、keyof、Mapped Typesの3つです。
いずれも存在しないプロパティでアクセスすることを防ぐ目的で使用することができます。

extends

一つ目は、extendsです。
こちらは指定した型と同じプロパティを持つように制限することができます。

type WithId = { id: number }

function getId<T extends WithId>(item: T): number {
  return item.id;
}

const userWithId = {id: 1, name: "Alice" };
const productWithId = { id: 101, price: 1000 };
const userWithNoId = { name: "Bob" }
const productWithNoId = { price: 2000 };

console.log(getId(userWithId)); // 1
console.log(getId(productWithId)); // 101
console.log(getId(userWithNoId)); // エラー: 'id' プロパティが存在しない
console.log(getId(productWithNoId)); // エラー: 'id' プロパティが存在しない

• extendsは、「左辺が右辺の条件を満たしていることを保証する」と捉えることが出来ます

keyof

二つ目は、keyofです。
こちらはオブジェクトに存在するプロパティを抽出します。

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

type UserKeys = keyof User; // "id" | "name" | "email"

const name: UserKeys = "name"; // OK
const age: UserKeys = "age" // エラー： 型 '"age"'は型'"id" | "name" | "email"'に割り当てられません 

• keyofはオブジェクトの型からプロパティ名を文字列リテラル型として返します
• プロパティが複数の場合は文字列リテラルのユニオン型として返します

Mapped Types

三つ目は Mapped Typesです。
こちらは、オブジェクトのキーに指定できる値を制限できます。

type DayOfWeek = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday"

type OpeningHours = {
  [day in DayOfWeek]: string;
}

const storeHours: OpeningHours = {
  Monday: "9:00 AM - 5:00 PM",
  Tuesday: "9:00 AM - 5:00 PM",
  Wednesday: "9:00 AM - 5:00 PM",
  Thursday: "9:00 AM - 5:00 PM",
  Friday: "9:00 AM - 5:00 PM",
  Saturday: "10:00 AM - 4:00 PM",
  Sunday: "Closed",
}

console.log(storeHours.Monday); // 9:00 AM - 5:00 PM
storeHours.Funday = "10:00 AM - 6:00 PM" // エラー: 'Funday' は 'DayOfWeek' 型に存在しません
storeHours.Monday = 123 // エラー: 'number' 型は 'string' 型に割り当てられません

• Mapped Typesはユニオン型と組み合わせて使い、キーの範囲を制限できます

おわりに

今回紹介した知識があれば、TypeChallengeの初級編第一問「Pick」を解くことが出来ると思います。
参考にしてみてください！