我创建了一个通用函数来呈现一个表。
Table.tsx
interface Type {
name: string;
age: number;
}
interface PropType {
column: Array<Type>;
}
function Table({ column }: PropType) {
return null;
}
export default Table;
现在,我将此组件用于两个不同的页面,用户和产品。用户和产品页面都有不同的数据要在表组件上呈现
User.tsx
import Table from "./Table";
interface InterfaceUser {
name: string;
age: number;
}
const users: Array<InterfaceUser> = [
{
name: "John",
age: 21
}
];
function User() {
return <Table column={users} />;
}
export default User;
User.tsx运行良好,因为我们在表组件中创建了相同的接口,但当它进入Product.tsx页面时,我们得到错误。
import Table from "./Table";
interface InterfaceProduct {
title: string;
age: number;
}
const products: Array<InterfaceProduct> = [
{
title: "Product name",
price: 21
}
];
function Product() {
return <Table column={products} />;
}
export default Product;
我是新的 typescript ,任何帮助将不胜感激。
1条答案
按热度按时间rdlzhqv91#
可以像这样使用Typescript泛型类型:
在
Table.tsx
中:在
User.tsx
中:在
Product.tsx
中: