TypeScript

Remix seamlessly supports both JavaScript and TypeScript. If you name a file with a .ts or .tsx extension, it will treat it as TypeScript (.tsx is for TypeScript files with JSX in them). But it isn’t required. You can write all your files as .js files if you don’t want TypeScript.

The Remix compiler will not do any type checking (it simply removes the types). If you want to do type checking, you’ll want to use TypeScript’s tsc CLI yourself. A common solution is to add a typecheck script to your package.json:

  1. {
  2.   "name": "remix-app",
  3.   "private": true,
  4.   "sideEffects": false,
  5.   "scripts": {
  6.     "build": "remix build",
  7.     "dev": "remix dev",
  8.     "start": "remix-serve build",
  9.     "typecheck": "tsc"
  10.   },
  11.   "dependencies": {
  12.     "@remix-run/node": "latest",
  13.     "@remix-run/react": "latest",
  14.     "@remix-run/serve": "latest",
  15.     "react": "^17.0.2",
  16.     "react-dom": "^17.0.2"
  17.   },
  18.   "devDependencies": {
  19.     "@remix-run/dev": "latest",
  20.     "@remix-run/eslint-config": "latest",
  21.     "@types/react": "^17.0.38",
  22.     "@types/react-dom": "^17.0.11",
  23.     "eslint": "^8.23.1",
  24.     "typescript": "^5.0.4"
  25.   },
  26.   "engines": {
  27.     "node": ">=14.0.0"
  28.   }
  29. }

Then you can run that script as part of continuous integration, alongside your tests.

Remix has TypeScript type definitions built-in as well. The starter templates create a remix.env.d.ts file that is referenced by the tsconfig.json:

  1. {
  2.   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  3.   "compilerOptions": {
  4.     "lib": ["DOM", "DOM.Iterable", "ES2019"],
  5.     "isolatedModules": true,
  6.     "esModuleInterop": true,
  7.     "jsx": "react-jsx",
  8.     "moduleResolution": "node",
  9.     "resolveJsonModule": true,
  10.     "target": "ES2019",
  11.     "strict": true,
  12.     "allowJs": true,
  13.     "forceConsistentCasingInFileNames": true,
  14.     "baseUrl": ".",
  15.     "paths": {
  16.       "~/*": ["./app/*"]
  17.     },
  19.     // Remix takes care of building everything in `remix build`.
  20.     "noEmit": true
  21.   }
  22. }
  1. /// <reference types="@remix-run/dev" />
  2. /// <reference types="@remix-run/node" />

Note that the types referenced in remix.env.d.ts will depend on which environment you’re running your app in. For example, there are different globals available in Cloudflare.