En React con TypeScript podemos usar dos enfoques principales para crear componentes: componentes funcionales y de clase. Ambos enfoques permiten trabajar con accesorios y estados, pero utilizan paradigmas ligeramente diferentes. TypeScript mejora aún más la seguridad del desarrollo al proporcionar escritura estática, lo que nos permite definir con precisión la forma de los accesorios y el estado.

A continuación veremos ejemplos de diferentes componentes, utilizando interfaces para definir tipos, para garantizar la coherencia y legibilidad del código.

F-1. Componente funcional sin accesorios ni estado.

En este caso, un componente funcional simple que no utiliza ni accesorios ni estado se ve así:

import React from 'react';

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

Este componente solo muestra texto estático.

F-2. Componente funcional con accesorios.

Cuando queremos pasar datos a través de accesorios, usamos interfaces para definir la forma de esos datos:

import React from 'react';

interface IMyProps {
  name: string;
}

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

Aquí IMyProps contiene el nombre utilizado para mostrar el saludo personalizado.

F-3. Componente funcional con estado.

Cuando usamos el estado en componentes funcionales, usamos el gancho useState de React:

import React, { useState } from 'react';

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

  return (
    

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

Este componente utiliza el estado local para realizar un seguimiento de los contadores.

F-4. Un componente funcional con accesorios y estado.

Al combinar accesorios y estado, podemos tener componentes flexibles que reciben datos a través de accesorios y manipulan el 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 utiliza el recuento inicial como accesorio y el estado interno para el seguimiento dinámico del contador.

K-1. Componente de clase sin accesorios ni estado.

Un componente de clase sin accesorios ni estado en React se ve así:

import React from 'react';

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

Este es un componente de clase simple que muestra texto estático.

K-2. Componente de clase con accesorios.

Cuando un componente de clase recibe accesorios, los definimos usando la interfaz:

import React from 'react';

interface IMyProps {
  name: string;
}

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

Al igual que con el componente funcional, aquí utilizamos accesorios para mostrar datos personalizados.

K-3. Componente de clase con estado

Para componentes de clase con estado, definimos el estado dentro del constructor:

• Paréntesis vacíos en el constructor

Si no usa accesorios, simplemente puede dejar los paréntesis vacíos en el constructor:

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 explícitamente {} como tipo de accesorios

Si desea ser explícito acerca de los accesorios, puede especificar {} como 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
      
    );
  }
}

-> En ambos casos, TypeScript y React funcionarán correctamente. Si su componente no usa accesorios, simplemente puede usar paréntesis vacíos en el constructor, pero asegúrese de pasar {} en la superllamada para evitar errores de inicialización.

Este componente utiliza el estado para rastrear los cambios del contador.

K-4. Un componente de clase con accesorios y estado.

Para componentes de clase que usan tanto accesorios como estado, podemos combinar ambos conceptos:

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 recibe un contador inicial a través de accesorios y manipula aún más el estado internamente.

El uso de interfaces en TypeScript brinda una mejor escritura y una legibilidad del código más sencilla, especialmente cuando se trabaja con estructuras de datos más complejas. Con estos ejemplos básicos, tendrá una base para escribir componentes funcionales y de clase con React y TypeScript.