typescriptの複合型でリストを複合している場合にインデックス指定するとエラーになります。。。

Question

'string | number | string[] | number[]'の型の変数があり、それがstring[]だった場合
以下の様にキャストして使用したいです。

type Hoge = {
  [key: string]: string | string[] | number | number[]
}

props.hoge.hugaList[0] as string

しかしこれだと以下の様なエラーが出てしまいます。

Property '0' does not exist on type 'string | number | string[] | number[]'

hugaListはstring[]なのでインデックス指定はできますがこの様な複合型の場合は使えないのでしょうか？

対処法ご存知の方はご教示いただけると幸いです。

Comments

[hoshi-takanori]

string[] じゃなかった場合にはどうするのでしょうか？

[Hayato1201]

設計上hugaListはstring[]だという前提となっています。
しかし上記のようにtype Hogeは汎用的な変数を取るためこの様な設計になっています。

[hoshi-takanori]

props の型が { hoge: Hoge } として、型的には props.hoge.hugaList が string[] である保証どころか、存在する保証もないですね。
TypeScript の型システムを騙したいなら (props.hoge.hugaList as string[])[0] とすればいいでしょうけど、それってどうなんだろう…。

[Hayato1201]

なるほどそれでいけるのですね。ありがとうございます。
>型的には props.hoge.hugaList が string[] である保証どころか、存在する保証もないですね
そうですね、そうなってしまいます。。。しかしどの様な値が入るかはコンポーネントによって違う、汎用的な変数群のオブジェクトなので現状この様になってしまっています。

[hoshi-takanori]

TypeScript の型システムは強力な柔軟性があるので、ちゃんと使えばいろんな状況に対応できると思いますけど…。
現状だと汎用的な型定義という名の手抜きにしか見えなくて、その型を使う部分のコードに無駄なキャストが増えて、しかもそれが安全性に寄与しないという本末転倒な状況 (any の方がマシでは？) になってる気がします。