TypeScript

Remix 無縫支援 JavaScript 和 TypeScript。如果您將檔案命名為 .ts 或 .tsx 副檔名，它會將其視為 TypeScript（.tsx 適用於其中包含 JSX 的 TypeScript 檔案）。但這不是必須的。如果您不想使用 TypeScript，您可以將所有檔案寫成 .js 檔案。

Remix CLI 不會執行任何型別檢查。您需要自行使用 TypeScript 的 tsc CLI。一個常見的解決方案是將 typecheck 腳本新增到您的 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": "^5.1.4"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

然後您可以將該腳本作為持續整合的一部分與您的測試一起執行。

Remix 也內建了 TypeScript 型別定義。例如，入門範本會建立一個 tsconfig.json 檔案，其中包含 Remix 和 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 中有不同的全域變數可用。