Тип реквизита компонента React & Typescript для `Component`

У меня есть следующий HOC в React:

`restricted` prop
    const ConditionalSwitch = ({component: Component, showIfTrue, ...rest}) => (

    showIfTrue
        ? <Component {...rest}/>
        : null
);

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

{component: Component, showIfTrue, ...rest}

Я старался

export interface CSProps {
    component: any,
    showIfTrue: boolean
}

Как мне справиться с ...rest здесь?

Я не уверен, что следую в машинописном тексте, если вы хотите обозначить, что ваш компонент не должен иметь все свойства, которые вы можете использовать Partials

— 05.03.2019 15:21

reactjs typescript

05.03.2019 15:10

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

417

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуй это:

export interface CSProps {
    component: any;
    showIfTrue: boolean;
    [key: string]: any;
}

05.03.2019 15:24

Ответ принят как подходящий

Если вы хотите сохранить безопасность типов, вам нужно сделать ConditionalSwitch универсальным и сделать так, чтобы он выводил полные реквизиты, передаваемые компоненту, на основе фактического значения Component. Это гарантирует, что клиент ConditionalSwitch передаст все необходимые свойства используемого компонента. Для этого используем подход, описанный здесь:

const ConditionalSwitch = <C extends React.ComponentType<any>>({ Component,  showIfTrue, ...rest}: { Component: C, showIfTrue: boolean} & React.ComponentProps<C> ) => (
    showIfTrue
        ? <Component {...(rest as any) }/>
        : null
);

function TestComp({ title, text}: {title: string, text: string}) {
    return null!;
}

let e = <ConditionalSwitch Component = {TestComp} showIfTrue = {true} title = "aa" text = "aa" />  // title and text are checked

При передаче rest компоненту нам нужно использовать утверждение типа, потому что typescript не может понять, что { Component: C, showIfTrue: boolean} & React.ComponentProps<C> минус Component и showIfTrue просто React.ComponentProps<C>, но вы не можете иметь все это :)

Я получаю the left hand side of an arithmetic operation must be... в строке ? <Component {...(rest as any)}

— 05.03.2019 17:29

@mikeb работает на меня. Какую версию ТС вы используете?

— 05.03.2019 17:34

Машинопись 3.3.3333

— 05.03.2019 17:35

@mikeb github.com/dragomirtitian/so-answers/tree/so-55004765 Я пробовал 3.3.1 и 3.4 (сейчас у меня нет 3.3.3333)

— 05.03.2019 17:38

Я перезапустил Intellij и теперь получаю Cannot find name Component сразу после ? — он как будто не видит, что это аргумент.

— 05.03.2019 18:09

05.03.2019 16:58