接口(未进行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})
遍历每一项定义类型
没定义前
定义后
由于每一项只有两个字段,所以就定义了两个