Телеграмм чат группы frontendua страница 1909

parrot.ru

Рейтинг популярных групп и каналов

В рейтинге участвует:

групп:

каналов:

Виртуальный сервер на SSD - недорого!

Аренда выделенных и виртуальных серверов (VDS/VPS), хостинг, аренда IP-адресов, администрирование, круглосуточная поддержка

qwarta.ru подробнее

Резервное копирование с проверкой на вирусы!!!

Удобный сервис создания резервных копий на любой сервер сети интернет. Отслеживайте изменения, проверяйте на вирусы. Надежно защитите свой бизнес!

go.backupland.com

Выбираете сервер? Любая конфигурация на заказ!

Аренда физических серверов любых конфигураций под любые запросы - 1С бухгалтерия, игровые сервера, нагруженные проекты, интернет-магазины!

qwarta.ru подробнее

Size: a a a

Frontend UA

669 membersпожаловаться на группу

2021 February 15

IL

Ihor Levchenko in Frontend UA

Ничего, с последними апдейтами сторибука, сильно больше времни уходило на его поддержку в актуальном состоянии, чем он нам экономил времени

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

а потом уже они в боевой проект добавляются

источник

14:31пожаловаться #1

OA

Oleh Aloshkin in Frontend UA

Условно у меня есть два типа:

export interface A {
  component: 'div'
  a: string
}

export interface B {
  component: 'span'
  b: string
}

И вот они юзаются в зависимости от ситуации какой компонент я рендерю

export type GenericProps = A | B

export const GenericField: React.FC<GenericFieldProps> = props => {
  if (component === 'div') {
    return <component>{props.a}</component>
  }

  return (...)
}

И вот когда я запрашиваю

{props.a}

оно ругается мол что может быть не найдено a, потому что оно не существует для интерфейса B, хотя я беру его внутри if

Решаю я это так:

export const GenericField: React.FC<GenericFieldProps> = props => {
  if (component === 'div') {
    const a = 'a' in props ? a : undefined
    return <component>{props.a}</component>
  }

  return (...)
}

Можно ли как-то по другому, что бы не писать такое полотнище?

источник

15:44пожаловаться #2

OA

Oleh Aloshkin in Frontend UA

источник

15:45пожаловаться #3

DB

Dima Bildin in Frontend UA

Условно у меня есть два типа:

export interface A {
  component: 'div'
  a: string
}

export interface B {
  component: 'span'
  b: string
}

И вот они юзаются в зависимости от ситуации какой компонент я рендерю

export type GenericProps = A | B

export const GenericField: React.FC<GenericFieldProps> = props => {
  if (component === 'div') {
    return <component>{props.a}</component>
  }

  return (...)
}

И вот когда я запрашиваю

{props.a}

оно ругается мол что может быть не найдено a, потому что оно не существует для интерфейса B, хотя я беру его внутри if

Решаю я это так:

export const GenericField: React.FC<GenericFieldProps> = props => {
  if (component === 'div') {
    const a = 'a' in props ? a : undefined
    return <component>{props.a}</component>
  }

  return (...)
}

Можно ли как-то по другому, что бы не писать такое полотнище?

А если проверять props.component? Должно работать

источник

15:47пожаловаться #4

OA

Oleh Aloshkin in Frontend UA

Я опечатался, да. Там скорее будет еще что-то типо const { component } = props в начале

источник

15:48пожаловаться #5

OA

Oleh Aloshkin in Frontend UA

Потому что component существует всегда

источник

15:49пожаловаться #6

DB

Dima Bildin in Frontend UA

Ну вот если не делать destructure

источник

15:51пожаловаться #7

OA

Oleh Aloshkin in Frontend UA

Хм, хорошо. Typescript такого не понимает с destructure?

источник

15:51пожаловаться #8

DB

Dima Bildin in Frontend UA

По-видимому

источник

15:52пожаловаться #9

OA

Oleh Aloshkin in Frontend UA

Да, спасибо работает

источник

15:58пожаловаться #10

EO

Eugene Obrezkov in Frontend UA

Условно у меня есть два типа:

export interface A {
  component: 'div'
  a: string
}

export interface B {
  component: 'span'
  b: string
}

И вот они юзаются в зависимости от ситуации какой компонент я рендерю

export type GenericProps = A | B

export const GenericField: React.FC<GenericFieldProps> = props => {
  if (component === 'div') {
    return <component>{props.a}</component>
  }

  return (...)
}

И вот когда я запрашиваю

{props.a}

оно ругается мол что может быть не найдено a, потому что оно не существует для интерфейса B, хотя я беру его внутри if

Решаю я это так:

export const GenericField: React.FC<GenericFieldProps> = props => {
  if (component === 'div') {
    const a = 'a' in props ? a : undefined
    return <component>{props.a}</component>
  }

  return (...)
}

Можно ли как-то по другому, что бы не писать такое полотнище?

Там вроде надо ещё один тип делать, не помню

источник

15:58пожаловаться #11

OA

Oleh Aloshkin in Frontend UA

Я не знал про это

источник

15:58пожаловаться #12

OA

Oleh Aloshkin in Frontend UA

источник

15:59пожаловаться #13

EO

Eugene Obrezkov in Frontend UA

Eugene Obrezkov

Там вроде надо ещё один тип делать, не помню

Выносить общее в отдельный интерфейс, а от него уже наследовать частные случаи

источник

15:59пожаловаться #14

OA

Oleh Aloshkin in Frontend UA

Eugene Obrezkov

Там вроде надо ещё один тип делать, не помню

Да меня вроде так тоже устроит

источник

15:59пожаловаться #15

OA

Oleh Aloshkin in Frontend UA

Eugene Obrezkov

Выносить общее в отдельный интерфейс, а от него уже наследовать частные случаи

Я так и сделал вроде бы

источник

15:59пожаловаться #16

EO

Eugene Obrezkov in Frontend UA

Где-то в закромах документации тайпскрипта видел как по хорошему tagged unions делать

источник

15:59пожаловаться #17

EO

Eugene Obrezkov in Frontend UA

И там так советовали

источник

15:59пожаловаться #18

OA

Oleh Aloshkin in Frontend UA

Я могу показать реальный код

источник

16:00пожаловаться #19

OA

Oleh Aloshkin in Frontend UA

Вот общий тип

https://github.com/ubergrape/grape-ds/blob/bug/fix-text-area/GRAPE-19397/web/src/components/text-input/generic.tsx#L25

я его расширяю вот тут https://github.com/ubergrape/grape-ds/blob/bug/fix-text-area/GRAPE-19397/web/src/components/text-input/text-area.tsx#L5

И потом обратно и уже использую https://github.com/ubergrape/grape-ds/blob/bug/fix-text-area/GRAPE-19397/web/src/components/text-input/generic.tsx#L69

ubergrape/grape-ds

Aurora - Grape Design System. Contribute to ubergrape/grape-ds development by creating an account on GitHub.

источник

16:02пожаловаться #20