Question

考虑以下代码来定义具有泛型类型参数TRow的反应组件：

function DataTable<TRow> ({ rows: TRow[] }) {
  return (
  )
}

在之前的代码中，使用了ES6，组件被定义为无状态函数：

const DataTable = ({ rows }) => ( ... )

如何定义这样的函数，使其具有泛型类型参数TRow？这完全是由Typescript支持的吗？

Answer 1

是的，您可以使用打字稿完全按照自己的意愿行事。

假设您将使用类型参数holder DataTableProps（可以是任何类型的行）将您的prop类型包装在通用接口TRow中。

    interface DataTableProps<TRow> {
        items: Array<TRow>
    }

现在，您希望在react组件类中使用该属性类型。因此，假设您的组件是无状态的，我们将使用React.SFC类型来引用无状态反应组件。

    function getDataTableComp<TRow>() : React.SFC<DataTableProps<TRow>>{
        return props => <div>
            <p>{props.items.toString()}</p>
        </div>
    }

这是一个返回特定类型的无状态反应组件的函数。然后我们可以使用函数as，

    const MyStringDataTable = getDataTableComp<string>();

现在，我们有一个特定的数据表类型，即字符串行的数据表。然后，我们可以使用实例

    ReactDOM.render(<MyStringDataTable items={['a', 'b']} />, document.getElementById('page-root'))

您将在页面中呈现a,b。

Answer 2

是的，这是可能的，但仅适用于函数，而不适用任何任意变量。如您所见，它是类型本身，您可以在其中定义泛型，然后可以创建该类型的变量，从而允许它设置泛型。

这些都是等效的：

interface Row { a: number }

function DataTable1<T>({ rows }: { rows: T[] }): void { return void 0 }
const DataTable2: <T>({ rows }: { rows: T[] }) => void = ({rows}) => void 0
type  DataTable = <T>({ rows }: { rows: T[] }) => void
const DataTable3: DataTable = ({rows}) => void 0

const a1 = DataTable1<Row>({rows: [{a: 1}]})
const a2 = DataTable2<Row>({rows: [{a: 2}]})
const a3 = DataTable3<Row>({rows: [{a: 3}]})

Answer 3

如果可以更改功能定义，则可以通过使用 接口功能定义 更改 功能定义 来实现em>。

下面是您上面提供的代码之后的示例：

// Replace this
function DataTable<TRow> ({ rows: TRow[] }) {
    return (
    )
}

// By this

interface DataTable<TRow> {
    (elements: { rows: TRow[] }): any
}

//And now you can define the function in this way:
// (Here is necessary to use <T extends any> to avoid syntax errors when you're working on .tsx files. On .ts files <T> is enough) 
const myFn: <T>(...args: Parameters<DataTable<T>>) => ReturnType<DataTable<T>> = <T extends any>({ rows: T }) => {
    return 123;
};

// And now you call the above function:

myFn<string>({ rows: ['asd,asd'] });

我在这里回答了一个有助于解决此问题的问题：Typescript ReturnType of generic function

如何使用泛型类型参数定义变量？

3 个答案: