为了配置我的 React Native 项目,我仔细遵循了以下过程:https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native 。 但是我要编译这个,我从 typescript 编译器中得到了十五个错误。
以下是一些错误:
- 无法重新声明 block 作用域变量“navigator”。
- 后续属性声明必须具有相同的类型。属性“geolocation”的类型必须为“Geolocation”,但此处的类型为“GeolocationStatic”
- 找不到名称“ map ”。
- 后续变量声明必须具有相同的类型
- 重复的标识符“RequestInfo”。
- “FormData”也在此处声明。
- 无法重新声明 block 作用域变量“console”。
- 不重新声明 block 作用域变量“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自动生成的文件。
最佳答案
看起来 React Native 类型声明与 TypeScript 默认加载的浏览器 DOM 声明冲突。要停止加载 DOM 声明,请将 tsconfig.json 中的
。 (lib
选项设置为 ["es2017"]
(与您的 target
匹配) lib
的默认值将包括 es2017
以及 dom
。)有一个 similar question (尽管设置 lib
选项的正确答案隐藏在其中)以及 this issue report 中的其他讨论.
关于node.js - 使用 TypeScript 配置 React Native 时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53282812/