react + ts定义接口类型写法

news2024/11/16 1:34:32

接口（未进行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>,

        <Button
          key="deleteable"
          type="primary"
          danger
          onClick={() => 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})