Este curso é inteiramente escrito em JavaScript, mas você também pode usar TypeScript com React Three Fiber.

TypeScript é um superconjunto de JavaScript que adiciona tipos à linguagem. É uma ótima maneira de capturar erros cedo e ter uma experiência de desenvolvedor melhor com auto-completação e documentação.

A escolha de usar TypeScript ou não é sua. Para ajudar a decidir, aqui estão algumas perguntas que você deve pensar:

• O tipo de projeto que você está construindo: Você está esboçando uma experiência 3D ou construindo com a intenção de lançá-la? É um pequeno projeto ou um grande? Destina-se a ser mantido por muito tempo?
• Sua equipe: Você está trabalhando sozinho ou com outras pessoas? Assim como comentários, tipos são uma ótima maneira de tornar seu código mais compreensível para os outros.

Não há resposta certa ou errada, cabe a você decidir o que é melhor para o seu projeto. Como a biblioteca é escrita em TypeScript, você pode se beneficiar dela mesmo se estiver usando JavaScript.

Juntos veremos como converter facilmente nosso projeto inicial para TypeScript e como usá-lo com React Three Fiber.

Mas esta lição não é um tutorial de TypeScript, se você não tem experiência e quer aprender mais sobre isso, você deve começar aqui.

Configuração

Na lição de configuração, criamos um novo projeto do zero usando Vite. Se você está começando um novo projeto, pode seguir os mesmos passos e escolher a variante TypeScript para o seu projeto em vez da de JavaScript. (Não se esqueça de voltar aqui depois para descobrir como usá-lo 🤭)

Vamos ver como converter um projeto existente para TypeScript.

O projeto inicial é o mesmo do resultado final da lição de configuração, mas os passos são os mesmos para qualquer projeto.

Instalar TypeScript

Primeiro, precisamos instalar TypeScript em nosso projeto. Podemos fazer isso com o seguinte comando:

Copy
yarn add -D typescript

-D irá instalar TypeScript como uma dependência de desenvolvimento. (Pois não é necessário na construção final de produção)

TypeScript adiciona um novo passo ao nosso processo de build. Precisamos compilar nossos arquivos TypeScript para JavaScript antes de rodar nosso projeto. Para fazer isso, precisamos atualizar nosso script de build no package.json para o seguinte:

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

O comando tsc irá compilar nossos arquivos TypeScript para JavaScript e o comando vite build irá construir nosso projeto como de costume.

A extensão dos nossos arquivos se tornará .tsx em vez de .jsx e .ts em vez de .js. Ainda no arquivo package.json, podemos ajustar o script lint para levar isso em consideração:

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

Configuração do TypeScript

Precisamos criar um arquivo tsconfig.json na raiz do nosso projeto para configurar o 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" }]
}

E um tsconfig.node.json:

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

Essas são as opções padrão para um projeto React usando Vite. Você pode encontrar mais informações sobre elas na página da documentação das opções do compilador.

Configuração do ESLint

Precisamos atualizar nosso arquivo .eslintrc.cjs para levar em consideração o 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",
  },
};

São necessários dois novos pacotes:

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