TypeScript

このコンテンツはまだ日本語訳がありません。

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 中有不同的全局变量可用。