Typescript 和 React with File Upload（打字）

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 | 类型的参数斑点 |未定义'不是 可分配给 'string | 类型的参数斑点'。 类型“未定义”不可分配给类型“字符串 | Blob'.ts(2345)

你应该如何在 useState 中初始化你的对象？如果你不初始化，就像这里一样，你是否必须继续检查 null 才能让编译器满意？我刚刚在 UploadFile 中添加了一个检查，以查看 fileSelected 是否为空。但后来我不得不再次引用 fileSelected.name。

那么对于对象，尤其是像这种文件类型的对象，你应该如何处理初始化它？而且，一般来说，如何处理对象类型？

没关系，但这是标记部分：

        <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() 调用在运行时或在打字稿编译器中不会有任何问题。接口File 扩展了Blob，因此在我们排除了undefined 的可能性后，将其分配给string | Blob 没有问题。

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

Playground Link