Curso de React
Typescript en React

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.

/src/vite-env.d.ts

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o 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.

Funciones

while(premium == false) verCodigo = false;

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

Trabajo con indefinidos

while(premium == false) verCodigo = false;

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

Funciones que pueden recibir indefinidos:

while(premium == false) verCodigo = false;

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

o

const hacerCosas = (libro?: Libro) => 

Evitar nulos

Si ponemos una admiración delante de la propiedad de un objeto estamos indicando que en ningún caso esa propiedad será indefinida.

hacerCosas(user!.id);

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.

Typscript en React:

Tipado de estados:

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

Tipado de props en un componente que tiene children:

import {
  FC,
  PropsWithChildren,
} from "react";

...

type Props = {
  num?: number;
  book: Book,
  renderBooks: () => void
};

const BookC:: FC<PropsWithChildren<Props>> = ({ num, book, children, renderBooks }) => {

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.

Trabajando con Firebase

while(premium == false) verCodigo = false;

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