このコースは完全にJavaScriptで書かれていますが、React Three Fiberと一緒にTypeScriptを使うこともできます。

TypeScriptは、言語に型を追加するJavaScriptのスーパーセットです。これはエラーを早期にキャッチするための優れた方法であり、自動補完やドキュメントの提供などによって開発者の体験を向上させることができます。

TypeScriptを使用するかどうかの選択はあなたに委ねられております。決定を助けるために、以下の質問について考えてみてください：

• あなたが構築しているプロジェクトの種類：3Dエクスペリエンスを下書きしているのか、それとも出荷するつもりで構築しているのか？小さなプロジェクトなのか、大きなプロジェクトなのか？長期間維持する予定なのか？
• あなたのチーム：一人で作業しているのか、他の人と一緒に作業しているのか？コメントのように、型は他の人にとってコードをより理解しやすくするための優れた方法です。

正解や間違った答えはありません。あなたのプロジェクトにとって最善の選択をすることが重要です。ライブラリはTypeScriptで書かれているため、JavaScriptを使用している場合でもその恩恵を享受できます。

一緒に、私たちのスタータープロジェクトを簡単にTypeScriptに変換する方法と、それをReact Three Fiberで使用する方法を見ていきましょう。

ただし、このレッスンはTypeScriptのチュートリアルではありませんので、経験がなく、さらに学びたい場合はここから始めてください。

セットアップ

セットアップレッスンでは、Viteを使用してゼロから新しいプロジェクトを作成しました。新しいプロジェクトを開始する場合、同じ手順を追ってプロジェクトにTypeScriptバリアントを選択することができます（その後、ここに戻って使用方法を確認してください 🤭）。

代わりに既存のプロジェクトをTypeScriptに変換する方法を見てみましょう。

スタータープロジェクトはセットアップレッスンの最終結果と同じですが、手順はどのプロジェクトにも同じです。

TypeScriptのインストール

まず、プロジェクトにTypeScriptをインストールする必要があります。以下のコマンドを使用します：

Copy
yarn add -D typescript

-DはTypeScriptをdev dependencyとしてインストールします。（最終的なプロダクションビルドには必要ありません）

TypeScriptはビルドプロセスに新しいステップを追加します。プロジェクトを実行する前にTypeScriptファイルをJavaScriptにコンパイルする必要があります。そのために、package.jsonのビルドスクリプトを以下のように更新します：

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

tscコマンドはTypeScriptファイルをJavaScriptにコンパイルし、vite buildコマンドは通常通りにプロジェクトをビルドします。

ファイルの拡張子は.jsxから.tsx、.jsから.tsに変わります。同じくpackage.jsonファイルでは、lintスクリプトを以下のように調整します：

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

TypeScriptの設定

プロジェクトのルートにtsconfig.jsonファイルを作成し、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" }]
}

そして、tsconfig.node.jsonファイルも作成します：

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

これらはViteを使用するReactプロジェクト用のデフォルトオプションです。詳細についてはcompiler options documentation pageをご覧ください。

ESLint 設定

TypeScript を考慮して .eslintrc.cjs ファイルを更新する必要があります:

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",
  },
};

2つの新しいパッケージが必要です:

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