接口（未进行ts定义）

export async function UserList(params: {// keyword?: string;current?: number;pageSize?: number;},// options?: { [key: string]: any },
) {return request<API1.UserList>('http://geek.itheima.net/v1_0/mp/articles', {method: 'GET',params: {...params,},// ...(options || {}),});
}

接口（ts定义类型）

// 获取数据
export async function UserList(params?:API1.QueryParams
) {return request<API1.UserList>('http://geek.itheima.net/v1_0/mp/articles', {method: 'GET',params: {...params,});
}

   //定义查询参数的类型(要传给后端的参数类型)export interface QueryParams{status?:string;channel_id?:string;begin_pubdate?:string;end_pubdate?:string;page?:number;per_page?:number}//定义一行的数据类型（用于在ProColumns使用）export interface ProColumns{comment_count:number;cover:covers;id:string;like_count:number;pubdate:Date;read_count:number;status:number;title:string;}

定义columns （定义每一行对象的数据类型）

定义接口返回值类型

ProTable组件定义类型(和columns定义的类型数据一样，都是定义每一行对象的数据类型)

定义方法的形参

tsx文件中的方法  
const Clickdelete = async (record:API1.records) => {console.log(record,'record')confirm({title: `是否删除id为${record.id}的数据`,icon: <ExclamationCircleFilled />,content: '删除数据',okText: '确定',okType: 'danger',cancelText: '取消',async onOk() {const res = await DeleteList(record.id);actionRef.current?.reloadAndRest?.();message.success('删除成功');},// 取消的事件onCancel() {},});};tsx文件中的页面const columns: ProColumns<API1.ProColumns>[] = 
[{title: '操作',valueType: 'option',key: 'option',render: (text, record, _, action) => [<Button type="primary" key="editable" onClick={() => ClickEmit(record)}>编辑</Button>,<Buttonkey="deleteable"type="primary"dangeronClick={() => Clickdelete(record)}>删除</Button>,],},]ts文件//传入的数据（在这里是这一行对象的数据）export interface records{id: string,title: string,status: number,comment_count: number,pubdate: Date,cover: covers,like_count: number,read_count: number}

useState定义类型

  // 定义 record 对象的类型
interface RecordType {obj: any; // 根据实际的 obj 类型进行替换title: string;Isloding: boolean;
}定义state数据
// useState<RecordType | null>(null) 来初始化 record 状态，这样 record 可以是 RecordType 类型的对象或 null。const [Record,setRecord] =  useState<RecordType | null>(null);使用setRecord({obj:record,title:'修改数据',Isloding:true})

遍历每一项定义类型

没定义前

定义后

由于每一项只有两个字段，所以就定义了两个