Как небольно избавится от as const для обхода ошибки 'type string is not assignable to type keyof' и '"center" | «right» | «left» | undefined'?

Question

[Антон Антон]

Продолжаю переводитьпроект на тайпскрипт, параллельно изучая этот самый тайпскрипт.
всё сделано на фреймворке quasar, там есть компонент QTable, который позволяет типизировать описание колонок, предотвращая ошибки в имени поля, примерно таким образом:

interface ProfileEntity {
  id: string,
  first_name: string,
  last_name: string
}
const columns: QTableColumn<ProfileEntity>[] = ([
{ name: 'id', label: 'id', field: 'id' as const },
{ name: 'first_name', label: 'Имя', field: 'first_name' as const, sortable: true },
{ name: 'last_name', label: 'Фамилия', field: 'last_name' as const, sortable: true, align: 'right' as const }
]).map(c => ({align: 'left', ...c}))

Этот map нужен из-за странного решения разработчиков quasar, когда по дефолту выравнивание всех колонок идет по правому краю.

Так вот, приходится ко всем полям field (имеет тип keyof ProfileEntity) и align (имеет тип "center" | "right" | "left" | undefined) везде проставлять as const чтобы он не выдавал ошибку на случай, если я когда-то потом захочу поменять значение на несовместимое.

Есть ли какая-то настройка чтобы это поведение сделать более удобным?

Если сделать так:

const columns: QTableColumn<ProfileEntity>[] = [
{ name: 'id', label: 'id', field: 'id' }  as QTableColumn<ProfileEntity>,
{ name: 'first_name', label: 'Имя', field: 'first_name', sortable: true }  as QTableColumn<ProfileEntity>,
{ name: 'last_name', label: 'Фамилия', field: 'last_name', sortable: true, align: 'right' }  as QTableColumn<ProfileEntity>,
].map(c => ({align: 'left', ...c}))

то все работает включая проверку правильности значений field и align, но приходится для каждого элемента прописывать тип, что сильно замусоривает код. Если же сделать

const columns: QTableColumn<ProfileEntity>[] = ([
{ name: 'id', label: 'id', field: 'id' },
{ name: 'first_name', label: 'Имя', field: 'first_name', sortable: true },
{ name: 'last_name', label: 'Фамилия', field: 'last_name', sortable: true, align: 'right' },
] as QTableColumn<ProfileEntity>[]).map(c => ({align: 'left', ...c}))

то проверка свойств почему-то перестает работать. Есть ли способ, чтобы и проверка работала и кучу as type не надо было проставлять?

Comments

[Alexandroppolus]

не совсем понял, какая проблема возникнет, если в самом первом варианте везде убрать "as const"

[Антон Антон]

Alexandroppolus,
как только обмазаться as const во всех field и align - ошибка пропадает

[Alexandroppolus]

Антон Антон, вот здесь все норм

набросай пример с ошибкой, запости ссылку на Payground

[Антон Антон]

Alexandroppolus, да, вижу отличие. у меня там еще .map применяется, чтобы проставить дефолтное значение выравнивания (в квазаре зачем-то сделано странно): вот ссылка

с этим можно что-нибудь сделать?

[Антон Антон]

Alexandroppolus, вот тут все варианты

[Антон Антон]

Alexandroppolus, подставил страшный костыль в виде IIFE, есть ли способ правильнее и красивее?

[Alexandroppolus]

Антон Антон, ответил в ответ

[WbICHA]

Антон Антон, не используй мап, он тебе ненужен здесь. Используй дефолтные пропы:

const defaultColumnParams: Partial<QTableColumn<ProfileEntity>> = {
  align: 'left'
}

const columns: QTableColumn<ProfileEntity>[] = [
  { ...defaultColumnParams, name: 'id', label: 'id', field: 'id' },
  { ...defaultColumnParams, name: 'first_name', label: 'Имя', field: 'first_name', sortable: true },
  { ...defaultColumnParams, name: 'last_name', label: 'Фамилия', field: 'last_name', sortable: true, align: 'right' },
]

Но если всё же сильно хочется, то типизируй иначе:

const columns = ([
{ name: 'id', label: 'id', field: 'id'},
{ name: 'first_name', label: 'Имя', field: 'first_name', sortable: true },
{ name: 'last_name', label: 'Фамилия', field: 'last_name', sortable: true, align: 'right' }
] satisfies QTableColumn<ProfileEntity>[]).map((c): QTableColumn<ProfileEntity> => ({align: 'left', ...c}))

[WbICHA]

Антон Антон, для справки, дефолтные парамсы лучше не столько из-за типизации, сколько из-за возможности перезаписать их при необходимости у конкретной колонки.
Забей, я не обратил внимание, что ты деструктуризируешь после.

[Антон Антон]

WbICHA,

Но если всё же сильно хочется, то типизируй иначе:

satisfies, к сожалению, не типизирует содержимое, и, например, не работает типизация параметра format и field, когда она функция

Используй дефолтные пропы

интересно, но всё равно в каждую строку надо дописывать "мусор"

[WbICHA]

Антон Антон,

интересно, но всё равно в каждую строку надо дописывать "мусор"

Это бросается в глаза только когда мало параметров прописываешь, а так одним больше, одним меньше, зато больше контроля.

satisfies, к сожалению, не типизирует содержимое, и, например, не работает типизация параметра format и field, когда она функция

Ну, да, добавь тогда `as const` перед `satisfies`.)

А вообще в идеале отдельную функцию под это дело написать надо, типа такой (это для mantine):

export const createTableColumnsBase = <GData>() => {
  const columns: Record<string, Column<GData, unknown>> = {}

  const getActions = <GColumns>() => ({
    add: <K extends string, V>(id: K, column: Column<GData, V>) => {
      columns[id] = column as Column<GData, unknown>

      return getActions<GColumns & Record<K, Column<GData, V>>>()
    },
    done: () => columns,
    doneTyped: () => columns as GColumns
  })

  return getActions<unknown>()
}

Зачем? Так ты за счёт поле филд (или селектор) типизируешь все передаваемые калбеки и компоненты. С массивом это не сделать. Вернее можно, в целом, но костыльно и сам тс не переварит тапл длинною больше 3.

Answer 1

[Alexandroppolus]

Как вариант:
ссылка

ProfileEntity теперь type, не interface

Comments

[Антон Антон]

Кажется, это единственный рабочий способ. Ну и к тому же, можно вообще упростить, убрав нафиг второй аргумент и оставив map в цепочке вызовов, ссылка

[Alexandroppolus]

Антон Антон, я думал про этот вариант, но здесь нет проверки внутри функции, т.е. ты можешь написать что-то вроде .map((c) => ({align: 'preved', ...c}) и TS не покажет ошибку

[Антон Антон]

Alexandroppolus, поскольку я всегда прибиваю влево, то, может быть так?

export function makeColumns<T extends Record<string, unknown>> (
  arr: QTableColumn<T>[],
  mapFunc?: (item: QTableColumn<T>) => QTableColumn<T>
): QTableColumn<T>[] {
  return arr.map(c => {
    if (mapFunc) { c = mapFunc(c) }
    if (c.align === undefined) { c.align = 'left' }
    return c
  })
};

[Alexandroppolus]

Антон Антон, да, так лучше