Блог

Сама программа работает нормально, но Typescript подчеркивает множество элементов красным цветом в моей функции возврата для моих компонентов. В частности, все, что выходит из моего react-native импорта.

Что-нибудь вроде View , Button , и тому подобное выдает эти «ошибки». Я говорю об ошибках в кавычках, потому что приложение работает вообще без каких-либо проблем. Typescript в моей IDE (VS Code) — единственное, на что жалуются. Он выдает эти ошибки, если я выбираю (через нижний правый переключатель строки состояния) JavaScript React или TypeScript React. Вот пример:

Вот важные фрагменты моего package.json

 "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-navigation/native": "^5.7.6",
    "@react-navigation/stack": "^5.9.3",
    "expo": "~39.0.2",
    "expo-status-bar": "~1.0.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-screens": "~2.10.1",
    "react-native-web": "~0.13.12",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "@react-native-community/masked-view": "0.1.10"
  },
  "devDependencies": {
    "react-native-web": "~0.13.7",
    "@types/react": "*",
    "@types/react-dom": "*",
    "@types/react-native": "*",
    "typescript": "~3.9.5"
  },
  

И вот как выглядит файл, который выдает эти ошибки:

 import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";

const SummaryScreen = ({ navigation }) => {
    const accountDetailsPage = () => {
        navigation.navigate("Account Details");
    };

    const contactDetailsPage = () => {
        navigation.navigate("Contact Details");
    };

    return (
        <View style={styles.container}>
            <Text>HERE IS A BUNCH OF TEXT</Text>
            <Button title="Account Details" onPress={accountDetailsPage} />
            <Button title="Contact Details" onPress={contactDetailsPage} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
    },
});

export default SummaryScreen;
  

Я думаю, важно отметить, что я НЕ получаю эти ошибки для компонентов, созданных из @react-navigation таких, как <Navigator> и <Stack.Screen ...

Вот и мой tsconfig:

 {
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "jsx": "react-native",
        "lib": ["dom", "esnext"],
        "moduleResolution": "node",
        "noEmit": true,
        "skipLibCheck": true,
        "resolveJsonModule": true,
        "strict": true
    }
}
  

Что-то в VS Code жалуется, что не может найти модуль useState , но он также отлично работает при запуске без ошибок

Проблема заключалась в том, что VS Code использовал неправильную и очень старую версию TypeScript. Я не уверен, как это было установлено таким образом, или как у него все еще была версия, которая была выпущена после полного выпуска. Простое исправление, но практически невозможно диагностировать. Вот где я это исправил:

Как вы можете видеть, у меня была установлена версия 2.7.2 на самом VS Code, и она БЫЛА выбрана. Теперь я использую 3.9.7, и все эти ошибки исчезли.