No React with TypeScript podemos usar duas abordagens principais para criar componentes: componentes funcionais e de classe. Ambas as abordagens permitem trabalhar com adereços e estados, mas usam paradigmas ligeiramente diferentes. O TypeScript aumenta ainda mais a segurança do desenvolvimento, fornecendo digitação estática, o que nos permite definir com precisão a forma dos adereços e do estado.

A seguir veremos exemplos de diferentes componentes, usando interfaces para definir tipos, para garantir consistência e legibilidade do código.

F-1. Componente funcional sem adereços e estado

Neste caso, um componente funcional simples que não usa adereços nem estado se parece com isto:

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return 
Hello, DEV.to!
;
};

Este componente exibe apenas texto estático.

F-2. Componente funcional com adereços

Quando queremos passar dados através de props, usamos interfaces para definir a forma desses dados:

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC = ({ name }) => {
  return 
Hello, {name}!
;
};

Aqui IMyProps contém o nome usado para exibir a saudação personalizada.

F-3. Componente funcional com estado

Ao usar estado em componentes funcionais, usamos o gancho useState do React:

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

Este componente usa o estado local para rastrear contadores.

F-4. Um componente funcional com adereços e estado

Ao combinar props e state podemos ter componentes flexíveis que recebem dados através de props e manipulam o estado internamente:

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

Este componente usa inicialCount como suporte e estado interno para rastreamento de contador dinâmico.

K-1. Componente de classe sem adereços e estado

Um componente de classe sem adereços e estado no React se parece com isto:

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return 
Hello, DEV.to!
;
  }
}

Este é um componente de classe simples que exibe texto estático.

K-2. Componente de classe com adereços

Quando um componente de classe recebe props, nós os definimos usando a interface:

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

Assim como acontece com o componente funcional, aqui usamos adereços para exibir dados personalizados.

K-3. Componente de classe com estado

Para componentes de classe com estado, definimos o estado dentro do construtor:

• Parênteses vazios no construtor

Se você não usa props, você pode simplesmente deixar os parênteses vazios no construtor:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

• Especifique explicitamente {} como tipo para adereços

Se quiser ser explícito sobre adereços, você pode especificar {} como o tipo:

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

-> Em ambos os casos, TypeScript e React funcionarão corretamente. Se o seu componente não usa adereços, você pode simplesmente usar parênteses vazios no construtor, mas certifique-se de passar {} na superchamada para evitar erros de inicialização.

Este componente usa o estado para rastrear alterações do contador.

K-4. Um componente de classe com adereços e estado

Para componentes de classe que usam adereços e estado, podemos combinar os dois conceitos:

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

Este componente recebe um contador inicial por meio de adereços e manipula ainda mais o estado internamente.

O uso de interfaces em TypeScript traz melhor digitação e facilita a leitura do código, especialmente ao trabalhar com estruturas de dados mais complexas. Com esses exemplos básicos, você tem uma base para escrever componentes funcionais e de classe com React e TypeScript.