Questo corso è interamente scritto in JavaScript, ma puoi anche usare TypeScript con React Three Fiber.

TypeScript è un superset di JavaScript che aggiunge i tipi al linguaggio. È un ottimo modo per rilevare gli errori in anticipo e per avere un'esperienza di sviluppo migliore con il completamento automatico e la documentazione.

La scelta di usare o meno TypeScript spetta a te. Per aiutarti a decidere, ecco alcune domande su cui dovresti riflettere:

• Il tipo di progetto che stai costruendo: stai progettando un'esperienza 3D o costruendo con l'intento di distribuirla? È un progetto piccolo o grande? È destinato a essere mantenuto a lungo?
• Il tuo team: stai lavorando da solo o con altre persone? Come i commenti, i tipi sono un ottimo modo per rendere il tuo codice più comprensibile per gli altri.

Non c'è una risposta giusta o sbagliata, sta a te decidere cosa è meglio per il tuo progetto. Poiché la libreria è scritta in TypeScript, puoi beneficiarne anche se stai usando JavaScript.

Insieme vedremo come convertire facilmente il nostro progetto iniziale in TypeScript e come usarlo con React Three Fiber.

Ma questa lezione non è un tutorial su TypeScript; se non hai esperienza e vuoi saperne di più, dovresti iniziare qui.

Installazione

Nella lezione sull'installazione, abbiamo creato un nuovo progetto da zero utilizzando Vite. Se stai iniziando un nuovo progetto, puoi seguire gli stessi passaggi e scegliere la variante TypeScript per il tuo progetto invece di quella JavaScript. (Non dimenticare di tornare qui dopo per scoprire come usarlo 🤭)

Vediamo come convertire un progetto esistente in TypeScript.

Il progetto iniziale è lo stesso del risultato finale della lezione di setup, ma i passaggi sono gli stessi per qualsiasi progetto.

Installa TypeScript

Prima di tutto, dobbiamo installare TypeScript nel nostro progetto. Possiamo farlo con il seguente comando:

Copy
yarn add -D typescript

-D installerà TypeScript come dipendenza di sviluppo. (Dato che non è necessario nella build di produzione finale)

TypeScript aggiunge un nuovo passaggio al nostro processo di build. Dobbiamo compilare i nostri file TypeScript in JavaScript prima di eseguire il nostro progetto. Per farlo, dobbiamo aggiornare lo script di build nel nostro package.json come segue:

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

Il comando tsc compilerà i nostri file TypeScript in JavaScript e il comando vite build costruirà il nostro progetto come di consueto.

L'estensione dei nostri file diventerà .tsx invece di .jsx e .ts invece di .js. Sempre nel file package.json, possiamo regolare lo script lint per tenere conto di ciò:

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

Configurazione di TypeScript

Dobbiamo creare un file tsconfig.json nella radice del nostro progetto per configurare TypeScript:

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

    /* Modalità 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 un tsconfig.node.json:

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

Queste sono le opzioni predefinite per un progetto React che utilizza Vite. Puoi trovare ulteriori informazioni su di esse nella pagina della documentazione delle opzioni del compilatore.

Configurazione ESLint

Dobbiamo aggiornare il nostro file .eslintrc.cjs per tenere conto di 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",
  },
};

Richiede due nuovi pacchetti:

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