Как сделать, чтобы Typescript подсказывал корректный тип в данном случае?

Question

[Евдоким]

Допустим, есть некий React-компонент вида:

type Item = {
    title: string;
    name: string;
    isEmpty?: boolean;
}

interface ComponentProps {
    items: Item[]
}

function Component(props: ComponentProps) {}

В массиве items элемент item может быть или только с полями title и name, либо только isEmpty, но не одновременно все три поля.

Как сделать, чтобы Typescript подсказывал типы следующим образом:
1. Если я передаю в items это:

<Component items={[
    {
        title: "some title",
        name: "some name"
    }
]} />

чтобы Typescript не разрешал заполнять поле isEmpty.

2. А если я передаю в items это:

<Component items={[
    {
        isEmpty: true
    }
]} />

то Typescript чтобы не разрешал заполнять title и name.

А если я попытаюсь эти поля указать все вместе, чтобы Typescript выдавал ошибку, что неверный тип.

Догадываюсь, что это можно сделать с помощью маппинга и infer вроде бы. Но как это делается? Подскажите, пожалуйста, как такое достигается.

Comments

[WbICHA]

type Item = {
    title: string;
    name: string;
    isEmpty?: never;
} | {
    isEmpty: boolean;
    title?: never;
    name?: never;
}

[Евдоким]

WbICHA, не работает. Можно указать так и не будет ругаться:

[WbICHA]

Евдоким, да ну? https://www.typescriptlang.org/play?#code/JYWwDg9g...

[Евдоким]

WbICHA, поменял на undefined и перестало работать:
https://www.typescriptlang.org/play?#code/JYWwDg9g...

[Александр]

Евдоким,

type Item = {
	title: string;
	name: string;
	isEmpty?: false;
} | { isEmpty: true };

[WbICHA]

Евдоким, так работает тс, в чём проблема? Вручную андефайнд ты всё равно прописывать не будешь.

[Евдоким]

WbICHA, это же дырявый способ. Если я не буду, то другой может всё что угодно написать.
Нужен именно маппинг

[WbICHA]

Евдоким, зачем ты создаёшь проблемы на ровном месте? Такой вариант проходит ТОЛЬКО если вручную прописать андефайнд (либо передать переменную, которая может быть только андефайнд, что вообще нереальная ситуация). В данном примере даже защита через невер излишня, потому что ты всё равно не будешь всё это вручную, ещё и в компоненте, прописывать. Это данные, которые ты либо откуда-то получаешь и тогда ты там в принципе ничего прописывать не будешь, либо это данные, которые ты же сам и создашь где-то в виде константы.
В общем, я всё сказал. Не устраивает? Меняй язык.

[Евдоким]

WbICHA, просто я к тому, что так никто не делает, а делается через маппинг типов. Я пока так не умею, потому задал вопрос в Тостере

[WbICHA]

Евдоким,

делается через маппинг типов.

Интересно, а что именно ты под этим подразумеваешь?

[Игорь]

Вам WbICHA правильно говорит. Любое свойство объекта изначально undefined, в том числе и которое вы ни разу нигде не упомили. Это не вопрос TS, JS так работает.

Answer 1

[Юрий Пузыня]

import React from 'react';


interface Item {
    title: string;
    name: string;
}

interface EmptyItem {
    isEmpty: boolean;
}

interface ComponentProps {
    items: Item[] | EmptyItem[]
}

function Component(props: ComponentProps) {return null}

const comp = <Component items={[
    { title: 'undefined', name: '1', isEmpty: true }
]} />

Тут ключевая проверка
items: Item[] | EmptyItem[]