1. ホーム
  2. typescript

[解決済み] 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"'