The operand of a 'delete' operator must be optional.ts(2790) While creating a form using Typescript

Question

I don't understand why this error happening. I'm creating a form to submit user email

export const register = createAsyncThunk<
  User,
  RegisterProps,
  {
    rejectValue: ValidationErrors;
  }
>("auth/registerStatus", async (credentials, { rejectWithValue }) => {
  try {
    // Don't POST blank email
    if (!credentials["email"]) {
      delete credentials["email"]; //editor marking in this line there is error.
    }
    const response = await api.post(API_REGISTER, credentials);
    return response.data;
  } catch (err) {
    const error: AxiosError<ValidationErrors> = err;
    if (!error.response) {
      throw err;
    }
    return rejectWithValue(error.response.data);
  }
});

but I am facing this error:

The operand of a 'delete' operator must be optional.ts(2790)

I guess there is some logic error but I need your help to solve this.

Answer 1

In your credentials interface or class declaration object, you must mark email as option field using ? mark.

ex:

    interface Credentials {
        email?: string,
        ...
    }

Answer 2

Another solution, we could use the Partial utility type to construct a new type with the properties set to optional before using the delete operator.

credentials: Partial<Credentials> = { ... };
delete credentials["email"];