Curso de React | Typescript en React

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Documentación oficial

Permite añadir tipos de datos a nuestras variables y constantes.

Un fichero que use typescript debe tener extensión ts. Si es un componente, debe tener extensión tsx.

Añadir Typescript a un proyecto de Vite existente

npm i typescript @types/react @types/react-dom @types/node

/tsconfig.json

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

/src/vite-env.d.ts

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

Declaración de tipos

Tipado básico

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

Funciones

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

Trabajo con indefinidos

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

Funciones que pueden recibir indefinidos:

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

o

const hacerCosas = (libro?: Libro) => 

Tipos

Aunque podemos declararlos en el propio fichero donde los usemos, es recomendable declararlos en módulo dedicado a la descripción del dominio (en nuestro caso common/types/Classroom.ts ).

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

A parte de Vanilla.js

A tener en cuenta en React:

Tipado de estados:

const [userId, setUserId] = useState<string>(null);

Tipado de props en un componente:

const BookC = ({ num, book, children, renderBooks }: { num: number, book: Book, children: React.ReactNode, renderBooks: () => void}) => {

Los ficheros ts tendrán código typescript, mientras que los ficheros tsx tendrán código typescript y jsx.

Context API:

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

Trabajando con Firebase

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

Validando los datos que llegan de una API

Para esto podemos usar Zod. Tienes la documentación en este enlace.

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.