Question

我正在尝试将一个对象传递给一个函数（在本例中是将 props 传递给 React 组件）。

该对象包含以下属性：

data - 一些任意数据
selector - 返回部分数据的函数
render - 处理渲染选定数据 (JSX) 的函数

我不确定如何正确输入。

我最初认为可以通过这种方式完成：

type Props<D, S> = {
  data: D
  selector: (data: D) => S
  render: (data: S) => any
}

const Component = <D, S>(props: Props<D, S>) => null

Component({
  data: { test: true },
  selector: (data) => data.test,
  render: (test) => test, // test is unknown
})

这导致通用 S 未知。但是，如果我们删除依赖于 render 的 S 属性，我们会得到正确的返回类型（布尔值）。

我也试过：

使用通用参数 S extends (data: D) => unknown，render 的数据类型为 ReturnType<S>。
使用单独的类型通过 selector 推断和提取 type Extract<D, S> = S extends (data: D) => infer T ? T : D 的返回类型。

Answer 1

这里有一个解决方案：

import React from 'react'

type Props<D, S> = {
  data: D
  selector: (data: D) => S
  render: (data: S) => any
}


const Comp = <D, S>(props: Props<D, S>) => null

const result = <Comp<number, string> data={2} selector={(data: number) => 'fg'} render={(data: string) => 42} /> // ok
const result2 = <Comp<number, string> data={2} selector={(data: string) => 'fg'} render={(data: string) => 42} /> // expected error
const result3 = <Comp<number, string> data={2} selector={(data: number) => 'fg'} render={(data: number) => 42} /> // expected error

你应该为组件显式定义泛型

类型属性依赖于另一个属性的返回类型

1 个答案: