2017-12-12 19 views
0

と活字体 `録音<>`タイプを作成し、文字列の列挙型を持つレコード型を作成することが可能である:が数値列挙型活字体で

enum AxisLabel { X = "X", Y = "Y" } 
export const labelLookup: Record<AxisLabel, number> = { 
    [AxisLabel.X]: "X axis", 
    [AxisLabel.Y]: "Y Axis" 
}; 

私は上記のものと同様Recordオブジェクトを作成する必要がありますが、 文字列列挙型は使用しません。

私はこのような何かしようとすると:

enum AxisLabel { X, Y } 
export const labelLookup: Record<AxisLabel, number> = { 
    [AxisLabel.X]: "X axis", 
    [AxisLabel.Y]: "Y Axis" 
}; 

を活字体には次のエラーを生成します。

Type 'AxisLabel' does not satisfy the constraint 'string'.

彼らのメンバーの名前と数値と文字列の両方でJSオブジェクトを作成することが可能です。

私はTypescriptで同じことをしたいが、安全ではない強制や型キャストに頼ることはしない。 文字列列挙型、anyまたは型キャストを使用せずにTypescriptで型数値列レコード<を作成するにはどうすればよいですか?

答えて

2

JavaScriptのオブジェクトキーは、配列の場合でも、常にstrings(okay、またはSymbols)です。文字列以外の値をキーとして渡すと、まず文字列に変換されます。もちろん、数字キーは、特に配列の場合には意味があります。 TypeScriptの種類は、この矛盾した哲学を反映しています。通常は、文字列値のキー(など)を指定することしかできませんが、数字キー(index signaturesなど)を参照することがあります。これらの状況が相互作用すると、奇妙なことが起こります。

ここで私が時々やった一つのことです:あなたは限り、あなたはそれを必要とすることをを拡張することができます

export type NumericStrings = ["0","1","2","3","4","5","6","7","8","9","10"] // etc 

注:明示的に次のタプル型と数から文字列への強制を表しますが。次に、lookup typesを使用して、数値型をマップされた型で使用する文字列の対応するものに変換することができます。同様に:

export enum AxisLabel { X, Y } 

// note the key is NumericStrings[AxisLabel], not AxisLabel  
export const labelLookup: Record<NumericStrings[AxisLabel], string> = { 
    [AxisLabel.X]: "X axis", 
    [AxisLabel.Y]: "Y Axis" 
}; 

これはエラーなく動作します。タイプがlabelLookupの場合は、Record<"0" | "1", string>と表示されます。あなたはlabelLookupへのインデックスにしようとすると、以下のほとんどが、予想の事が起こる:助け

labelLookup[AxisLabel.X]; // okay 
labelLookup[0]; // okay 
labelLookup["0"]; // also okay 

labelLookup[10]; // error 
labelLookup.X; //error 

希望を。がんばろう!

1

レコードの定義は、キーが文字列に割り当て可能でなければならないということは非常に具体的である、そう、より一般的にマッピングされたタイプmustでのキーは文字列である数でRecordを使用する方法はありません。

あなたは、通常のインデックス署名を使用することができますが、それはあなたが任意の数だけではなく列挙値有効になることを意味している(language specに応じて)文字列または数値以外のものにインデックス署名を制限することはできません。

export const labelLookup: { [index: number]: string } = { 
    [AxisLabel.X]: "X axis", 
    [AxisLabel.Y]: "Y Axis", 
    [3] = "" // Also works but you don't want that 
}; 
関連する問題