使用打字稿配置本机反应时出错

Posted 2023-03-07

【中文标题】使用打字稿配置本机反应时出错

【英文标题】：Errors when configuring react native with typescript

【发布时间】：2019-04-16 09:25:49

【问题描述】：

为了配置我的 react native 项目，我仔细地遵循了这个过程：https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native。 但是我要编译这个我从 typescript 编译器得到十五个错误。

这些是一些错误：

无法重新声明块范围变量“导航器”。 后续的属性声明必须具有相同的类型。属性“geolocation”必须是“Geolocation”类型，但这里有“GeolocationStatic”类型 找不到名称“地图”。 后续的变量声明必须具有相同的类型 重复的标识符“RequestInfo”。 此处还声明了“FormData”。 无法重新声明块范围变量“控制台”。 annot redeclare block-scoped variable 'navigator'.

信息：

"@types/react": "^16.7.3",
"@types/react-native": "^0.57.8",
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.49.1",
"react-native-typescript-transformer": "^1.2.10",
"react-test-renderer": "16.6.0-alpha.8af6728",
"typescript": "^3.1.6"

更新

tsconfig.json

  "compilerOptions": 
    "target": "es2017",
    "module": "commonjs",
    "allowJs": true,
    "jsx": "react-native",
    "sourceMap": true,
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  ,
  "exclude": ["build", "index.js", "node_modules"]

package.json

  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": 
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "tsc": "tsc --watch"
  ,
  "dependencies": 
    "react": "16.6.0-alpha.8af6728",
    "react-native": "^0.57.1"
  ,
  "devDependencies": 
    "@types/react": "^16.7.3",
    "@types/react-native": "^0.57.8",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.1",
    "react-native-typescript-transformer": "^1.2.10",
    "react-test-renderer": "16.6.0-alpha.8af6728",
    "typescript": "^3.1.6"
  ,
  "jest": 
    "preset": "react-native"
  

App.tsx

import React, Component from 'react';
import Platform, StyleSheet, Text, View from 'react-native';

const instructions = Platform.select(
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
);

type Props = ;
export default class App extends Component<Props> 
  render() 
    return (
      <View style=styles.container>
        <Text style=styles.welcome>Welcome to React Native!</Text>
        <Text style=styles.instructions>To get started, edit App.js</Text>
        <Text style=styles.instructions>instructions</Text>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  welcome: 
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  ,
  instructions: 
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  ,
);

rn-cli.config.js

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

其他文件是 react-native 自动生成的文件。

【问题讨论】：

请提供足以重现问题的代码，以便我们找到原因。

你完全正确@Matt McCutchen，我刚刚添加了细节

【参考方案1】：

对于那些尝试使用 typescript 配置 react-native 的人：

查看我们的boilerplate。这个 repo 包含所有初始配置，以使新的 expo-31、babel 7、typescript 和 jest 工作。

【参考方案2】：

看起来 React Native 类型声明与 TypeScript 默认加载的浏览器 DOM 声明冲突。要停止加载 DOM 声明，请将 tsconfig.json 中的 lib 选项设置为 ["es2017"]（匹配您的 target）。 （lib 的默认值将包括es2017 和dom。）有一个similar question（尽管设置lib 选项的正确答案埋在那里）和this issue report 中的其他讨论.

【讨论】：

非常感谢您解决了问题。你相信我以后还会有打字稿引起的其他冲突，还是我可以悄悄地去？我从来没有在前端使用过打字稿，我宁愿没有其他问题。

我想说的是，实际上，您可能会在某些时候遇到更多与 TypeScript 相关的问题，但它们很可能可以通过少量的工作来解决。您是否重视类型检查和编辑器服务以使用 TypeScript 是您的决定。 （我当然会，或者我想我不会在这里。）