如何解决“不将对象用作类型”的错误？

IT技术 reactjs typescript
2021-05-04 21:51:24

我不明白这个错误信息引起的。

我的组件有两个和一个包含对象的数据数组。

我收到一条错误消息“不要object用作类型。该object类型目前难以使用'。

我该如何解决？

我附上了数组有对象的数据。

first.tsx...
import { dataList } from './xxx';
   // This dataList === 
export const dataList = [
  {
    id: 1,
    title: "text",
    hidden1: "text",
  },
  {
    id: 2,
    title: "text",
    hidden1: "text",
    hidden2: "text",
  },
  {
    id: 3,
    title: "text",
    hidden1: "text",
    hidden2: "text",
    hidden3: "text",
  },
];

const First = () => {
  return <Second data={dataList} />
}

second.tsx...
const Second = ({data} : { data:object[] } ) => {.    << here, "Don't use 'object' as a type.
  return <ul><li> {data.tag....blah blah} </li><ul>
}

错误信息 ：

Don't use `object` as a type. The `object` type is currently hard to use ([see this issue](https://github.com/microsoft/TypeScript/issues/21732)).
Consider using `Record<string, unknown>` instead, as it allows you to more easily inspect and use the keys  @typescript-eslint/ban-types
2个回答

您需要明确说明此处被解构的数据的类型。

您可以只创建数据的接口。

编辑：由于您的数据有一些可选参数，我更新了界面以反映这一点。

interface IData {
    id: number;
    title: string;
    hidden1: string;
    hidden2?: string;
    hidden3?: string;
}

然后替换object[]为IData[]. 所以现在你指定 this 接受一个IData接口数组。

const Second = ({ data } : { data:IData[] }) => {
  return <ul><li>{data}</li><ul>
}

我没有用 React 尝试这个，所以这里的代码风格有点不同，但是即使没有创建接口，Typescript 也可以编译它：

const second = (data: Record<string, unknown>[]) => {
  return data
    .map(item =>
      Object.keys(item)
        .map(key => `key:${key} = value:${item[key]}`)
        .join(',')
    )
    .join(';');
};

我建立了一些映射，但你也可以return data。这当然没用，但它会编译。

这也会编译。注意[]两个解决方案中的数组符号：

const second = (data: { [key: string]: unknown }[]) => {
  return data
    .map(item =>
      Object.keys(item)
        .map(key => `key:${key} = value:${item[key]}`)
        .join(',')
    )
    .join(';');
};
其它你可能感兴趣的问题
上一篇使用 stopPropagation() 处理 React 事件委托 下一篇ES6中React Class定义方法的两种方式有什么区别