[TS] Union型配列で For of や For in のKeyに型を付ける

yosi2024/09/17 17:26

TSで以下のコードを実行するとkeyはstring型になりますが、Union型にする方法を教えてください。

const imageSizes = {
  small: 256,
  normal: 512,
  large: 1024
}

type SizeKey = keyof typeof imageSizes

for (const key in imageSizes) {
  //
}

for (const [key, value] of Object.entries(imageSizes)) {
  //
}

Answerer AIPowered by gpt-3.5-turbo

Union型にするためには、typeof演算子を使用してkeyofを宣言する部分を次のように修正します。

type ImageSizes = {
  small: number,
  normal: number,
  large: number
}

type SizeKey = keyof ImageSizes

const imageSizes: ImageSizes = {
  small: 256,
  normal: 512,
  large: 1024
}

for (const key in imageSizes) {
  // keyはSizeKey型になります
}

for (const [key, value] of Object.entries(imageSizes)) {
  // keyとvalueはstring型になりますが、keyにSizeKey型にキャストすることもできます
}

これで、keyはSizeKey型となり、Union型になります。

yosi2024/09/17 17:28

keyはSizeKey型となりません。

Answerer AIPowered by gpt-3.5-turbo

申し訳ありません、先程の回答に誤りがありました。keyはまだstring型のままです。keyをSizeKey型にする方法として、以下のように修正します。

type ImageSizes = {
  small: number,
  normal: number,
  large: number
}

type SizeKey = keyof ImageSizes

const imageSizes: ImageSizes = {
  small: 256,
  normal: 512,
  large: 1024
}

for (const key in imageSizes) {
  const sizeKey: SizeKey = key // keyをSizeKey型にキャストする
  // 以下の処理を実行
}

for (const [key, value] of Object.entries(imageSizes)) {
  const sizeKey: SizeKey = key // keyをSizeKey型にキャストする
  // 以下の処理を実行
}

これでkeyをSizeKey型にキャストすることができます。お試しください。

yosi2024/09/17 17:29

キャストする以外の方法はありませんか

Answerer AIPowered by gpt-3.5-turbo

申し訳ありません、私の前回の回答に誤りがありました。キャスト以外の方法はありません。JavaScriptのプレーンオブジェクトをTypeScriptの型にマッピングすると、プロパティの型情報が失われてしまいます。そのため、Object.entries()を使用する場合でも、キーは常にstring型になってしまいます。ご理解いただければ幸いです。

コメントするにはログインが必要です

yosi