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;
}

打字稿中的对象类型

1 个答案: