代码之家 › 专栏 › 技术社区 › Ben

为React Native Expo项目添加TypeScript

expo react-native typescript

2

Ben · 技术社区 · 8 年前

abc.js 到 abc.tsx :

我该如何解决这个问题?

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"
]
}

3 回复 | 直到 8 年前

1

4

EQuimper 7 年前

https://docs.expo.io/versions/latest/guides/typescript/

首先安装dev依赖项 react-native-typescript-transformer

你需要加入你的 app.json 将此配置文件归档。这将使世博会知道你使用ts。

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

如果你用香草的话 rn-cli.config.js 文件是回应,但在这里,这是我如何使它工作。

2

6

tiagob 7 年前

TS/TSX文件工作 out of the box with expo v31

包类型脚本类型

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

自定义tsconfig.json

创建 tsconfig.json package.json . 它强制执行严格模式并包括 App.tsx (替换 App.js )和“custom\u 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"]
}

3

4

soundly_typed 7 年前

expo31内置了对TypeScript的支持:只需用 .tsx 而不是 .js

唯一的例外是 App.js 此文件成为一个 js先生 import 其他 .tsx文件 文件来自 应用程序.js