如何在Typecript中使用React Native？

I've reading that React Native supports Typescript without dependencies like react-native-typescript-transformer. How do I configure it to code using Typescript?

我读过React Native支持的Typescript没有依赖,比如react-native-typescript-transformer。如何使用Typescript将其配置为代码?

1 个解决方案

#1

Since 0.57.0

With the upgrade to Babel v7, Typescript is supported but you will still need to make some changes to your application:

升级到Babel v7后,支持Typescript,但您仍需要对应用程序进行一些更改:

• Install type definition dependencies @types/jest @types/react @types/react-native @types/react-test-renderer

安装类型定义依赖项@ types / jest @ types / react @ types / react-native @ types / react-test-renderer

• Change your .js files to .ts or .tsx depending on whether such files contain JSX or not. Note: keep index.js as is, otherwise Metro builder will fail since it is still not updated to expect a .ts entry file.

将.js文件更改为.ts或.tsx,具体取决于此类文件是否包含JSX。注意:保持index.js不变,否则Metro构建器将失败,因为它仍未更新为期望.ts条目文件。

• You will need to add module declarations for binary assets like images, videos and json files for Typescript to understand how to import them (example here).

您需要为Typescript添加二进制资产(如图像,视频和json文件)的模块声明,以了解如何导入它们(例如此处)。

• For testing, Jest must be made aware of Typescript by adding the following to its configuration section in package.json:

  为了进行测试,必须通过在package.json的配置部分添加以下内容来使Jest知道Typescript:

  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"
  }
  

Be aware that with this setup Babel just transforms Typescript to Javascript, it does not perform type-checking.

请注意,通过此设置,Babel只会将Typescript转换为Javascript,它不会执行类型检查。

Also, expect possible issue since it is the first React Native release to support Typescript. My recommendation is to still follow the instructions below until things stabilize with time and patches.

此外,期待可能的问题,因为它是第一个支持Typescript的React Native版本。我的建议仍然是遵循以下说明,直到时间和补丁稳定。

Before 0.57.0

React Native does not offer first-party Typescript support. Instead, it offers Flow support out-of-the-box if you want types without having to add additional dependencies (other than flow-bin of course).

React Native不提供第一方Typescript支持。相反,它提供了开箱即用的Flow支持,如果你想要类型而不必添加额外的依赖项(当然不是flow-bin)。

If you necessarily want Typescript, you will need to add some dependencies one way or another, depending on the setup you would eventually pick to use. There is a React Native blog post Using Typescript with React Native that explains one way to add Typescript.

如果您一定需要Typescript,则需要以某种方式添加一些依赖项,具体取决于您最终选择使用的设置。有一个React Native博客文章使用带有React Native的Typescript解释了添加Typescript的一种方法。