使用 TypeScript

将文件重命名为 .tsx 或 .ts 扩展名

将文件重命名以转换为 TypeScript。例如，从根组件文件开始，例如 App.js，将其重命名为 App.tsx：

提示： 如果文件包含 React 组件（JSX），请使用 .tsx 扩展名。如果文件不包含任何 JSX，则可以使用 .ts 文件扩展名。

安装所需的开发依赖

要在 package.json 中安装所需的 devDependencies，例如 typescript 和 @types/react：

或者，运行 npx expo start 命令来安装 typescript 和 @types/react 的开发依赖。

使用 tsconfig.json 添加基础配置

项目的 tsconfig.json 默认应继承 expo/tsconfig.base。你可以通过运行以下命令自动生成 tsconfig.json 文件：

tsconfig.json 中的默认配置对用户友好，并鼓励采用。如果你更喜欢 严格类型检查 并减少运行时错误的可能性，可以在 compilerOptions 下启用 strict：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}

路径别名（可选）

Expo CLI 会自动支持 tsconfig.json 中的 路径别名。它允许使用自定义别名来导入模块，而不是使用相对路径。

例如，要使用别名 @/components/Button 从 src/components/Button.tsx 导入 Button 组件，请在 tsconfig.json 中添加别名 @/* 并将其设置为 src 目录：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

{
  "expo": {
    "experiments": {
      "tsconfigPaths": false
    }
  }
}

注意事项

使用路径别名时，请考虑以下内容：

• 修改 tsconfig.json 后，重启 Expo CLI 以更新路径别名。别名变更时无需清除 Metro 缓存。
• 如果不使用 TypeScript，jsconfig.json 可以作为 tsconfig.json 的替代方案。
• 定义路径别名后，会增加额外的解析时间。
• 路径别名仅由 Metro（包括 Metro web）支持，不受已弃用的 @expo/webpack-config 支持。
• 现有的 React Native 项目 需要为此功能进行额外设置。更多信息请参阅 Metro 设置指南。

绝对导入（可选）

要从项目根目录启用绝对导入，请在 tsconfig.json 文件中定义 compilerOptions.baseUrl：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "baseUrl": "./"
  }
}

例如，设置上述配置后，可以从路径 src/components/Button 导入 Button 组件：

import Button from 'src/components/Button';

注意事项

使用绝对导入时，请考虑以下内容：

• 如果定义了 compilerOptions.paths，它们会相对于 compilerOptions.baseUrl 进行解析；否则，它们会相对于项目根目录进行解析。
• compilerOptions.baseUrl 会在 node modules 之前解析。这意味着如果你有一个名为 ./path.ts 的文件，它可能会被导入，而不是名为 path 的 node 模块。
• 修改 tsconfig.json 后，需要重启 Expo CLI 以更新 compilerOptions.baseUrl。
• 如果你不使用 TypeScript，jsconfig.json 可以作为 tsconfig.json 的替代方案。
• 绝对导入仅由 Metro（包括 Metro web）支持，不受 @expo/webpack-config 支持。
• 现有的 React Native 项目需要为此功能进行额外设置。更多信息请参阅 版本化 Metro 设置指南。