在开发中，数据表格是一个常见的需求，而ag-Grid是一个功能强大的数据表格库，支持React。在之前的JavaScript实现中，通过定义列与行数据对象属性的绑定来实现列的填充。然而，这种方法存在一定的脆弱性：如果出现拼写错误或行数据模型发生变化，可能会导致表格中的某些列显示为空。幸运的是，借助TypeScript的keyof操作符，可以更安全地实现列绑定。
在本文中，将探讨如何使用TypeScript来增强ag-Grid与React结合使用的类型安全性。首先，需要定义一个类型（或接口），用于模拟表格行的数据结构。然后，使用keyof操作符来检索属性名，从而设置列的字段。这种方法不仅可以减少错误，还可以提高开发效率。
定义类型模型
假设需要展示一个包含最亮恒星列表的表格。表格有六列，因此首先创建一个Star.ts文件，定义一个类型来模拟行数据：
type Star = {
rank: number;
magnitude: number;
name: string;
designation: string;
distance: number;
spectral: string;
}
export default Star;
有了这个类型定义，就可以利用它来定义表格列。以下是定义表格组件所需的全部代码（函数式组件）：
import React from 'react';
import { ColDef } from 'ag-grid-community';
import { AgGridReact } from 'ag-grid-react';
import Star from './Star';
import brightestStars from './brightestStars';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
const fieldName = (name: keyof Star) => name;
const columnDefs: ColDef[] = [
{
headerName: 'Rank',
field: fieldName('rank'),
width: 80,
},
{
headerName: 'Visual magnitude (mV)',
field: fieldName('magnitude'),
width: 170,
},
{
headerName: 'Proper name',
field: fieldName('name'),
width: 180,
},
{
headerName: 'Bayer designation',
field: fieldName('designation'),
width: 150,
},
{
headerName: 'Distance (ly)',
field: fieldName('distance'),
width: 120,
},
{
headerName: 'Spectral class',
field: fieldName('spectral'),
width: 130,
}
];
const StarsGrid: React.FC = () => {
return (
);
}
export default StarsGrid;
注意到代码中导入了ColDef，这是不必要的，但ag-Grid提供了类型定义，这使得开发更加容易。因为columnDefs被声明为ColDef数组，IDE（例如Visual Studio Code）能够提供列属性的建议，并会立即高亮任何错误。
Star类型也被导入了。它在提供Star属性的静态名称时是必需的：
const fieldName = (name: keyof Star) => name;
这个小箭头函数在定义字段映射时被使用：
{
headerName: 'Visual magnitude (mV)',
field: fieldName('magnitude'),
width: 170,
}
乍一看，这似乎没什么用... 'magnitude'仍然是一个字符串？让看看如果'dsignation'拼写错误，并且Star模型通过删除光谱属性进行了修改，会发生什么：
IDE会立即高亮错误，TypeScript不会编译。静态类型检查万岁！
演示应用
实时示例：
源代码：
该应用是在React 16.13.1、ag-Grid Community 23.1.1、TypeScript 3.7.0下构建的，并在Chrome 83、Firefox 76和Edge 44中进行了测试。
如果想在本地运行该应用：克隆仓库，执行npm install和npm start（就像使用create-react-app初始化的任何其他项目一样）...
TypeScript 2.1引入了keyof操作符，该操作符创建一个类型，列出属性名。在例子中，keyof Star生成一个类型，它包含Star中存在的六个属性名的联合。实际上，可以手动创建这样的类型：
type TheNames = 'rank' | 'magnitude' | 'name' | 'designation' | 'distance' | 'spectral';
这与使用keyof Star创建的类型相同。keyof选项显然是更好的选择，因为每当Star类型更改其属性时，类型将自动更新。
const fieldName = (name: keyof Star) => name;