Este curso está completamente escrito en JavaScript, pero también puedes usar TypeScript con React Three Fiber.

TypeScript es un superconjunto de JavaScript que añade tipos al lenguaje. Es una excelente manera de detectar errores temprano y de tener una mejor experiencia de desarrollo con autocompletado y documentación.

La elección de usar TypeScript o no depende de ti. Para ayudarte a decidir, aquí hay algunas preguntas que deberías considerar:

• El tipo de proyecto que estás construyendo: ¿Estás esbozando una experiencia 3D o construyendo con la intención de lanzarlo? ¿Es un proyecto pequeño o grande? ¿Está destinado a mantenerse por mucho tiempo?
• Tu equipo: ¿Estás trabajando solo o con otras personas? Al igual que los comentarios, los tipos son una excelente manera de hacer que tu código sea más comprensible para los demás.

No hay una respuesta correcta o incorrecta, depende de ti decidir qué es lo mejor para tu proyecto. Dado que la biblioteca está escrita en TypeScript, puedes beneficiarte de ella incluso si estás usando JavaScript.

Juntos veremos cómo convertir fácilmente nuestro proyecto inicial a TypeScript y cómo usarlo con React Three Fiber.

Pero esta lección no es un tutorial de TypeScript, si no tienes experiencia y quieres aprender más sobre ello, deberías empezar aquí.

Configuración

En la lección de configuración, creamos un nuevo proyecto desde cero usando Vite. Si estás comenzando un nuevo proyecto, puedes seguir los mismos pasos y elegir la variante de TypeScript para tu proyecto en lugar de la de JavaScript. (No olvides volver aquí después para descubrir cómo usarlo 🤭)

Veamos cómo convertir un proyecto existente a TypeScript en su lugar.

El proyecto inicial es el mismo que el resultado final de la lección de configuración, pero los pasos son los mismos para cualquier proyecto.

Instalar TypeScript

Primero, necesitamos instalar TypeScript en nuestro proyecto. Podemos hacerlo con el siguiente comando:

Copy
yarn add -D typescript

-D instalará TypeScript como una dependencia de desarrollo. (Ya que no es necesaria en la compilación final de producción)

TypeScript agrega un nuevo paso a nuestro proceso de construcción. Necesitamos compilar nuestros archivos TypeScript a JavaScript antes de ejecutar nuestro proyecto. Para hacerlo, necesitamos actualizar el script de construcción en nuestro package.json a lo siguiente:

Copy
"build": "tsc && vite build"

El comando tsc compilará nuestros archivos TypeScript a JavaScript y el comando vite build construirá nuestro proyecto como de costumbre.

La extensión de nuestros archivos pasará a ser .tsx en lugar de .jsx y .ts en lugar de .js. Aún en el archivo package.json, podemos ajustar el script lint para tenerlo en cuenta:

Copy
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

Configuración de TypeScript

Necesitamos crear un archivo tsconfig.json en la raíz de nuestro proyecto para configurar TypeScript:

Copy
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Modo Bundler */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Y un tsconfig.node.json:

Copy
{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Estas son las opciones predeterminadas para un proyecto React usando Vite. Puedes encontrar más información sobre ellas en la página de documentación de opciones del compilador.

Configuración de ESLint

Necesitamos actualizar nuestro archivo .eslintrc.cjs para tener en cuenta TypeScript:

Copy
module.exports = {
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:@typescript-eslint/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@react-three/recommended",
  ],
  parser: "@typescript-eslint/parser",
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react-refresh/only-export-components": "warn",
  },
};

Requiere dos nuevos paquetes:

Copy
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser