連想配列の配列からキーと値を渡して、それに合致する要素を返す関数を作りたい。

Question

前提

TypeScript初心者です。
型のエラーで困っています。

実現したいこと

連想配列の配列からキーと値を渡して、それに合致する要素を返す関数を作りたい。

以下のJSでの例をTSで作りたいのですが、型のエラー起きてしまい、解決できないので、ご助力お願いいたします。

（例）jsでの例

// テスト配列
const testArray = [
  {
    "targetKey": "あいうえお",
    "hogehoge": {
      "foo": "fooあ",
      "goo": "gooあ"
    }
  },
  {
    "targetKey": "かきくけこ",
    "hogehoge": {
      "foo": "fooか",
      "goo": "gooか"
    }
  },
  {
    "targetKey": "さしすせそ",
    "hogehoge": {
      "foo": "fooさ",
      "goo": "goさ"
    }
  }
]

// 目的の関数（js）
const getElement = (arr, tKey, tVal) => {
  return arr.filter((ele) => {
    return ele[tKey] === tVal;
  })[0];
};

getElement(testArray, 'targetKey', 'あいうえお')

{
  hogehoge: {
    foo: "fooあ",
    goo: "gooあ"
  },
  targetKey: "あいうえお"
}

発生している問題・エラーメッセージ

// 行: 3のele[tKey] の部分で

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

該当のソースコード

const getElement = <T>(arr: T[], tKey: string, tVal: string): T => {
  return arr.filter((ele) => {
    return ele[tKey] === tVal;
  })[0];
};

試したこと

https://solareenlo.com/docs/pl/typescript/
上記ページを参考に以下のようにしてみましたが解決できませんでした。

const getElement = <S, T extends keyof S>(arr: S[],  tKey: T,  tVal: string,): S => {
  return arr.filter((ele) => {
    return ele[tKey] === tVal;
  })[0];
};

// 行:3 ele[tKey] === tVal
型 'S[T]' と 'string' には重複がないため、この条件は常に 'false' を返します。ts(2367)

補足情報（FW/ツールのバージョンなど）

• vscode

Comments

[maisumakun]

引数に"targetKey"という文字列を渡していますが、ここも可変にしたいということで間違いないですか？

[momochi]

コメントありがとうございます。
その通りです。

Answer 1

逆にTからSを作ってみてはどうでしょうか？

const getElement = <S extends {[key in T]: string}, T extends string>(arr: S[],  tKey: T,  tVal: string,): S => {
  return arr.filter((ele) => {
    return ele[tKey] === tVal;
  })[0];
};

---

本題ではありませんが、.filter()[0]とするぐらいなら.findを使ったほうがいいかと思います。

Comments

[momochi]

教えていただきありがとうございます！１日格闘してましたが、もっと早く質問すればよかったです！
findを使ったほうが良いとご助言いただきありがとうございます。

自己解決のところに自分の解釈を書きました。相違点あればご指摘お願いします。

Answer 2

maisumakun様から頂いた回答から自己解釈

エラーの原因

eleは型Sと定義されていたが、Sの中身がobjectであることが分かっていないので、ele[tKey]を指定しても読み取れない。

// 行: 3のele[tKey] の部分で
型 'string' の式を使用して型 'unknown' にインデックスを付けることはできないため、要素は暗黙的に 'any' 型になります。
  型 'string' のパラメーターを持つインデックス シグネチャが型 'unknown' に見つかりませんでした。ts(7053)

解決法

型SはObjectであると定義しておく。

• T extends string：Tはstringを継承した型 → Tはstringと定義される
• S extends {[key in T]: string}：Sは{[string型]: [string型]}の要素を持つObject