javascript - Typescript 中的对象类型

Question

我正在运行 graphql 突变，根据用户在前端输入的内容，我使用 input 对象在 graphql 突变中传递不同的变量。

const [updateUser] = useMutation<UpdateUserReponse>(UPDATE_USER);

  let submitForm = (
    email: string,
    firstName: string,
    lastName: string,
    newEmail: string,
    phoneNumber: string,
  ) => {
    setIsSubmitted(true);

    if (email && (firstName || lastName || newEmail || phoneNumber)) {
      const input: any= {};
      if (firstName !== '') {
        input.firstName = firstName;
      }
      if (lastName !== '') {
        input.lastName = lastName;
      }
      if (newEmail !== '') {
        input.email = newEmail;
      }
      if (phoneNumber !== '') {
        input.phoneNumber = phoneNumber;
      }
      updateUser({
        variables: {
          email: email,
          input: input,
        },
      })

但是，我不想使用 input:any 并且希望更具体。一般来说，这是我在突变中使用的输入类型:

interface UpdateUserInput {
  email: String;
  firstName: String;
  lastName: String;
  phoneNumber: String;
}

我尝试使用这个而不是any，但它不起作用。我也尝试过使用 object 但随后出现如下错误:

Property 'firstName' does not exist on type 'object'.ts(2339)

Answer 1

如果根据输入数据可能存在或不存在，您可以简单地将它们作为界面中的可选属性，这样您仍然可以获得所有智能感知，但如果属性不存在，则不会抛出错误。

所以，

interface UpdateUserInput {
  email: String;
  firstName?: String;
  lastName?: String;
  phoneNumber?: String;
}