React + Typescript

Cómo tipar las propiedades de React usando Typescript

Introducción

Un gran beneficio de pasar de JavaScript a TypeScript con React, es el de poder definir un contrato tipado de las propiedades que expone cada componente.

Esto lo cubría en cierta manera React con sus prop types pero ésta es una solución limitada que además añade peso extra a tu bundle.

Temario

1. Tipado básico de un componente

En este vídeo vamos a ver como usar TypeScript para definir tus propiedades.

Ver lección

2. Tipando funciones como propiedades de un componente

Pasar propiedades del tipo cadena de texto o un objeto está chupado con React, pero... ¿Y si queremos pasar una propiedad de tipo función? Esto es muy normal si por ejemplo queremos que un componente padre pueda capturar el evento onChange o el onClick de un componente hijo.

Ver lección

3. Propiedades opcionales de un componente

Otro tema interesante a tener en cuenta es que no siempre queremos informar todas las propiedades que pida un componente hijo, algunas pueden ser opcionales, y en otros podemos querer alimentar valores por defecto.

Vamos a ver como podemos tratar ésto con TypeScript.

Ver lección

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.