使用 ag-grid-react 和 typescript 时出现错误

Question

经过相当多的谷歌搜索后，我仍然找不到使用 ag-grid-react 与 typescript 的示例，尽管 ag-grid-react 项目似乎有 typescript 打字。

在我的 React 应用程序中，我安装了 ag-grid-react：npm i --save ag-grid ag-grid-react react-dom-factories

这段代码作为 jsx 文件看起来不错，但如果我尝试将其用作打字稿 tsx 文件，则会出现编译器错误：

const columnDefs =  [
    {headerName: 'Make', field: 'make'},
    {headerName: 'Model', field: 'model'},
    {headerName: 'Price', field: 'price'}
];
const rowData = [
    {make: 'Toyota', model: 'Celica', price: 35000},
    {make: 'Ford', model: 'Mondeo', price: 32000},
    {make: 'Porsche', model: 'Boxter', price: 72000}
]

class App extends Component {
    constructor(props: any) {
        super(props);
    }

    render() {
        return (
            <div
                className="ag-theme-balham"
                style={{ height: '200px', width: '600px' }}
            >
                <AgGridReact
                    columnDefs={columnDefs}
                    rowData={rowData}>
                </AgGridReact>
            </div>
        );
    }
}

export default App;

AgGridReact 标签上的编译错误

Type '{ children: never[]; columnDefs: { headerName: string; field:
string; }[]; rowData: { make: string; model: string; price: number;
}[]; }' is not assignable to type 'IntrinsicAttributes &
IntrinsicClassAttributes<AgGridReact> & Readonly<AgGridReactProps> &
Readonly<{ children?: ReactNode; }>'.   Property 'columnDefs' does not
exist on type 'IntrinsicAttributes &
IntrinsicClassAttributes<AgGridReact> & Readonly<AgGridReactProps> &
Readonly<{ children?: ReactNode; }>'.ts(2322)

任何人都可以提供任何指导吗？

Answer 1

误报：我只是需要npm install ag-grid-community，而不是 ag-grid