Typescript con react.

January 18, 2020 • ☕️ 3 minutos de lectura

TypeScript es como javascript, pero con superpoderes. Entre sus virtudes cabe destacar que nos ahorramos muchos test relacionados con el tipado y la validación de las props, además al indicar que tipo de dato recibimos los IDE como Visual Code Studio no ayudarán con el autocompletado.

Para empezar un proyecto con Create React App, usaremos el comando

npx create-react-app my-app --template typescript

Componentes Funcionales

Segun la documentación oficial de react la forma más simple de crear un componente es:

function Hola(props) {
  return <h1> Hola, {props.name} </h1>
}

Con la llegada de las arrow functions, evolucionó a:

const Hola = props => {
  return <h1>Hola, {props.name}</h1>
}

Combinando SFC con TypeScript

Empecemos a usar TypeScript, indicando el tipo de nuestras props.

function Hola({ name }: { name: string }) {
  return <div>Hola, {name}</div>
}

Otra forma de hacer lo mismo sería…

function Hola(props: { name: string }) {
  return <div>Hola, {props.name}</div>
}

Definir componentes

Si queremos aprovechar aun mejor typescript, podemos indicar el tipo de nuestros componentes.

Antes en React los componentes funcionales eran Componentes de función sin estado, esto significa que eran funciones puras. Con la introduccción de los hooks las funciones pueden acceder al estado y al ciclo de vida de React.

Ahora debemos escribir nuestros componentes como React.FC o React.FunctionComponent.

Es posible que veas en alguna documentación React.SFC, pero ha quedado obsoleto.

La interfaz de React.FC está definida en @types/react/index/d.ts:

import * as React from "react"
interface HolaProps {
  name: string
}
const Hola: React.FC<HolaProps> = props => {
  return <h1>Hola, {props.name}</h1>
}
export { Hola }

DefaultProps

Si desea establecer algunos valores predeterminados para las props.

Además también podemos indicar que una prop es opcional, usando ?.

import * as React from "react"
interface HolaProps {
  name?: string // Cambiamos de requerido a opcional.
}
const Hola: React.SFC<HolaProps> = props => {
  return <h1> Hola, {props.name} </h1>
}
Hola.defaultProps = {
  name: "Usuario invitado", // Este valor que tendrá si no se pasa ninguna prop.
}

Clases

export class App extends React.Component<any, any> {
  render() {
    return <div>{this.props.title}</div>
  }
}
export class App extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props)
    this.state = {
      data: [],
    }
  }
  render() {
    return <div>{this.props.title}</div>
  }
}
interface IProps {
  title: string
}
interface IState {
  data: []
}

Interfaces

En TypeScript, las interfaces cumplen la función de nombrar tipos de nuestras props y son una forma poderosa de definir contratos dentro de su código.

interface HolaProps {
  name: string
}

function Hola({ hola }: HolaProps) {
  return <div>{hola}</div>
}

Una buena práctica es no repetir código, por eso debido a que nuestros componentes, posiblemente compartan props y por tanto también interfaz, podemos separar esta en un fichero independiente.

Para ellos creamos un fichero, en nuestro caso usaremos Post.ts no hace falta usar la extensión .tsx ya que no usaremos react dentro de este archivo.

export interface IPost {
  id: number
  title: string
  content: string
  status: boolean
}

Luego poderemos llamarlas desde cualquier otro fichero usando

import { IPost } from "./Post"

Ayudas de nuestro IDE

Ayuda

Como podemos ver nuestro IDE nos ayudará a mejorar nuestro código. Nos indica que como no hemos indicano ningun tipo a nuestra prop title, este será tratado como any y nuestro IDE nos mostrará una linea roja.

En este caso sabemos que title es una string, lo correcto es indicarle el que es de tipo string.

Ayuda de  Visual Code Studio”

Autocompletado

Nuestro IDE nos ayudará ofreciendo los métodos, siempre que indiquemos de que tipo se trata, o si usamos any.

Ayuda autocompletado de métodos de  Visual Code Studio”

Conclusión

♥️TypeScript