TypeScriptでany[]を使わずジェネリクスでなんらかのリスト型を渡したい

Question

TypeScriptを今学習しています。

入力する引数の要素の型と、レスポンスの要素の型とが同じ関数を定義しており、
いまはany[]を利用しているのですが、外から型を注入できれば良いのではと思い。
typescriptのgenericsを活用して、定義できればと思っています。

サンプルコードにある、いかの3つを実現したいです。

• someFilter()へのジェネリクス定義
• interface Propsへのジェネリクス定義
• interface ResPropsへのジェネリクス定義

interface Props{
    items:any[], // ★any[]を使わず、ジェネリクスを使いT[]と定義したい
    someKey:string
}
interface ResProps{
    filteredItems:any[] // ★any[]を使わず、ジェネリクスTを使いT[]と定義したい
}
export const someFilter = ({items, someKey}:Props) : ResProps => {

  const filteredItems = [...items].map((item)=>{
    // someKeyやitemsの型に基づいたitemsの何らかの加工処理
    if(someKey === ""){
      return item;
    }

    // 例としてこんなかんじ
    if(item["name"] === undefined){
      return item
    }else{
      item["name"] = item["name"] + "様"
    }

    if(item[someKey] === undefined){
      return item
    }else{
       item["name"] = item["name"] + someKey
    }
    return item
  })

  return {
    filteredItems
  }
}

関数を利用するスクリプトはこんな感じです。

//例1
interface Author{
  id: number,
  name: string;
}

const authorItems:Author[] = getItems("author");  // 引数に応じてなんらかのリストを取得
const {filteredItems} = someFilter({items: authorItems, someKey:"name"})
//↓こうしたい
const {filteredItems} = someFilter<Author>({items: authorItems, someKey:"name"})

//例2
interface Post{
  id: number,
  title: string;
}
const postItems:Post[] = getItems("post");
const {filteredItems} = someFilter({items: postItems, someKey:"title"})
//↓こうしたい
const {filteredItems} = someFilter<Post>({items: postItems, someKey:"title"})

//例3
const stringItems: string[] = ['コーラ','ソーダ'];
const {filteredItems} = someFilter({items: stringItems, someKey:""})
//↓こうしたい
const {filteredItems} = someFilter<string>({items: stringItems, someKey:""})

次のように、<T extends {}>などの定義で解決しそうな感じもしたのですが、
加工処理でエラーが発生してしまいました。

TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.   No index signature with a parameter of type 'string' was found on type '{}'.

TS7053: Element implicitly has an 'any' type because expression of type '"name"' can't be used to index type '{}'.   Property 'name' does not exist on type '{}'

// typescirptのエラーが生じるコード

interface Props<T>{
  items:T[],
  someKey:string
}
interface ResProps<T>{
  filteredItems:T[]
}
export const someFilter = <T extends {}>({items, someKey}:Props<T>) : ResProps<T> => {

  const filteredItems = [...items].map((item)=>{
    // ここでTypeScriptのErrorが発生します。
    
    if(someKey === ""){
      return item;
    }

    // 例としてこんなかんじ
    if(item["name"] === undefined){
      return item
    }else{
      item["name"] = item["name"] + "様"
    }

    if(item[someKey] === undefined){
      return item
    }else{
       item["name"] = item["name"] + someKey
    }
    return item    

    return items;
  })

  return {
    filteredItems
  }
}

アドバイスをお願いします。

Answer 1

加工処理でエラーが発生してしまいました。

Tの型をもう少し具体的にすれば解決できます。

<T extends Record<string, string> & {name?: string}>

Comments

[maisumakun]

すみません、読み間違えていたので書き直しました。

[eternalbeginne]

回答ありがとうございます。

このRecordというのはTypeScriptの組み込み関数ということでしょうか？
これ？
https://qiita.com/kei-nakoshi/items/6b1ed11741b90e71e1bd

[maisumakun]

そうですね。

[eternalbeginne]

いろいろ試してみているんですけど、解消されないですね。

質問文がわるかったのかもしれないですが、
文字列の配列でも渡せるし、ナンバーの配列でも渡せるし、あらゆる型オブジェクトの配列でもわたせる。
っていう、汎用性のある関数を作りたかったんです。

なおかつ、オブジェクトの型が渡された場合は、そのオブジェクトのあらゆるプロパティの値にそって、配列を加工したい。と。

「何でも渡せる=型safeではない」と考えるべきですかね。それであれば、any[]でいいやとわりきれるんですが。

今こんな感じで定義してあり、文字列配列、数字配列には対応できないとしました。
```
interface Props<T> {
items: T[] ,
someKey?: keyof T
}

const someFilter = <T extends {[key: string]:any}>({items, someKey}: Props<T>): ResProps<T> => {
```