TypeScriptのあれこれ④Record型って何?

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

【5/27開催】事業変革を最新ソフトウェア技術で加速する「OSS利活用事例セミナー」
OSSのビジネス活用事例などを紹介します!登壇者はスカパー様やIPAなど🎤
OSSを活用した新たなビジネス創出やDX推進のヒントを得られる機会です。
https://ossforum.connpass.com/event/318583/
【6/19開催】Kong Community Japan Meetup #4
本イベントでは、Kong Inc. のVP of ProductであるReza Shafii氏もプレゼンターとして参加。当社からはアーキテクト マネージャーの槌野の登壇が決定!参加無料です!!
https://column.api-ecosystem.sios.jp/connect/kong/1081/

はじめに

皆さんこんにちは。新卒2年目エンジニアの細川です。

今回はTypeScriptのRecord型についてまとめてみようと思います。

Record型とは?

Record型はTypeScriptの組み込みの型で、プロパティのKeyの型と中身の型を渡すことで、その型に対応したオブジェクトの型を生成してくれるものになります。

例を見てみましょう。

type StringNumber = Record<string, number>;
const value: StringNumber = { a: 1, b: 2, c: 3 };

この場合、各プロパティのキーがstringで中身がnumberのobjectとなっています。

Record<Keys, Type>のように、第一引数にKeyの型、第二引数にその中身の型を渡すという使い方をします。

Keysには、string, number, symbolとそれぞれのリテラル型しか渡せないようです。

これだけでは、インデックス型と大差ないように見えます。インデックス型で実装してみると以下のようになります。

 

type StringNumber = {[key: string]: number};
const value: StringNumber = { a: 1, b: 2, c: 3 };

インデックス型について気になる方はこちらを確認してみてください。

 

インデックス型との違い

Record型はリテラルで型を指定できますが、インデックス型はリテラルで指定できないという違いがあります。

以下のようなコードを考えてみます。

type Person = Record<"firstName" | "middleName" | "lastName", string>;
const person: Person = {
firstName: "Robert",
middleName: "Cecil",
lastName: "Martin",
};

この場合、Person型は”firstName”, “middleName”, “lastName”のフィールドを持つオブジェクトとなります。

このような定義をしたい場合、インデックス型では、以下のようにエラーとなってしまいます。

Record型の使い道

使い道としては、入れ子になっているobjectの定義を簡潔に記述できるというものが挙げられます。

以下のように各プロパティがUser型のUsersというObjectを作りたい場合を考えてみます。

type User = {
  name: string
  age: number
}

type Users = {
  user1: User
  user2: User
  user3: User
  user4: User
}

この場合、Record型を使うことで、型定義を簡潔に記述することができます。

type User = {
  name: string
  age: number
}

type UsersKeys = "user1" | "user2" | "user3" | "user4"

type Users = Record<UsersKeys, User>

他の使い道としては、こちらのページにわかりやすくまとめてくださっていたので、参考にしてみてください。

Record型の内部

Record型の実装としては以下のようにMapped Typesになっています。

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

Mapped Typesについては別の記事でまとめるつもりですが、Kとして受け取った型を、キーの制約として利用するような型になっています。

とりあえず気になる方はこちらを参考にしてみて下さい!

まとめ

  • Record型はKeyの型と、中身の型を渡すとそれに対応したObjectの型を作ってくれる
  • Objectの入れ子になっているような型の定義をスマートに書ける!
  • Mapped Typesの応用である

 

おわりに

今回はTypeScriptのRecord型についてまとめてみました。

組み込み型の中にはまだまだ知らないものがたくさんあるので、今後も少しずつまとめていきたいと思います。

他にもこちらのようにTypeScriptのあれこれをまとめています。少しでも皆さんの参考になれば幸いです。

 

アバター画像
About 細川 14 Articles
高専専攻科制御系の学科を卒業後、2022年にサイオステクノロジーに入社。入社後は、バックエンド, フロントエンドの開発に携わり、Go言語やTypeScriptを用いた開発を行っている。その他、React, Next.JS, Nest.JS, GraphQLなど
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる