TypeScriptでブラケット表記法を使用した際のts(7053)エラーを解決する

ブラケット表記法とは

brackets=括弧を使用して、オブジェクトのプロパティへアクセスする方法です。

example.ts

const metas: Metas = {
  top: {
    title: 'top page title',
    description: 'top page description',
    ...
  },
  article: {
    title: 'article page title',
    description: 'article page description',
    ...
  },
  ...
}

...

// pageName: stringを取得する処理

...

const metaArticle: Meta = metas[pageName] // ← ブラケット表記法

bracketsの日本語訳は括弧ですが、単純にbracketsと表記されている場合は角括弧([])を指すそうです。

括弧	日本語	英語
()	丸括弧	parenthesis（パーレン）, round brackets
[]	角括弧	brackets（ブラケット）, square brakects
{}	波括弧	brace（ブレース）, curly brackets
<>	山括弧	chevrons（シェブロン）, angle brackets

本題

上記のexsample.tsはTypeScriptの型エラー(7053)となります。

型 'string' の式を使用して型 '{ top: { title: string; description: string; }; article: { title: string; description: string; }; }' にインデックスを付けることはできないため、要素は暗黙的に 'any' 型になります。
型 'string' のパラメーターを持つインデックス シグネチャが型 '{ top: { title: string; description: string; }; article: { title: string; description: string; }; }' に見つかりませんでした。
ts(7053)

ts(7053)

Element implicitly has an 'any' type because expression of type 'xxx' can't be used to index type

原因

metasのインデックスとなるpageNameの型が不明であることが原因です。

解決方法

型Metasのkeyはstring型であることを明示します。

index.d.ts

interface Metas {
    [key: string]: Meta // ここを追加
}

あとは必要に応じて、オブジェクトに当該プロパティが存在しなかった場合の処理等を追加するのが良いでしょう。

今回の例だとpageNameに入り得る値はある程度決まっていそうなので、keyの型をユニオン型にしてしまうのが良さそうです。

補足

書いてて思いましたが、Metasという型名はイマイチですね...。

一般的に複数形の変数の型はArray<HogeType>な印象があるので、変数名だけからだとArray<Meta>に見えてしまいます。

{hoge: Meta, huga: Meta, piyo: Meta, ...}を表す命名ってあるのでしょうか。