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

Question

[frogqwetr]

У меня есть селектор, - selectFieldActiveRoomMarker, в котором есть другой селектор, получающий активный маркер с типом RoomMarkerData, и в котором есть динамически передаваемый аргумент - название поля. Проблема заключается в том, что вызывая этот селектор в компоненте, используя useSelector хук и передавая название поля, я получаю тип не конкретного поля, а объединение всех полей объекта. Например, я хочу получить поле 'id', типом которого является number, и хочу увидеть в переменной 'field' тип равный 'number' | 'undefined', но по факту я получаю 'number' | 'string' | 'undefined'. (См. код в компоненте).

// Селекторы и типы

type RoomMarkerData = {
  id: number,
  title: string
}

type FieldsRoomMarkerData = keyof RoomMarkerData

selectFieldActiveRoomMarker = createSelector(
  [
    selectActiveRoomMarker,
    (state, field: FieldsRoomMarkerData) => field,
  ],
  (activeRoomMarker, field) => (
    activeRoomMarker && activeRoomMarker[field]),
)

// Получение поля в компоненте

const field = useAppSelector((state) => (
    selectFieldActiveRoomMarker(state, 'id')
  ))

Comments

[WbICHA]

Дженерики.

[frogqwetr]

WbICHA, это то понятно, но createSelector не принимает кастомные дженерики. (в чем я не совсем до конца уверен, поэтому и спрашиваю). Кастомный дженерик можно прокинуть, создав обертку над селектором, что не очень хочется делать.

[WbICHA]

frogqwetr, залей свой вариант на тсланг.

[frogqwetr]

Код с оберткой:https://codepen.io/kdastation/pen/vYjRzVb?editors=0010
Но как написать без нее - не знаю.

[WbICHA]

frogqwetr, залей на https://www.typescriptlang.org/play , мне тс настоящий нужен, а не тупо подсветка синтаксиса.

[frogqwetr]

WbICHA, сори, но я не совсем понял, как на этом сервисе добавить свои либы, чтобы бы более наглядно тебе показать. Поэтому я сделал эту штуку на codesandbox. Там я 'сымитировал' прилож, добавив все, что нужно, и расписав.
ссылка: https://codesandbox.io/s/distracted-sun-068od2?fi...

[WbICHA]

frogqwetr, ты понимаешь, что ты просишь поправить тебе типизацию в песочнице, где тайпскрипта, по сути, нет? Мне функционал ненужен, мне нужен валидный пример в тсланге.
Ты можешь вырезать из своего приложения только то, что необходимо, и запихнуть в нормальную песочницу?

[frogqwetr]

WbICHA, так в том то и дело, что без redux toolkit'a и его метода createSelector, тебе это песочница ничего не даст - пример не валидный будет.
Но я смог все-таки костылем подключить либу в tslang -
tslang example
Так подойдет?

[WbICHA]

frogqwetr, красивое решение там, к сожалению, не получится, но можно так, к примеру: https://www.typescriptlang.org/play?#code/JYWwDg9g...
Во всяком случае это наименее геморройный и универсальный вариант.

[frogqwetr]

WbICHA, как раз то, что нужно, спасибо. Если хочешь, можешь это не в комментарии кинуть, а в "ответ на вопрос", я помечу решением.

Answer 1

[WbICHA]

Может красивее и можно сделать, но в голову ничего не пришло. Разве что типы для крейтСелектора переписать, но это просто удачи.)
https://www.typescriptlang.org/play?#code/JYWwDg9g...
В любом случае, это, пожалуй, наименее геморройный и универсальный вариант.