Object 输入 Typescript

Question

I am running a graphql mutation and depending on what the user inputs on the front end, I pass different variables in the graphql mutation using the input object.

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,
        },
      })

However, I don't want to use input: any and want to be more specific. Generally, this is the input type that I am using in my mutation itself:

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

I have tried using this instead of any but it doesn't work. I have also tried to use object but then I get errors like:

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

Answer 1

If depending on the input the data may exist or not, you can simply make them an optional property in the interface, that way you still get all the intellisense but if a property does not exist it won't throw an error.

So,

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