私の知る限り、TypeScript 4.5 までで、今回の問題に簡潔に対処できる方法はありません。可能なのであれば API が返すレスポンスのスキーマを変更する方が利便性はあるでしょう。その上で、部分的に解決できる方法を考えました。
コード量が少なく、おおよそ賄える方法
Template Literal Types を用いると、今回の用法をおおよそ賄えます。Template Literal Types とは String Literal Types において更にテンプレート文字列のような記法を用いることができるという機能です。
具体的には、以下のように書けます。
type ImageURLKey = `url${number}`;
type Image = {
[key: ImageURLKey]: string[];
}
const data: Image[] = [
{
url123: ["path/to/a", "path/to/b"],
},
{
url456: ["path/to/a", "path/to/b"],
},
{
url789: ["path/to/a", "path/to/b"],
},
];
ここにデータとして { piyo123: [] }
などを足すと型検査が通らないことが確認できます。
ただし、この書き方には欠点があります。Template Literal Types の ${number}
は JavaScript が number
としてパースできる文字列を大体通してしまいます。このため url1e2
や url0x1
、url 123
なども型検査に通ってしまいます。特に、url-123
が型検査を通ってしまうので、うっかり kebab-case だと勘違いしてしまっても気付けません。このことを許容できるのであれば、分かりやすい型の付け方と思います。
TypeScript 側でも正整数のみを受け付ける型というのが検討はされているようなので、そこに貢献していくというのも手です。
参考:
真面目に「数字の列」の型を作る方法
上記の方法は、JavaScript の number
を使っているために欠点が生まれるのでした。それでは number
を作るのではなくて、単に「数字が並んでいる文字列」という型を作って解決できないでしょうか。
もし ID の上限値が決まっているのであれば、Template Literal Types を使うことで以下のように書けます。
type NonZeroDigitString = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
type DigitString = '0' | NonZeroDigitString;
type MaybeDigitString = DigitString | '';
type ImageIDLessThanThousand = '0' | `${NonZeroDigitString}${MaybeDigitString}${MaybeDigitString}`
type Image = Partial<Record<`url${ImageIDLessThanThousand}`, string[]>>
ただし ID がとても大きくなる場合には型の情報も大きくなってしまいますし、あまりオススメはできません。
なんとか上限を突破する
上限を設定しない型も、Recursive Conditional Types を使うと実装できる……はずです。具体的には以下のような型を考えました。
type NonZeroDigitString = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
type DigitString = '0' | NonZeroDigitString;
type ImageID<T extends string, V = T> = T extends DigitString ? V :
T extends `${DigitString}${infer R}` ? ImageID<R, V> : never;
type ImageURLKey<T extends string, V = T> = T extends `url${infer R}` ? ImageID<R, V> : never;
type Image<T extends string> = Record<ImageURLKey<T>, string[]>
ただしこの型は、計算に時間がかかるのか、手元で試すと時々期待通りに動いてくれないので、あんまり使いものにはならなさそうでした(おそらく……)。
images[`url${id}`][0]
ではなくimages[0][`url${id}`][0]
では。url${id}
][0] ではなく images[0][url${id}
][0] では。 ご指摘ありがとうございます。修正しておきました。ts type Image = { hoge*: string; [key: string]: string; }
のところですが、正しくはts type Image = { url*: string; [key: string]: string; }
ですので修正しました。