Question

我正在尝试将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"
]
}

Answer 1

使用版本31 +可以更轻松地添加打字稿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"
    },

完成这些更改后，请停止博览会并重新启动。

如果您使用原始的本地反应，则rn-cli.config.js文件是响应，但是在博览会上，这就是我的工作方式。

Answer 2

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

唯一的例外是App.js –该文件必须是.js文件。但是，您仍然可以import .tsx来App.js其他authed个文件，而无需执行其他步骤。

Answer 3

TS / TSX文件可以运行out of the box with expo v31，但您可能需要添加

打包TypeScript类型

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

自定义tsconfig.json

在tsconfig.json旁边的根目录中创建package.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"]
}

将TypeScript添加到React-Native Expo项目

3 个答案: