使用 TypeScript

有关使用 TypeScript 配置 Expo 项目的深入指南。

Expo 对 TypeScript 提供一流的支持。Expo SDK 的 JavaScript 接口是用 TypeScript 编写的。

🌐 Expo has first-class support for TypeScript. The JavaScript interface of Expo SDK is written in TypeScript.

本指南提供了一种快速开始新项目的方法，以及将现有的基于 JavaScript 的 Expo 项目迁移到使用 TypeScript 的步骤。

🌐 This guide provides a quick way to get started for a new project and also steps to migrate your existing JavaScript based Expo project to use TypeScript.

快速开始

🌐 Quick start

要创建新项目，请使用包含基本 TypeScript 配置、示例代码和基本导航结构的默认模板：

🌐 To create a new project, use the default template which includes base TypeScript configuration, example code, and basic navigation structure:

使用上述命令创建新项目后，请确保遵循以下说明：

🌐 After you create a new project using the command above, make sure to follow instructions from:

• 设置你的环境，其中提供了设置本地开发环境所需的步骤。
• 开始开发，提供有关启动开发服务器、文件结构以及其他功能详细信息的信息。

迁移现有 JavaScript 项目

🌐 Migrating existing JavaScript project

要迁移你现有的基于 JavaScript 的项目以使用 TypeScript，请按照以下说明操作：

🌐 To migrate your existing JavaScript based project to use TypeScript, follow the instructions below:

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

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

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

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

import Button from 'src/components/Button';

类型生成

🌐 Type generation

一些 Expo 库同时提供静态类型和类型生成能力。这些类型会在项目构建时或运行 npx expo customize tsconfig.json 命令时自动生成。

🌐 Some Expo libraries provide both static types and type generation capabilities. These types are automatically generated when the project builds or by running the npx expo customize tsconfig.json command.

用于项目配置文件的 TypeScript

🌐 TypeScript for project's config files

要在配置文件（例如 metro.config.js 或 app.config.js）中使用 TypeScript，需要进行额外的设置。

🌐 Additional setup is required to use TypeScript for configuration files such as metro.config.js or app.config.js.

将 tsx 安装为开发依赖，并使用其 tsx/cjs require 钩子 在 JS 配置文件中导入 TypeScript 文件。该钩子允许使用 TypeScript 导入，同时保持根文件为 JavaScript。下面的命令添加了 tsx，以便 import 'tsx/cjs' 在接下来的子部分示例中工作。

🌐 Install tsx as a dev dependency and utilize its tsx/cjs require hook to import TypeScript files within your JS configuration file. This hook allows TypeScript imports while keeping the root file as JavaScript. The command below adds tsx so import 'tsx/cjs' works in the following sub-section examples.

metro.config.js

更新 metro.config.js 以导入 metro.config.ts 文件：

🌐 Update metro.config.js to require metro.config.ts file:

require('tsx/cjs'); // Add this to import TypeScript files
module.exports = require('./metro.config.ts');

使用你的项目的 Metro 配置更新 metro.config.ts 文件：

🌐 Update metro.config.ts file with your project's metro configuration:

import { getDefaultConfig } from 'expo/metro-config';

const config = getDefaultConfig(__dirname);

module.exports = config;

require('tsx/cjs'); // Add this to import TypeScript files
module.exports = require('./webpack.config.ts');

import createExpoWebpackConfigAsync from '@expo/webpack-config/webpack';
import { Arguments, Environment } from '@expo/webpack-config/webpack/types';

module.exports = async function (env: Environment, argv: Arguments) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  return config;
};

app.config.js

app.config.ts 默认受支持。但它不支持外部 TypeScript 模块或 tsconfig.json 自定义。你可以使用以下方法获取更全面的 TypeScript 配置：

import 'tsx/cjs'; // Add this to import TypeScript files
import { ExpoConfig } from 'expo/config';

const config: ExpoConfig = {
  name: 'my-app',
  slug: 'my-app',
};

export default config;

其他 TypeScript 功能

🌐 Other TypeScript features

某些语言特性可能需要额外的配置。例如，如果你想使用装饰器，你需要添加 experimentalDecorators 选项。有关可用属性的更多信息，请参阅 TypeScript 编译器选项 文档。

🌐 Some language features may require additional configuration. For example, if you want to use decorators you'll need to add the experimentalDecorators option. For more information on the available properties see the TypeScript compiler options documentation.

了解如何使用 TypeScript

🌐 Learn how to use TypeScript

学习 TypeScript 的一个好起点是官方的 TypeScript 手册。

🌐 A good place to start learning TypeScript is the official TypeScript Handbook.

对于 TypeScript 和 React 组件， 我们建议参考 React TypeScript CheatSheet 来学习如何在各种常见情况下为你的 React 组件添加类型。