VIDEO LESSON

TypeScriptのkeyof・typeof・as const：定数から型を作る実践ガイドの解説動画

再生時間 8:00動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回のテーマは、タイプスクリプトのキーオフ、タイプオブ、アズコンスタントです。
0:06設定値と型定義を別々に手書きすると、値を追加したのに型の更新を忘れる、という事故が起きがちです。
0:13そこで、まず定数をひとつ置き、そこからキーの型や値の型を取り出す方法を学びます。
0:19題材は、記事の公開状態と表示ラベルです。
0:22下書き、公開中、アーカイブという状態を例に、型安全なプロパティ取得や、配列からユニオン型を作る方法まで順に進みます。
0:30基本的なオブジェクト型を知っている方を対象に、初心者にも分かるよう一歩ずつ解説します。
0:36まずキーオフです。
0:38これは、オブジェクト型が持つキーの型を取り出す演算子です。
0:42画面では、記事を表す型からキーを取り出し、アーティクルキーという型を作っています。
0:49結果は、アイディー、タイトル、ビューズという三つの文字列だけを許すユニオン型です。
0:55単なるストリングではないため、ボディのような未定義のキーを代入すると型エラーになります。
1:02実際に、間違ったキーはエラーコード付きで弾かれることを実機で確認しました。
1:08プロパティ名を引数に受け取る関数で特に役立ちます。
1:12なお、文字列のインデックスを持つ型では結果が広くなる場合もあるため、この動画では固定の文字列キーを持つオブジェクトを扱います。
1:22次にタイプオブです。
1:23すでに設定オブジェクトがある場合は、同じ構造の型を手書きせず、型の位置でタイプオブを使って参照できます。
1:32画面の設定では、ページサイズが数値、著者表示が真偽値と推論され、そのまま型として取り出せます。
1:41別の数値を入れた新しい設定も、同じ型で受けられます。
1:45注意点は、ジャバスクリプトで実行時に文字列を返すタイプオブとは役割が違うことです。
1:52型の位置では、変数に推論された型を参照しているだけです。
1:57また、型を取り出しても値の複製や実行時の検証は行われません。
2:03エーピーアイ応答の正しさを確かめたい場合は、別の検証処理が必要です。
2:09ここからが本題です。
2:10記事の状態と表示ラベルを、ひとつの定数で管理します。
2:14ドラフトは下書き、パブリッシュドは公開中、アーカイブドはアーカイブ、という対応をオブジェクトに置き、
2:20末尾にアズコンスタントを付けます。
2:25状態名の型は、キーオフ・タイプオブと書くだけで作れます。
2:30まずタイプオブで定数の型を取り出し、そこへキーオフを適用する、という順番です。
2:36状態名のユニオンを別に書き直す必要はありません。
2:40アズコンスタントを付けると、各プロパティは読み取り専用になり、値もストリングへ広がらず、
2:45具体的な文字列リテラル型のまま保持されます。
2:50固定キーの一覧だけならアズコンスタントなしでも作れますが、ラベルまで型に残したい場合は付けるのがポイントです。
2:59ラベルの型も同じ定数から作れます。
3:02丸括弧でくくったタイプオブの後ろに、状態名の型を角括弧で付けると、キーに対応する値の型を取り出せます。
3:09これをインデックスアクセス型と呼び、この例では三つのラベルのユニオンになります。
3:15候補を順番どおりに表示したい場合は、オブジェクトではなく配列が扱いやすいです。
3:21並び順の配列にアズコンスタントを付けると読み取り専用のタプル型になり、角括弧のナンバーで要素の型を取り出せます。
3:29この定数は画面の選択肢にもそのまま使えるため、候補と型を別々に管理するより、
3:33変更箇所をまとめやすくなります。
3:37応用として、オブジェクトから任意のプロパティを取り出す関数を作ります。
3:43ポイントは、型パラメーターのケーに、ティーのキーオフであること、という制約を付けることです。
3:50これで、引数のキーはそのオブジェクトに存在するものだけに制限されます。
3:56さらに戻り値の型を、ティーの角括弧ケーと書くことで、指定したキーに対応する値の型がそのまま返ります。
4:04タイトルを指定すれば文字列、閲覧数を指定すれば数値、という連動が効くわけです。
4:10存在しないキーを渡すと型エラーになることも、実機で確認しました。
4:15ただし、キー自体がユニオン型の場合は戻り値もユニオンになることがあるため、
4:19渡すキーの型にも注目してください。
4:23作った部品を実際に使ってみます。
4:26記事のオブジェクトからタイトルを取得すると文字列として扱えるため、大文字化のメソッドが使えます。
4:35閲覧数を取得すると数値になるため、数値のメソッドが使えます。
4:40状態にパブリッシュドを指定すると、ラベルの公開中が返ります。
4:45並び順の配列へラベル変換を適用すると、新しい順と古い順の一覧が得られます。
4:52これらの出力は、実機でコンパイルして実行し、記事の期待どおりであることを確認済みです。
4:59タイトルは日本語のため大文字化しても見た目は変わりませんが、文字列のメソッドが型の上で使えている点が大切です。
5:09キーと値の型が連動する便利さを感じてください。
5:13アズコンスタントでできないことも押さえます。
5:16これはタイプスクリプトの型の仕組みであり、ジャバスクリプト実行時にオブジェクトを凍結する処理は追加されません。
5:24画面の例では、既存の可変配列を参照するプロパティを持つオブジェクトに、アズコンスタントを付けています。
5:31プロパティ自体の再代入は制限されますが、参照先の配列は可変のままなので、
5:34要素を追加できてしまいます。
5:38実際に実行すると、二つの要素が表示されることを確認しました。
5:42外部で作った値まで再帰的に変更不可能になるわけではありません。
5:46実行時の変更を防ぎたい場合はオブジェクトフリーズを使いますが、通常は浅い凍結である点にも注意してください。
5:53もうひとつ注意です。
5:55オブジェクトキーズの戻り値の型は、標準ではストリングの配列であり、キーオフの型の配列とは推論されません。
6:03実行時のオブジェクトが、型に書かれたもの以外のプロパティを持つ可能性もあるためです。
6:09この食い違いを、実機でもエラーとして確認しました。
6:13安易な型アサーションでエラーを消す前に、その場所でキーの集合を保証できるかを確認しましょう。
6:20よくある疑問も整理します。
6:23アズコンスタントはすべての変数に付けるものではなく、固定の候補や変更しない設定で使います。
6:30後から更新する状態には通常の型注釈が向いています。
6:33また、エーピーアイの応答はアンノウンで受け取り、実行時に検証してから使うのが原則です。
6:40手元で試すときは、記事のファイル構成で保存し、型チェックだけを行うコマンドを実行します。
6:47画面のコマンドは、厳密な設定で四つの例を確認するものです。
6:51実行したい場合は、ノーエミットを出力先の指定へ置き換えて変換し、生成されたジャバスクリプトをノードで動かします。
7:00今回の動画のコード例も、この手順でコンパイルと実行を行い、記事の期待出力と照合しました。
7:07なお、ファイルを直接指定するコマンドでは設定ファイルは読まれません。
7:12プロジェクト全体を普段の設定で確認したい場合は、設定のある場所で実行してください。
7:19小さな例に切り分けて確かめる習慣が、理解への近道です。
7:23まとめです。
7:24キーオフは型からキーの型を、タイプオブは値から型を取り出す演算子で、組み合わせると定数のキーも値も型にできます。
7:31アズコンスタントでリテラル型を保持すれば、状態名とラベルのように同時に変わる情報を、
7:35ひとつの定義から一元管理できます。
7:39配列なら角括弧ナンバー、取得関数ならジェネリクスとの組み合わせが効きます。
7:44一方で、読み取り専用は型だけの制限であり、実行時の凍結や入力検証とは役割が別です。
7:50まずは自分のコードで、値と型を二重に管理している箇所をひとつ見つけ、定数からの導出に置き換えることから始めてみましょう。
7:58お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

TypeScriptのkeyof・typeof・as constを使い、定数からキーや値の型を作る方法を解説。ファイル別のコード例で、型安全なプロパティ取得、配列からのユニオン型、readonlyと実行時の違いを学べます。

解説記事・サンプルコードを読む：TypeScriptのkeyof・typeof・as const：定数から型を作る実践ガイド →