Reactjs 类型检查聚合反应

我使用带有ag网格的Typescript，配置如下

typescript@3.9.6
@ag-grid-community/react@23.2.1
@ag-grid-enterprise/all-modules@23.2.1

我还使用了：

typescript@3.9.6
ag-grid-community@23.2.1
ag-grid-enterprise@23.2.1
ag-grid-react@23.2.1

在这两种情况下，以下代码都无法进行类型检查。请注意，代码几乎是逐字从在线文档中获取的，网址为：

从“React”导入React；
从'@ag grid community/react'导入{AgGridReact}；
导出类测试扩展了React.Component{
构造器（道具：任何）{
超级（道具）；
此.state={
columnDefs：[
{headerName:“Make”，字段：“Make”，可排序：true，筛选器：true}
],
行数据：[
{制造：“丰田”}，
{make:“Ford”}，
{制造：“保时捷”}
]
}
}
render（）{
返回(
);
}
}

Typescript抱怨：

ERROR in /home/.../filename.tsx
[tsl] ERROR in /home/....tsx(23,40)
  TS2339: Property 'columnDefs' does not exist on type 'Readonly<{}>'.

ERROR in /home/.../filename.tsx
[tsl] ERROR in /home/.../tsx (24,37)
  TS2339: Property 'rowData' does not exist on type 'Readonly<{}>'.

/home/../filename.tsx中的

错误
/home/…tsx（23,40）中的[tsl]错误
TS2339:类型“Readonly”上不存在属性“columnDefs”。
/home/../filename.tsx中出错
/home/../tsx（24,37）中的[tsl]错误
TS2339:类型“Readonly”上不存在属性“rowData”。

---

如何通过此类型检查错误？

对我有效的方法是导入以下类型：

import { ColDef } from 'ag-grid-community';

---

。。。然后键入

列defs

作为

ColDef[]

。这解决了类型检查问题。

这不是ag网格的问题，而是关于如何定义组件的问题。在你的代码中，你说：

导出类测试扩展React.Component{
// ...
}

如果查看

React.Component

type的定义，您会发现它是泛型的，最多可以接受三个类型参数：

interface Component<P = {}, S = {}, SS = any> {
 // ...
}

因此TypeScript认为组件的

状态是
{}
，因此没有属性
columnDefs
或
行数据

要解决此问题，请提供一种类型的
状态
：

接口测试状态{
columnDefs:SomeColumnType[]；
rowData:SomeRowObject[]；
}
//你也应该为道具定义一种类型，但这不是你的问题
导出类测试扩展了React.Component{
//工作！！！
}
如果检查他们的代码产生的错误，则访问
状态上不存在的属性
columnDefs
和
rowData
是一个问题，这显然是错误的。字体检查的问题是AgGridReact，而不是我自己的组件。@MarcusJuniusBrutus，正如奥利弗·克伦威尔所说：“我恳请你，在基督的内心里，认为你可能错了。”。我为您制作了一个小的代码沙盒，并基于我的答案提供了一个有效的解决方案。另外，请更加体贴你的话，这是一个社区的人谁爱编码，并热衷于帮助对方。尊重他人是这些社区生存策略的重要组成部分。你的工作解决方案的关键部分基于我的答案，而不是你的答案。我坚持我的立场；问题不在于类测试的类型。我相信你对你的解决方案为什么有效感到困惑。它与我的组件的类型没有任何关系，因为我的组件没有被调用。调用get的是AgGridReact组件，所需的只是提供调用AgGridReact组件时使用的
columnDefs
类型。键入测试组件本身是一种转移注意力的行为。此外，说某些东西“明显错误”也不是不尊重。
interface Component<P = {}, S = {}, SS = any> {
 // ...
}