Kursus ini sepenuhnya ditulis dalam JavaScript tetapi Anda juga dapat menggunakan TypeScript dengan React Three Fiber.

TypeScript adalah superset dari JavaScript yang menambahkan tipe ke dalam bahasa tersebut. Ini adalah cara yang bagus untuk menangkap kesalahan lebih awal dan untuk mendapatkan pengalaman pengembangan yang lebih baik dengan fitur auto completion dan dokumentasi.

Pilihan untuk menggunakan TypeScript atau tidak sepenuhnya ada di tangan Anda. Untuk membantu Anda memutuskan, berikut beberapa pertanyaan yang sebaiknya Anda pikirkan:

• Jenis proyek yang Anda bangun: Apakah Anda sedang membuat rancangan pengalaman 3D atau membangunnya dengan niat untuk menjalankannya? Apakah itu proyek kecil atau besar? Apakah proyek tersebut dimaksudkan untuk dipelihara dalam jangka waktu lama?
• Tim Anda: Apakah Anda bekerja sendirian atau dengan orang lain? Seperti komentar, tipe adalah cara yang bagus untuk membuat kode Anda lebih mudah dipahami oleh orang lain.

Tidak ada jawaban yang benar atau salah, ini terserah Anda untuk memutuskan apa yang terbaik untuk proyek Anda. Karena library ditulis dalam TypeScript, Anda dapat memanfaatkannya bahkan jika Anda menggunakan JavaScript.

Bersama-sama kita akan melihat bagaimana cara mudah mengonversi proyek awal kita ke TypeScript dan bagaimana menggunakannya dengan React Three Fiber.

Namun, pelajaran ini bukan tutorial TypeScript, jika Anda tidak memiliki pengalaman dan ingin mempelajari lebih lanjut, Anda sebaiknya mulai di sini.

Persiapan

Dalam pelajaran persiapan, kami membuat proyek baru dari awal menggunakan Vite. Jika Anda memulai proyek baru, Anda dapat mengikuti langkah yang sama dan memilih varian TypeScript untuk proyek Anda alih-alih yang JavaScript. (Jangan lupa untuk kembali ke sini setelahnya untuk menemukan cara menggunakannya 🤭)

Mari kita lihat bagaimana cara mengonversi proyek yang ada ke TypeScript sebagai gantinya.

Proyek awalnya sama dengan hasil akhir dari pelajaran persiapan, tetapi langkah-langkahnya sama untuk setiap proyek.

Instal TypeScript

Pertama, kita perlu menginstal TypeScript di proyek kita. Kita bisa melakukannya dengan perintah berikut:

Copy
yarn add -D typescript

-D akan menginstal TypeScript sebagai dev dependency. (Karena tidak diperlukan dalam build produksi akhir)

TypeScript menambahkan langkah baru pada proses build kita. Kita perlu mengompilasi file TypeScript kita menjadi JavaScript sebelum menjalankan proyek kita. Untuk melakukannya, kita perlu memperbarui script build package.json kita menjadi:

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

Perintah tsc akan mengompilasi file TypeScript kita menjadi JavaScript dan perintah vite build akan membangun proyek kita seperti biasa.

Ekstensi file kita akan menjadi .tsx alih-alih .jsx dan .ts alih-alih .js. Masih dalam file package.json, kita bisa menyesuaikan script lint untuk mempertimbangkan hal tersebut:

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

Konfigurasi TypeScript

Kita perlu membuat file tsconfig.json di root proyek kita untuk mengkonfigurasi TypeScript:

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

    /* Bundler mode */
    "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" }]
}

Dan sebuah tsconfig.node.json:

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

Ini adalah opsi default untuk proyek React menggunakan Vite. Anda dapat menemukan lebih banyak informasi tentangnya di halaman dokumentasi compiler options.

Konfigurasi ESLint

Kita perlu memperbarui file .eslintrc.cjs kita untuk mempertimbangkan 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",
  },
};

Ini memerlukan dua package baru:

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