将 TypeScript 添加到 React-Native Expo 项目答案

【问题标题】：Adding TypeScript to React-Native Expo project将 TypeScript 添加到 React-Native Expo 项目
【发布时间】：2018-10-12 19:54:40
【问题描述】：

我正在尝试将 TypeScript 添加到 React-Native Expo 项目中，如果我将任何文件 abc.js 重命名为 abc.tsx，则会收到以下错误：

我一直按照以下说明操作：

我该如何解决这个问题？

rn-cli.config.js

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx', 'js', 'jsx'];
  }
}

tsconfig.json

{
"compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react",
    "outDir": "./dist",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    //"strict": true,
    "skipLibCheck": true,
    "declaration": true,
    "noUnusedLocals": true
},
"exclude": [
    "node_modules"
]
}

【问题讨论】：

您不需要创建 rn-cli.config.js 。您可以在 app.json 中添加元素，让打包者知道您使用 ts

标签： typescript react-native expo

【解决方案1】：

TS/TSX 文件可以使用 out of the box with expo v31，但您可能需要包含

包 TypeScript 类型

yarn add @types/expo @types/react @types/react-native -D

自定义 tsconfig.json

在package.json 旁边的根目录中创建tsconfig.json。它强制执行严格模式并包含App.tsx（以替换App.js）和“custom_types”目录来为不包含它们的npm包添加类型。

// Defaults from https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/
// Added "jsx": "react-native".
// Added ["App.tsx", "custom_types"] to "include".
{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Output react-native code.
    "jsx": "react-native",
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true
  },
  "include": ["src", "App.tsx", "custom_types"]
}

【讨论】：

【解决方案2】：

使用 31 + typescript 版本可以更轻松地添加https://docs.expo.io/versions/latest/guides/typescript/

首先安装开发依赖react-native-typescript-transformer

您需要在您的app.json 文件中添加此配置。这会让 expo 知道你使用 ts。

 "packagerOpts": {
      "sourceExts": [
        "ts",
        "tsx"
      ],
      "transformer": "node_modules/react-native-typescript-transformer/index.js"
    },

完成这些更改后停止 expo 并重新启动。

如果您使用原版 react-native，rn-cli.config.js 文件是响应，但在世博会上，这就是我的工作方式。

【讨论】：

如果import * as React from 'react' 工作，你可以尝试一下吗？这将有助于了解这里的错误。
这是我在这里经常与 expo 一起使用的 tsconfig.json gist.github.com/EQuimper/8fa9ab89638d8cd12cdd02bcc182c4d7
好的，你能把这个 "module": "es2015" 添加到你的 tsconfig 中吗？这将解决这个问题并让你导入默认值。
干得好 :)
你现在需要输入你的道具例如interface Props { example: string }class MyComponent extends React.Component<Props>

【解决方案3】：

Expo 31 内置了对 TypeScript 的支持：只需将组件文件命名为 .tsx 而不是 .js。

唯一的例外是App.js - 此文件必须是.js 文件。但是，您仍然可以从App.js 中import 其他.tsx 文件，无需额外步骤。

【讨论】：