Tipagem Typescript

Front-end
#1

Olá, estou com uma dúvida de tipagem:

import Input from '../Components/Input'


const GetInputs = (type: string) =>
  ({
    input: <Input />
  }[type])

function Builder(type: string) {
  const Inputs = GetInputs(type)

  return <Inputs type={type} />
}

export default Builder

Eu tipei da seguinte forma, porém ele me dá erro no componente , JSX element type ‘Inputs’ does not have any construct or call signatures.

Alguém consegue me ajudar nisso?

#2

Precisei deixar o any aqui, pq ele não vai retornar um componente exatamente… tanto que o retorno pode ser undefined.

const getInputs = (type: string): JSX.Element | any => ({
    input: <Input/>
}[type])

Vc estava tentando chamar um objeto e colocar ele dentro de um componente <Inputs/>, mas isso não tem como funcionar, pq o retorno de getInputs é um objeto.

Tente dar um console.log(inputs), pra ver o tanto de coisa que retorna.

const BuilderComponent = ({type}: { type: string }) => {
    const inputs = getInputs(type);
    if (inputs) return {...inputs}

    return null
}

Esse return null, é pra caso o componente que vc esteja tentando chamar não exista e aí a aplicação não vai quebrar e nem mostrar algo que você não quer.

Exemplo de uso:

<BuilderComponent type={"input"}/>

{/*Como não existe o type button*/}
{/*O componente abaixo não vai retornar nada*/}
<BuilderComponent type={"button"}/>
1 curtida