Get key of interface

keyof.ts

export enum FormFields {
  USERNAME = 'username',
  GENDER = 'gender',
  HEIGHT = 'height',
  SKILLS = 'skills',
  DATE_OF_BIRTH = 'dob',
  LANGUAGES = 'languages',
  COMPLEXION = 'complexion',
  BUILD = 'build',
  COUNTRY = 'country',
  CITY = 'city',
  ETHNICITY = 'ethnicity',
  HEAD_SHOT = 'head_shot',
  INTRODUCTION = 'intro',
}

export interface FormInputs {
  form1: {
    [FormFields.USERNAME]: string;
  };
  form2: {
    [FormFields.GENDER]: UserProfileOption | null;
    [FormFields.HEIGHT]: string;
    [FormFields.SKILLS]: UserProfileOption[];
  };
  form3: {
    [FormFields.DATE_OF_BIRTH]: string;
  };
  form4: {
    [FormFields.COUNTRY]: string;
    [FormFields.CITY]: string;
    [FormFields.LANGUAGES]: UserProfileOption[];
  };
  form5: {
    [FormFields.COMPLEXION]: UserProfileComplexionOption | null;
    [FormFields.BUILD]: UserProfileOption | null;
    [FormFields.ETHNICITY]:
      | { india: UserProfileOption }
      | { rest_of_the_world: UserProfileOption }
      | null;
  };
  form6: {
    [FormFields.HEAD_SHOT]: ImageOrVideo | null;
  };
  form7: {
    [FormFields.INTRODUCTION]: ImageOrVideo | null;
  };
}

// Imagine you are using react-hook-form and you wanna trigger the validation of form fields for page Form 1 on clicking next.
// This would help you in achieving the result
await trigger(`form${formPageNumber + 1}` as keyof FormInputs);