Как правильно типизировать аругменты?

Question

[kot98]

Описал тип переменной

type formDataType = {
  cardData: {
   number: string
   code: string
...
  }
  userData: {
    fullName: string
    login: string
...
}
  paymentData: {
    INN: string
    KPP: string
...
  }
 }

Объявил переменную:

const formData:  formDataType = reactive( {
  cardData: {
   number: '',
   code: '',
...
  },
  userData: {
    fullName: '',
    login: '',
...
},
  paymentData: {
    INN: '',
    KPP: '',
...
  },
 })

Затем нужна функция для обращения к "внутренним" значениям этого объекта (по типу formData.paymentData.KPP). Понимаю, что нужно передавать ключ внутри объекта formData и ключ внутри вложенного объекта. Но не могу правильно описать типы. Знаю, что если нужно обратиться к ключам paymentData, то можно было бы описать как (..., key: keyof typeof formData.paymentData) Но нужна функция для всех значений ключей.

const someFunc = (object: ???, key: ???) => {
  ...
}

Comments

[WbICHA]

И где нормальный пример того, как ты хочешь использовать данную функцию?

[Станислав Макаров]

Ну теоретически можно вот так:

type Key = (keyof typeof formData.cardData) | (keyof typeof formData.userData) | (keyof typeof formData.paymentData);

Но вообще это изврат какой-то. И да, непонятно зачем это всё.

[kot98]

Станислав Макаров,

const hideSymbol = (object: keyof typeof formData, key: keyof typeof object) => {
  formData[object][key] = formData[object][key].slice(0, -2)
}

почему в таком случае он выдает ошибку: TS7053: Element implicitly has an 'any' type because expression of type 'number | unique symbol | "toString" | "charAt" | ...

[Станислав Макаров]

@kot98
Вы же понимаете, что typeof object у вас это по сути string?

[WbICHA]

Станислав Макаров, ты как-то очень неоптимально написал, это можно было сделать куда как красивее.)

[Станислав Макаров]

WbICHA
Ну разве что вот так.. но это будет не особо понятнее автору вопроса)

type KeyOfEach<T> = T extends unknown ? keyof T : never
type Key = KeyOfEach<formDataType[keyof typeof formData]>

[WbICHA]

Станислав Макаров, это ещё хуже... Зачем вот эта конструкция?
T extends unknown ? keyof T : never

type KeyOfEach<T, U = T[keyof T]> = U extends U ? keyof U : never
type Key = KeyOfEach<typeof formData>

// или попроще
type KeyOfEach2<T> = {
    [Key in keyof T]: keyof T[Key]
}[keyof T]
type Key2 = KeyOfEach2<typeof formData>

[Станислав Макаров]

WbICHA

Зачем вот эта конструкция?
T extends unknown ? keyof T : never

... спрашиваете вы, а затем сами пишите точно такую же))

U extends U ? keyof U : never

Можно и в моём варианте написать T extends T, будет работать не хуже, т.к. от этой конструкции мне нужно только раскрытие union-типов. Однако extends unknown позволяет меньше думать, т.к. это всегда истина (любой тип является подтипом top-типа).
Вот что в вашем варианте действительно интереснее, так это пробег по полям T за счёт дефолтного значения U в дженерике, можно убрать эту операцию из второй строки, оставив typeof formData.

Впрочем, я все ещё не уверен что автору вопроса понятны хоть какие-то из этих вариантов.

[WbICHA]

Станислав Макаров,

... спрашиваете вы, а затем сами пишите точно такую же))

Позор мне!) Тут я знатно тупанул, да.)

Однако extends unknown позволяет меньше думать

А вот тут я поспорю. Раньше я сам думал использовать анноун, но, во всяком случае лично для меня, с подсветкой синтаксиса U extends U выделяется куда как лучше, чем T extends unknown. И по скольку почти всегда в таких случаях используются однобуквенные гженерики, то сравнить 2 буквы одного цвета проще, чем вглядываться что там написано (unknown | string | number или ещё что), поскольку ааноун точно такого же цвета, как и другие примитивы, как и спец слова самого тса.
Всё же два символа сравниваются почти мгновенно даже краем глаза, а вот слово ещё прочитать надо как не крути.

Answer 1

[Aetae]

const someFunc = <
  FK extends keyof FormDataType, 
  SK extends keyof FormDataType[FK]
>(
	firstKey: FK, 
	secondKey: SK
) => {
  ...
}