ts中如何复用组件库的类型库？

Question

最近在使用antd-design-pro构建一个后台管理系统。
用到了一个上传组件Upload。其中有一些相关的函数回调。

<Upload
    name="avatar"
    listType="picture-card"
    className="avatar-uploader"
    showUploadList={false}
    action="https://xxx.com/api/upload"
    beforeUpload={beforeUpload}
    onChange={handleChange}
>

function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}

beforeUpload的file参数，在node_modulesantdlibuploadinterface.d.ts有相应的定义。

beforeUpload?:?(file: RcFile, FileList: RcFile[]) => boolean | PromiseLike<void>;

但在当前的tsx中如何使用呢？

Answer 1

首先你要知道 Upload 这个 组件的 props 类型，比如叫 UploadProps。

import {UploadProps} from 'antd/xxx/xx'

type BeforeUpload = UploadProps['beforeUpload']

const beforeUpload: BeforeUpload = file => {
    ...
}