Argument of type 'string' is not assignable to parameter of type '"contacts.github" | «contacts.vk» | ... 5 more ... | "contacts.mainLink"'.ts(2345)?

Question

[Павел Орловский]

В этом коде я использую библиотеку react-hook-form.
В data у меня типизация :

(parameter) data: {
    aboutMe?: string;
    userId: number;
    lookingForAJob: boolean;
    lookingForAJobDescription: string;
    fullName: string;
    contacts: {
        github: string;
        vk: string;
        facebook: string;
        instagram: string;
        twitter: string;
        website: string;
        youtube: string;
        mainLink: string;
    };
    photos: {
        ...;
    };
}

Вот data:

const { register, handleSubmit } = useForm<ProfileType>({
    defaultValues: { ...profile },
  });

  const onSubmit: SubmitHandler<ProfileType> = async (data) => {
    await dispatch(updateOwnersProfile(data));
    jumpToNonEditMode();
  };

Я мапплю ключи объекта contacts и инпутам задаю имена через {...register("contacts." + key)}

{Object.keys(profile.contacts).map((key) => {
            return (
              <div key={key} className={s.contact}>
                <b>{key} :</b>
                <input {...register("contacts." + key)} placeholder={key} />
              </div>
            );
          })}

но получаю тайпскрипт ошибку:

TS2345: Argument of type 'string' is not assignable to parameter of type '"aboutMe" | "userId" | "lookingForAJob" | "lookingForAJobDescription" | "fullName" | "contacts" | "photos" | "contacts.github" | "contacts.vk" | "contacts.facebook" | "contacts.instagram" | ... 5 more ... | "photos.large"'.
    60 |               <div key={key} className={s.contact}>
    61 |                 <b>{key} :</b>
  > 62 |                 <input {...register("contacts." + key)} placeholder={key} />
       |                                     ^^^^^^^^^^^^^^^^^
    63 |               </div>
    64 |             );
    65 |           })}

В итоге получается что имена инпутов ("contacts." + key) имеют тип string, а тайпскрипт ожидает "contacts.github" | "contacts.vk" | "contacts.facebook" | "contacts.instagram" | ... 5 more.

Подскажите пожалуйста как пофиксить типизацию. Код при этом работает.
Полный код:

const ProfileDataForm: React.FC<PropsType> = ({
  profile,
  isOwner,
  jumpToNonEditMode,
}) => {
  const dispatch = useDispatch();

  const { register, handleSubmit } = useForm<ProfileType>({
    defaultValues: { ...profile },
  });

  const onSubmit: SubmitHandler<ProfileType> = async (data) => {
    await dispatch(updateOwnersProfile(data));
    jumpToNonEditMode();
  };

  return (
    <div className={s.descriptionBlock}>
      <div className={s.descriptionItem}>
        <ProfilePhotoData photos={profile.photos} isOwner={isOwner} />
      </div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className={s.descriptionItem}>
          <input {...register("fullName")} placeholder="Full name" />
        </div>
        <div className={s.descriptionItem}>
          <b>About me: </b>
          <input {...register("aboutMe")} placeholder="About me" />
        </div>
        <div className={s.descriptionItem}>
          <b>Looking for a job: </b>
          <input type="checkbox" {...register("lookingForAJob")} />
        </div>
        <div className={s.descriptionItem}>
          <b>My professional experience: </b>
          <input
            {...register("lookingForAJobDescription")}
            placeholder="My professional experience"
          />
        </div>
        <div className={s.descriptionItem}>
          <b>Contacts: </b>
          {Object.keys(profile.contacts).map((key) => {
            return (
              <div key={key} className={s.contact}>
                <b>{key} :</b>
                <input {...register("contacts." + key)} placeholder={key} />
              </div>
            );
          })}
        </div>
        <div className={s.descriptionItem}>
          <input type="submit" />
        </div>
      </form>
      <div className={s.descriptionItem}>
        <ProfileStatus isOwner={isOwner} />
      </div>
    </div>
  );
};

Answer 1

[WbICHA]

`contacts.${key as keyof typeof profile.contacts & string}`

Comments

[WbICHA]

typeof profile.contacts

Или заменить это на тип контактов, если есть соответствующий интерфейс.

[Павел Орловский]

WbICHA, `contacts.${key as keyof typeof profile.contacts & string}` сработало!!! Спасибо большое. Я только начал изучать тайпскрипт и не могу немного понять, эта запись означает что каждый ключ мапа мы воспринимаем как объединение литеральных типов интерфейса contacts, что-то типа "github" | "vk" | "facebook" | и т.д. только не пойму почему мы добавляем и строку & string подскажите пожалуйста если не затруднит.

[Павел Орловский]

WbICHA, пока писал вроде понял что contacts. - это string. Но как например "github" & string соотносится к "contacts.github" , что-то не понимаю.

[WbICHA]

fendrarog, кейоф возвращает не только строковые ключи, но и числовые и, главное, symbol'ы, а они в строку не превращаются.
Если есть числовые ключи, то используй: & (string | number).
Это нужно не всегда и не везде.

Впрочем, можно в конфиге прописать keyofStringsOnly: true и тогда все ключи буду только типа стринг, но он деприкейдет и, насколько помню, будет вскоре удалён. Или уже.

[Павел Орловский]

WbICHA, спасибо Вам большое за разъяснения =)