跳到主要内容

使用 TypeScript

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

TypeScript 入门​

通过 React Native CLI 创建的新项目或像 Ignite 这样的流行模板默认将使用 TypeScript。

TypeScript 也可以与 Expo 一起使用，Expo 维护了 TypeScript 模板，或者当 .ts 或 .tsx 文件添加到您的项目时，它会提示您自动安装和配置 TypeScript。

shell
npx create-expo-app --template

向现有项目添加 TypeScript​

  1. 向您的项目添加 TypeScript、类型定义和 ESLint 插件。
shell
npm install -D @tsconfig/react-native @types/jest @types/react @types/react-test-renderer typescript
注意

此命令会添加每个依赖项的最新版本。版本可能需要更改以匹配您的项目使用的现有软件包。您可以使用像 React Native Upgrade Helper 这样的工具来查看 React Native 发布的版本。

  1. 添加 TypeScript 配置文件。在项目的根目录中创建一个 tsconfig.json 文件
json
{
  "extends": "@tsconfig/react-native/tsconfig.json"
}
  1. 将 JavaScript 文件重命名为 *.tsx

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

  1. 运行 tsc 以类型检查您的新 TypeScript 文件。
shell
npx tsc

使用 JavaScript 而不是 TypeScript​

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

TypeScript 和 React Native 的工作原理​

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

React Native + TypeScript 是什么样子的​

您可以为 React 组件的 Props 和 State 通过 React.Component<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 playground 中探索更多语法。

在哪里找到有用的建议​

将自定义路径别名与 TypeScript 一起使用​

要将自定义路径别名与 TypeScript 一起使用，您需要设置路径别名以使其可以从 Babel 和 TypeScript 工作。方法如下

  1. 编辑您的 tsconfig.json 以拥有您的自定义路径映射。将 src 根目录中的任何内容设置为无需前导路径引用即可使用，并允许使用 tests/File.tsx 访问任何测试文件
diff
{
-  "extends": "@tsconfig/react-native/tsconfig.json"
+  "extends": "@tsconfig/react-native/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "*": ["src/*"],
+      "tests": ["tests/*"],
+      "@components/*": ["src/components/*"],
+    },
+  }
}
  1. 将 babel-plugin-module-resolver 作为开发包添加到您的项目
shell
npm install --save-dev babel-plugin-module-resolver
  1. 最后，配置您的 babel.config.js（请注意，您的 babel.config.js 的语法与您的 tsconfig.json 不同）
diff
{
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+       'module-resolver',
+       {
+         root: ['./src'],
+         extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
+         alias: {
+           tests: ['./tests/'],
+           "@components": "./src/components",
+         }
+       }
+    ]
+  ]
}