使用TypeScript在FormData中要求字段

7eumitmz 于 2023-01-21 发布在 TypeScript

关注(0)|答案(2)|浏览(430)

我想使用FormData（documentation）接口指定必填字段，所以我想使用TypeScript来检查formData是否具有所有必填字段。

export interface AddRequest {
  image: Blob;
  username: string;
}

// This is invalid
export interface AddRequestApi extends FormData {
  image: FormDataEntryValue;
  username: FormDataEntryValue;
}

所以我可以做：

export const mapRequest = (request: AddRequest): AddRequestApi => {
  const { image, username } = request;

  const formData = new FormData();
  formData.append('image', image);
  formData.append('username', username);

  // I want my ts compiler to check if returned formData has required fields
  // that should be stated in AddRequestApi type (or interface)
  return formData;
};

typescript

来源：https://stackoverflow.com/questions/70003975/require-fields-in-formdata-using-typescript

2条答案

按热度按时间

h79rfbju1#

正如@Fabian劳尔所说：
多个.append（）调用意味着代码只能在运行时检查，而不是编译时（这意味着TS不能检查它）
现在，有一些方法可以用TS实现运行时类型检查。
查看此博客https://levelup.gitconnected.com/how-we-use-our-typescript-type-information-at-runtime-6e95b801cfeb
验证-使用另一个同样令人敬畏的工具，Another JSON Schema Validator或ajv，我们可以在运行时验证任何对象，只需传入对象和我们的模式。我们甚至可以获得一种格式的错误输出，我们可以通过编程来使用它，例如在表单上显示无效字段的错误，自动修复无效属性等。

赞(0）回复(0）举报 2023-01-21

vof42yt12#

像这样？

type MyFormFields = "image" | "username";

interface MyFormData extends FormData {
    append(name: MyFormFields, value: string | Blob, fileName?: string): void
}

function bar(data: MyFormData) {
    const image = new Blob();
    const username = "myusername";
    data.append("image", image)
    data.append("username", username);
    data.append("something", "not working"); 
                // Argument of type '"something"' is not assignable to parameter of type 'MyFormFields'.
}

FormData.append()的接口为

append(name: string, value: string | Blob, fileName?: string): void

因此，当你重写append函数的接口时，试着将name参数限制在自定义的必填字段中。

赞(0）回复(0）举报 2023-01-21

我来回答

使用TypeScript在FormData中要求字段

2条答案

相关问题

热门标签

最新问答