TypeScript

Remix 无缝支持 JavaScript 和 TypeScript。如果你使用 .ts 或 .tsx 扩展名命名文件，它将被视为 TypeScript（.tsx 表示包含使用 JSX 的 TypeScript 文件）。但这不是必需的。如果你不想使用 TypeScript，你可以将所有文件编写为 .js 文件。

¥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.

Remix CLI 不会执行任何类型检查。相反，你需要自己使用 TypeScript 的 tsc CLI。常见的解决方案是将 typecheck 脚本添加到 package.json 中：

¥The Remix CLI will not perform any type checking. Instead, you'll want to use TypeScript's tsc CLI yourself. A common solution is to add a typecheck script to your package.json:

{
  "name": "remix-app",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore .",
    "start": "remix-serve ./build/index.js",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "latest",
    "@remix-run/react": "latest",
    "@remix-run/serve": "latest",
    "isbot": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "latest",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "eslint": "^8.23.1",
    "typescript": "^5.1.6",
    "vite": "^6.0.0"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

然后，你可以将该脚本作为持续集成的一部分与测试一起运行。

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

Remix 还内置了 TypeScript 类型定义。例如，入门模板会创建一个 tsconfig.json 文件，其中包含 Remix 和 Vite 所需的类型：

¥Remix has TypeScript type definitions built-in as well. For example, the starter templates create a tsconfig.json file that includes the necessary types for Remix and Vite:

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/.server/**/*.ts",
    "**/.server/**/*.tsx",
    "**/.client/**/*.ts",
    "**/.client/**/*.tsx"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["@remix-run/node", "vite/client"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Vite takes care of building everything, not tsc.
    "noEmit": true
  }
}

请注意，types 数组中引用的类型取决于你运行应用的环境。例如，Cloudflare 中提供了不同的全局变量。