Как использовать один компонент с разными типами данных?

Question

[reivunxx]

Предположим у меня есть форма с несколькими полями, вынесенная в отдельный компонент.
Я хочу добавить в этот компонент возможность использовать его для изменения существующей записи.
То есть, если входящих пропсов с данными нет, то использовать логику создания
Если есть данные, то заполнить поля, и вместо API создания использовать API изменения
в обычном JS я бы использовать if(data) в useEffect
И использованием TS возник вопрос как правильно прокинуть типы, и как ими пользоваться внутри

type Props = ITemplate | {}
const CreateTemplateForm: FC<{ data: Props }> = ({data}) => {}

Я написал что-то подобное, но TS перестал видеть типы данных внутри data.
Хотелось бы разобраться как решать подобные задачи правильно.

Если будут комментарии насчет того, что есть решения структурно более удачные, то тоже буду рад

Comments

[WbICHA]

Удобнее всего добавить каждому варианту пропсов поле type (или любое другое) и дать каждому уникальное значение.

type Props = { type: 'create', a: number } | { type: 'edit' }

И потом уже в том же эффекте проверять тип и всё.
Ну либо писать функцию тайп гуарда, чтобы проверить какие данные пришли.

Answer 1

[Aetae]

Наверное ты хочешь этого:

type Props = { data?: ITemplate } | {}
const CreateTemplateForm: FC<Props> = (props) => {
  if ('data' in props && props.data) {
    
    return ...;
  }

  return ...;
}

Comments

[reivunxx]

Очень на то похоже. А как сам прием называется? Я имею в виду "key?:"

[Aetae]

reivunxx, ну наверное optional :) Это базовый ts: key?: string то же самое что key: string | undefined. *

* В современной версии ts можно параметром компилятора включить чтоб было не тоже самое, а конкретно указание на возможность отсутствия ключа, но сам не пробовал - слишком много кода по классике написано.:)

[WbICHA]

Aetae, по моему, это по умолчанию. Во всяком случае я только сейчас узнал, что это можно отключить. :D
Но в любом случае отключать не стоит, поскольку это дарует возможность указать, что ключ быть обязан, пусть он и будет андефайнд. В некоторых случаях бывает полезно для читабельности.

[Aetae]

WbICHA, в аргументах функции - по умолчанию, а в полях объекта наоборот.:)

[WbICHA]

Aetae, не совсем.) Это не работает только если передаёшь объект как аргумент, тогда да, идёт нестрогое сравнение объектов (забыл как это правильно называется), но если ты вручную свойства прописываешь (в пропсах компонента, к примеру, или объект по интерфейсу создаёшь), то прописывать надо все свойства, если они не опшинал.