道具应该包含一个接口 - 如何定义它

Question

所以，我希望我的一个组件有一个接口传递给它。 我的方法是这样的

import { InterfaceType } from "typescript";

type Props = {
    dataType: InterfaceType
}

export default function CreateRow(props: Props) {
  return (
    <div>"test"</div>
  );  
}

以及对组件的调用

        <CreateRow dataType={ISchool}/>

但我明白了

'ISchool' only refers to a type, but is being used as a value here.

为什么会发生这种情况，我该如何解决？

编辑：在 CreateRow 中，我想创建来自 Props 的 dataType 类型的对象。 将通过 Props.dataType 传递的接口将在 CreateRow 中用于创建该类型的对象。

Answer 1

你需要在这里重新考虑你的方法。

道具是运行时值。 但是，类型仅在编译时存在。 这意味着您不能将类型作为道具传递。

这就是这个错误的含义：

'ISchool' 仅指一种类型，但在这里用作值。

ISchool是一种类型，在代码实际运行时并不存在。 所以作为道具传递是行不通的。

---

您可以做的是使CreateRow成为通用函数。 这让它知道特定类型，并强制您在其道具中使用该类型。

例如：

type Props<T> = {
    rowData: T
}

export default function CreateRow<T>(props: Props<T>) {
  return (
    <div>"test"</div>
  );  
}

您可能会使用如下：

const testA = <CreateRow<AbcNum> rowData={{ abc: 123 }} /> // fine
const testB = <CreateRow<AbcNum> rowData={{ abc: 'asd' }} /> // type error

// or

const CreateAbcNumRow = CreateRow<AbcNum>
const testC = <CreateAbcNumRow rowData={{ abc: 123 }} /> // fine

见游乐场