React：TypeScriptジェネリック、パラメータータイプを関数から自動切り替え（小道具としての関数）

私が正しくあなたの要件を理解していた場合は、botVariables何もすることが、可能性botVariablesとbotCommands、我々はに提供することをTestComponent互いに一致する必要があります。つまり、内のbotResponse関数の引数は小道具botCommandsと同じタイプbotVariablesです。

これを行うために、BotCommandインターフェイスをジェネリックTにしbotResponseます。ここで、タイプは変数のタイプを表します。

interface BotCommand<T> {
  command: string;
  botResponse(botVariables: T): string;
}

当社はTestComponentPropsまた、一般的なもので、私たちは同じ適用TにbotVariablesするようにbotCommands。

interface TestComponentProps<T> {
  botVariables: T;
  botCommands: BotCommand<T>[];
}

これは、コンポーネントも汎用であることを意味します。

export default function TestComponent<T>(props: TestComponentProps<T>) {...}

両方propsが同じを共有するため、渡された変数から応答を作成することに問題はありませんT。

export default function TestComponent<T>({ botVariables, botCommands }: TestComponentProps<T>) {
    return (
        <div>
            <h1>Bot Output</h1>
            {botCommands.map(command => (
                <div>
                    <div>Bot recieved command {command.command}</div>
                    <div>Bot responded {command.botResponse(botVariables)}</div>
                </div>
            ))}
        </div>
    );
}

ジェネリックは小道具から推測できるため、T使用時に明示的に宣言する必要はありません。一致しない場合、typescriptは文句を言います。TestComponentbotVariablesbotCommands

この例では：

function Main() {
  return (
    <TestComponent
      botVariables={{
        tasks: ["first"],
        groups: ["something"]
      }}
      botCommands={[{
        command: "-help",
        botResponse(botVariables) {
          return botVariables.tasks[0]
        }
      }]}
    />
  );
}

botResponse関数の推定署名は完全で正しいです：

(method) BotCommand<{ tasks: string[]; groups: string[]; }>.botResponse(botVariables: {
    tasks: string[];
    groups: string[];
}): string

適切な推論を得る["first"]ために、空の配列はとして入力されますが、必要なため、空の配列の代わりに使用するnever[]必要がありましたstring[]。空の配列を使用できますが、その型を明示的に設定する必要があります。

遊び場リンク