[解決済み] TypeScriptの「keyof typeof」の意味とは?
2022-04-23 12:10:51
質問
を説明してください。
keyof typeof
TypeScript における意味
例
enum ColorsEnum {
white = '#ffffff',
black = '#000000',
}
type Colors = keyof typeof ColorsEnum;
最後の行が相当します。
type Colors = "white" | "black"
しかし、その仕組みはどうなっているのでしょうか?
期待するのは
typeof ColorsEnum
のようなものを返します。
"Object"
で、次に
keyof "Object"
を使うと、面白いことができない。しかし、私は明らかに間違っています。
解決方法は?
keyof
はオブジェクトの型を取り、そのオブジェクトのキーのいずれかを受け入れる型を返します。
type Point = { x: number; y: number };
type P = keyof Point; // type '"x" || "y"'
const coordinate: P = 'z' // Type '"z"' is not assignable to type '"x" | "y"'.
TypeScriptの型を使ったtypeof
typeof
は、javascriptオブジェクト上で呼び出されたときと、typescript型上で呼び出されたときとで異なる挙動をします。
-
TypeScriptでは
javascriptのtypeof
のいずれかを返します。
"undefined", "object", "boolean", "number", "bigint", "string", "symbol", "function"
- TypeScriptのtypeof は型の値に対して呼び出されますが、型式表現の中でjavascriptの値に対しても呼び出すことができます。また、javascriptのオブジェクトの型を推測し、より詳細なオブジェクトの型を返すことができます。
type Language = 'EN' | 'ES';
const userLanguage: Language = 'EN';
const preferences = { language: userLanguage, theme: 'light' };
console.log(typeof preferences); // "object"
type Preferences = typeof preferences; // type '{language: 'EN''; theme: string; }'
なぜなら、2番目の
typeof preferences
は型式表現の中にあり、実際にはTypeScript独自の
typeof
が呼び出され、javascriptのものではありません。
キーヨフ タイプオブ
なぜなら
keyof
はTypeScriptの概念であるため、TypeScriptのバージョンである
typeof
.
keyof typeof
は、javascript オブジェクトの型を推測し、そのキーの組合わせである型を返します。キーの正確な値を推測することができるので、そのキーの組合わせを返すことができます。
リテラルタイプ
を返すのではなく、単に"string"を返します。
type PreferenceKeys = keyof typeof preferences; // type '"language" | "theme"'
関連
-
[解決済み】Typescriptで、! (エクスクラメーションマーク/バン)演算子でメンバを再参照するのは?
-
[解決済み] TypeScriptで、「extends keyof」と「in keyof」はどういう意味ですか?
-
[解決済み] 型チェック:typeof、GetType、is?
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] typeofとinstanceofの違いは何ですか、また、どのような場合にどちらを使うべきですか?
-
[解決済み] String型とstring型の違いは何ですか?
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み】「エラー TS2533: オブジェクトは 'null' または 'undefined' の可能性があります」を抑制する方法とは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】tsconfigファイルにおけるesModuleInteropの理解
-
[解決済み] 型{ [key: string]: boolean; }は何を意味するのでしょうか?
-
[解決済み] Jest で typescript を使用して identity-obj-proxy を使用すると未定義が返される
-
[解決済み] ts1206 デコレーターはここでは無効です、Angular 2。
-
[解決済み] 未使用のパラメータに対する型チェックをスキップする
-
ts 学習日記1 AssertionError [ERR_ASSERTION]: タスク関数を指定する必要があります
-
[解決済み] eslintをtypescriptで使用する - モジュールへのパスを解決できない
-
[解決済み] TypeScriptのInterface Function Property。何が違うの?
-
[解決済み] Typescript は ?演算子をサポートしていますか?(そして、それは何と呼ばれているのでしょうか?)
-
[解決済み] ジェネリックスを使用したTypescriptのarrow関数の構文はどのようになっていますか?