Typescriptでオブジェクトのキーと値の両方から型を取る
2023-07-08 14:51:41
質問
2つの文字列値のセットがあり、定数オブジェクトとして一方から他方へマッピングしたいのです。 私はそのマッピングから2つの型を生成したい:1つはキー用に、もう1つは値用に。
const KeyToVal = {
MyKey1: 'myValue1',
MyKey2: 'myValue2',
};
キーは簡単です。
type Keys = keyof typeof KeyToVal;
を取得するのに苦労しています。 コンパイル時 型を取得するのに苦労しています。 私は多分これらのうちの1つがうまくいくと思った。
type Values = typeof KeyToVal[Keys];
type Values<K> = K extends Keys ? (typeof KeyToVal)[K] : never;
type Prefix<
K extends Keys = Keys,
U extends { [name: string]: K } = { [name: string]: K }
> = {[V in keyof U]: V}[K];
これらはすべて、ただ単に
Values
を
string
. また、2つの答えを適応してみたところ
typescriptでルックアップを使用して型付けされたmapValueを推論する方法は?
を適応させようとしましたが、適応を間違えたか、そもそも答えが私のシナリオに合っていなかったかのどちらかです。
どのように解決するのですか?
コンパイラは、文字列リテラルの型を
string
に広げますが、github で説明されているような特定の条件を満たさない限りは
問題
と
PR
または
const アサーション
はリテラル値に対して使われる。constアサーションはTypeScript 3.4で登場した。
const KeyToVal = {
MyKey1: 'myValue1',
MyKey2: 'myValue2',
} as const;
type Keys = keyof typeof KeyToVal;
type Values = typeof KeyToVal[Keys]; // "myValue1" | "myValue2"
3.4より前では、同じ効果を得るための回避策がありました。コンパイラにリテラル型を推論させるには、適切に細工された汎用型パラメータを持つ関数を介してオブジェクトを渡す必要がありましたが、これはこの場合のトリックを行うようです。
function t<V extends string, T extends {[key in string]: V}>(o: T): T {return o}
この関数の目的は、型推論を可能にするために型をキャプチャして保持することであり、それ以外は全く意味がありませんが、この関数を使うことで
const KeyToVal = t({
MyKey1: 'myValue1',
MyKey2: 'myValue2',
});
type Keys = keyof typeof KeyToVal;
type Values = typeof KeyToVal[Keys]; // "myValue1" | "myValue2"
関連
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] TypeScriptでオブジェクトに動的にプロパティを割り当てるには?
-
[解決済み] TypeScriptのオブジェクトリテラルでの型定義
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み] Angular 2でアプリ起動時にサービスを実行する方法
-
[解決済み] タイプスクリプト。カスタムタイプに対する typeof のチェック
-
[解決済み] 他のプロパティを使用できる TypeScript インターフェース
-
[解決済み] Typescriptで<T>は何を意味するのですか?
-
[解決済み] タイプスクリプトでenumをインデックスキーとして使用するには?
-
[解決済み] npmスクリプトを使用して、tsc -watch && nodemon --watchを実行する方法はありますか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] TypeScriptの予約語 "type "とは何ですか?
-
[解決済み] tsconfig.jsonのtargetは何のためにあるのですか?
-
[解決済み] Visual Studio コード自動インポート
-
[解決済み] ngForとAsync Pipe Angular 2でObservableオブジェクトから配列を利用する。
-
[解決済み] typescriptのインターフェイスを別ファイルで宣言しインポートする方法
-
[解決済み] tsconfigの "target "と "module "を理解する。
-
[解決済み] Angular 2で相対パスが非常に長いインポートを回避する方法とは?
-
[解決済み] Typescriptで<T>は何を意味するのですか?
-
[解決済み] Enumのインポート方法
-
[解決済み] 新しい Typescript 1.8.4 のビルドエラー。" ビルド。Property 'result' がタイプ 'EventTarget' に存在しません。"