使用 TypeScript

TypeScript 是一种通过添加类型定义来扩展 JavaScript 的语言。新的 React Native 项目默认使用 TypeScript，但也支持 JavaScript 和 Flow。

TypeScript 入门

由 React Native CLI 或流行的模板（如 Ignite）创建的新项目默认将使用 TypeScript。

TypeScript 也可用于 Expo，它维护着 TypeScript 模板，或者在将 .ts 或 .tsx 文件添加到项目时会提示您自动安装和配置 TypeScript。

npx create-expo-app --template

将 TypeScript 添加到现有项目

将 TypeScript、类型和 ESLint 插件添加到您的项目。

npm
Yarn

npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

yarn add --dev @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript

注意

此命令添加每个依赖项的最新版本。可能需要更改版本以匹配项目使用的现有软件包。您可以使用 React Native 升级助手等工具来查看 React Native 发布的版本。

添加 TypeScript 配置文件。在项目的根目录中创建一个 tsconfig.json 文件

{
  "extends": "@tsconfig/react-native/tsconfig.json"
}

将 JavaScript 文件重命名为 *.tsx

您应该保持 ./index.js 入口文件不变，否则在捆绑生产版本时可能会遇到问题。

运行 tsc 以对新的 TypeScript 文件进行类型检查。

npm
Yarn

npx tsc

yarn tsc

使用 JavaScript 而不是 TypeScript

React Native 将新应用程序默认为 TypeScript，但仍然可以使用 JavaScript。扩展名为 .jsx 的文件被视为 JavaScript 而不是 TypeScript，并且不会进行类型检查。JavaScript 模块仍然可以被 TypeScript 模块导入，反之亦然。

TypeScript 和 React Native 的工作原理

默认情况下，TypeScript 源代码在捆绑期间由 Babel 进行转换。我们建议您仅使用 TypeScript 编译器进行类型检查。这是新创建的应用程序的 tsc 的默认行为。如果您有现有的 TypeScript 代码要移植到 React Native，则使用 Babel 而不是 TypeScript 有一两个注意事项。

React Native + TypeScript 界面是什么样的

您可以通过 React.Component<Props, State> 为 React 组件的 Props 和 State 提供接口，这将在 JSX 中使用该组件时提供类型检查和编辑器自动完成。

components/Hello.tsx
import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

export type Props = {
  name: string;
  baseEnthusiasmLevel?: number;
};

const Hello: React.FC<Props> = ({
  name,
  baseEnthusiasmLevel = 0,
}) => {
  const [enthusiasmLevel, setEnthusiasmLevel] = React.useState(
    baseEnthusiasmLevel,
  );

  const onIncrement = () =>
    setEnthusiasmLevel(enthusiasmLevel + 1);
  const onDecrement = () =>
    setEnthusiasmLevel(
      enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0,
    );

  const getExclamationMarks = (numChars: number) =>
    numChars > 0 ? Array(numChars + 1).join('!') : '';

  return (
    <View style={styles.container}>
      <Text style={styles.greeting}>
        Hello {name}
        {getExclamationMarks(enthusiasmLevel)}
      </Text>
      <View>
        <Button
          title="Increase enthusiasm"
          accessibilityLabel="increment"
          onPress={onIncrement}
          color="blue"
        />
        <Button
          title="Decrease enthusiasm"
          accessibilityLabel="decrement"
          onPress={onDecrement}
          color="red"
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  greeting: {
    fontSize: 20,
    fontWeight: 'bold',
    margin: 16,
  },
});

export default Hello;

您可以在 TypeScript 游乐场中探索更多语法。

在哪里可以找到有用的建议

TypeScript 手册
React 关于 TypeScript 的文档
React + TypeScript 速查表对如何使用 TypeScript 与 React 进行了很好的概述