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

Question

为了配置我的 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 自动生成的文件。

Answer 1

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

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

Answer 2

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