This course is entirely written in JavaScript but you can also use TypeScript with React Three Fiber.

TypeScript is a superset of JavaScript that adds types to the language. It's a great way to catch errors early and to have a better developer experience with auto completion and documentation.

The choice of using TypeScript or not is up to you. To help you decide, here are some questions you should think about:

• The kind of project you are building: Are you drafting a 3D experience or building with the intent to ship it? Is it a small project or a big one? Is it meant to be maintained for a long time?
• Your team: Are you working alone or with other people? Like comments, types are a great way to make your code more understandable for others.

There is no right or wrong answer, it's up to you to decide what's best for your project. As the library is written in TypeScript, you can benefit from it even if you are using JavaScript.

Together we will see how to easily convert our starter project to TypeScript and how to use it with React Three Fiber.

But this lesson is not a TypeScript tutorial, if you have no experience and want to learn more about it, you should start here.

Setup

In the setup lesson, we created a new project from scratch using Vite. If you're starting a new project, you can follow the same steps and choose the TypeScript variant to your project instead of the JavaScript one. (Don't forget to come back here after to discover how to use it 🤭)

Let's see how to convert an existing project to TypeScript instead.

The starter project is the same as the final result of the setup lesson, but the steps are the same for any project.

Install TypeScript

First, we need to install TypeScript in our project. We can do that with the following command:

Copy
yarn add -D typescript

-D will install TypeScript as a dev dependency. (As it's not needed in the final production build)

TypeScript adds a new step to our build process. We need to compile our TypeScript files to JavaScript before running our project. To do that, we need to update our package.json build script to the following:

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

The tsc command will compile our TypeScript files to JavaScript and the vite build command will build our project as usual.

The extension of our files will become .tsx instead of .jsx and .ts instead of .js. Still in the package.json file, we can adjust the lint script to take that into account:

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

TypeScript configuration

We need to create a tsconfig.json file at the root of our project to configure 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" }]
}

And a tsconfig.node.json:

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

These are the default options for a React project using Vite. You can find more information about them in the compiler options documentation page.

ESLint configuration

We need to update our .eslintrc.cjs file to take TypeScript into account:

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

It requires two new packages:

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