使用 TypeScript

重命名文件以使用 .tsx 或 .ts 扩展名

¥Rename files to use .tsx or .ts extension

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

¥Rename files to convert them to TypeScript. For example, start with the root component file such as App.js and rename it to App.tsx:

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

安装所需的开发依赖

¥Install required development dependencies

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

¥To install required devDependencies such as typescript and @types/react in package.json:

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

使用 tsconfig.json 添加基本配置

¥Add base configuration with tsconfig.json

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

¥A project's tsconfig.json should extend the expo/tsconfig.base by default. You can automatically generate a tsconfig.json file by running the command:

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

¥The default configuration in tsconfig.json is user-friendly and encourages adoption. If you prefer strict type checking and reduce the chances of runtime errors, enable strict under compilerOptions:

{
  "compilerOptions": {
    "strict": true
  }
}

路径别名（可选）

¥Path aliases (Optional)

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

¥Expo CLI supports path aliases in tsconfig.json automatically. It allows importing modules with custom aliases instead of relative paths.

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

¥For example, to import Button component from src/components/Button.tsx using the alias @/components/Button, add the alias @/* in tsconfig.json and set it to the src directory:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

{
  "expo": {
    "experiments": {
      "tsconfigPaths": true
    }
  }
}

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

注意事项

¥Considerations

使用路径别名时，请考虑以下事项：

¥When using path aliases, consider the following:

• 修改 tsconfig.json 以更新路径别名后重新启动 Expo CLI。当别名更改时，你不需要清除 Metro 缓存。

  ¥Restart Expo CLI after modifying tsconfig.json to update path aliases. You don't need to clear the Metro cache when the aliases change.

• 如果不使用 TypeScript，jsconfig.json 可以作为 tsconfig.json 的替代品。

  ¥If not using TypeScript, jsconfig.json can serve as an alternative to tsconfig.json.

• 路径别名在定义时会增加额外的解析时间。

  ¥Path aliases add additional resolution time when defined.

• 路径别名仅受 Metro（包括 Metro web）支持，而不受已弃用的 @expo/webpack-config 支持。

  ¥Path aliases are only supported by Metro (including Metro web) and not by the deprecated @expo/webpack-config.

• 裸项目需要对此功能进行额外设置。请参阅 Metro 设置指南 了解更多信息。

  ¥Bare projects require additional setup for this feature. See the Metro setup guide for more information.

绝对导入（可选）

¥Absolute imports (Optional)

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

¥To enable absolute imports from a project's root directory, define compilerOptions.baseUrl the tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "./"
  }
}

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

¥For example, setting the above configuration allows importing Button component from the path src/components/Button:

import Button from 'src/components/Button';

{
  "expo": {
    "experiments": {
      "tsconfigPaths": true
    }
  }
}

注意事项

¥Considerations

使用绝对导入时，请考虑以下事项：

¥When using absolute imports, consider the following:

• 如果定义了 compilerOptions.paths，则相对于 compilerOptions.baseUrl 进行解析，否则根据项目根目录进行解析。

  ¥compilerOptions.paths are resolved relative to the compilerOptions.baseUrl if it is defined, otherwise they're resolved against the project root directory.

• compilerOptions.baseUrl 在节点模块之前被解析。这意味着如果你有一个名为 ./path.ts 的文件，则可以导入它而不是名为 path 的节点模块。

  ¥compilerOptions.baseUrl is resolved before node modules. This means if you have a file named ./path.ts, it can be imported instead of a node module named path.

• 修改 tsconfig.json 后需要重新启动 Expo CLI 才能更新 compilerOptions.baseUrl。

  ¥Restarting Expo CLI is necessary to update compilerOptions.baseUrl after modifying the tsconfig.json.

• 如果你不使用 TypeScript，则 jsconfig.json 可以作为 tsconfig.json 的替代方案。

  ¥If you're not using TypeScript, jsconfig.json can serve as an alternative to tsconfig.json.

• 仅 Metro（包括 Metro web）支持绝对导入，@expo/webpack-config 不支持。

  ¥Absolute imports are only supported by Metro (including Metro web) and not by @expo/webpack-config.

• 裸项目需要对此功能进行额外设置。请参阅 版本化 Metro 设置指南 了解更多信息。

  ¥Bare projects require additional setup for this feature. See the versioned Metro setup guide for more information.