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

【问题标题】：How to define variable with generic type argument?如何用泛型类型参数定义变量？
【发布时间】：2017-03-17 08:16:42
【问题描述】：

考虑以下代码来定义一个带有泛型类型参数TRow 的 React 组件：

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

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

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

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

【问题讨论】：

我完全把你的问题弄错了，我不明白你为什么想让一个函数保持不变。也许你可以做 public static yourFunction(somearg:T) {} ???
是的，就像我在问题中展示的那样，我可以使用function DataTable<TRow> ... 来定义它。但是，由于所有代码都使用像 const DataTable = ... 这样的代码，我认为保持相同的语法会很好，但以某种方式添加泛型。
您的函数签名错误。 ({ rows: TRow[] }) 被重命名为解构错误。类型必须这样写({ rows } : { rows: TRow[]})github.com/Microsoft/TypeScript/issues/9657

标签： generics typescript lambda

【解决方案1】：

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

这些都是等价的：

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}]})

【讨论】：

【解决方案2】：

是的，你可以用 typescript 做你想做的事。

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

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

现在，您想在反应组件类中使用该属性类型。所以，假设你的组件是无状态的，我们将使用 React.SFC 类型来引用无状态的 React 组件。

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

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

    const MyStringDataTable = getDataTableComp<string>();

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

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

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

【讨论】：

【解决方案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

【讨论】：