reactjs - typescript 和响应文件上传(打字)

Question

我刚开始使用 TypeScript，所以请记住。我正在尝试在 React/TS 中实现一个简单的文件上传。一般来说，我认为我不明白如何初始化对象，比如在 useState 中，并正确处理可能性。例如，考虑以下代码，当用户单击“上传”按钮时我正在运行一个函数，我尝试从状态读取文件并将其放入 formData 以将其发送到我的 api 端点):

const [fileSelected, setFileSelected] = React.useState<File>() // also tried <string | Blob>

const handleImageChange = function (e: React.ChangeEvent<HTMLInputElement>) {
    const fileList = e.target.files;

    if (!fileList) return;
    
    setFileSelected(fileList[0]);
  };

   const uploadFile = function (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
    const formData = new FormData();
    formData.append("image", fileSelected, fileSelected.name);

     // line above ^ gives me the error below
  };
}

'string | 类型的参数 Blob |未定义'不是
可分配给类型为 'string | 的参数 | Blob '。
类型 'undefined' 不能分配给类型 'string |
Blob'.ts(2345)
你应该如何在 useState 中初始化你的对象？如果你不初始化，像这里一样，你是否必须继续检查 null 以使编译器满意？我刚刚在 UploadFile 中添加了一个检查以查看 fileSelected 是否为空。但后来我不得不再次引用fileSelected.name。
那么对于对象，特别是像这种 File 类型的东西，你应该如何处理它的初始化？但是，一般来说，如何处理对象类型？
这并不重要，但这是标记部分:

        <Container className={classes.container}>
          <label htmlFor="photo">
            <input
              accept="image/*"
              style={{ display: "none" }}
              id="photo"
              name="photo"
              type="file"
              multiple={false}
              onChange={handleImageChange}
            />

            <Button
              className={classes.buttons}
              component="span"
              variant="contained"
              onClick={uploadFile}
            >
              Choose Picture
            </Button>
          </label>
        </Container>

Answer 1

当您拨打 useState如果不设置初始/默认值，则类型将包括 undefined除了预期的类型。在这里，您使用了通用 <File>告诉useState什么类型的期望。但是因为你没有设置值就启动了，fileSelected的类型变成 File | undefined .
这很好，因为它准确地代表了并不总是存在 File 的现实。状态中的对象。但这确实意味着我们必须检查 fileSelected 的值在使用它之前。只需添加一个 if声明和您的 formData.append()调用在运行时或 typescript 编译器中不会有任何问题。界面 File扩展 Blob所以将它分配给 string | Blob 没有问题在我们排除了 undefined 的可能性之后.

const uploadFile = function (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
    if (fileSelected) {
        const formData = new FormData();
        formData.append("image", fileSelected, fileSelected.name);
    }
};

Playground Link