TypeScript 无法识别 React 正在我的 VSCode 中的 linter 中导入和使用

Posted 2023-03-13

【中文标题】TypeScript 无法识别 React 正在我的 VSCode 中的 linter 中导入和使用

【英文标题】：TypeScript does not recognize that React is being imported and used in my linter in VSCode

【发布时间】：2019-02-25 20:39:36

【问题描述】：

我正在使用带有 TypeScript 的 React Native 构建一个应用程序。我使用 React Navigation 进行导航。

在我的导航器中，我使用来自 React Native Elements 的图标作为选项卡。为了使用它们，我必须导入 React。但是我的 linter 不承认我在使用它。它说：

[ts] 'React' is declared but its value is never read.

这是我的代码：

import DetailScreen from "../screens/Detail";
import HomeScreen from "../screens/Home";
import LoadingScreen from "../screens/Loading";
import OptionsScreen from "../screens/Options";
import SettingsScreen from "../screens/Settings";
import React from "react";
import  Platform  from "react-native";
import  Icon  from "react-native-elements";
import 
  createBottomTabNavigator,
  createDrawerNavigator,
  createStackNavigator,
  createSwitchNavigator,
  NavigationSceneRendererProps,
  NavigationTransitionProps,
  StackViewTransitionConfigs,
  TabScene,
  TransitionConfig
 from "react-navigation";

// Some other code

const HomeStack = createStackNavigator(
   DetailScreen, HomeScreen, OptionsScreen ,
  // TODO: Rename the config from 'CustomTransitionConfig' to 'dynamicModalTransition'.
   initialRouteName: "HomeScreen", transitionConfig: dynamicModalTransition 
);

HomeStack.navigationOptions = 
  tabBarLabel: "Home",
  tabBarIcon: ( tintColor : TabScene) => <Icon name="ios-home" type="ionicon" color=tintColor />
;

const SettingsStack = createStackNavigator( SettingsScreen );

SettingsStack.navigationOptions = 
  tabBarLabel: "Settings",
  tabBarIcon: ( tintColor : TabScene) => <Icon name="ios-cog" type="ionicon" color=tintColor />
;

const MainNavigator = Platform.select(
  ios: createBottomTabNavigator( HomeStack, SettingsStack ),
  android: createDrawerNavigator( HomeStack, SettingsStack )
);

const RootSwitch = createSwitchNavigator(
   LoadingScreen, MainNavigator ,
   initialRouteName: "MainNavigator" 
);

export default RootSwitch;

这里发生了什么？为什么 TypeScript 无法识别 React？

其中的一个子错误是<Icon />s 属性每个都有错误：

[ts] '>' expected.
[ts] Cannot find name 'name'.
any

它只是分别表示颜色和类型。

【问题讨论】：

试试import * as React from "react";。

@zeh 谢谢你的帮助！我做了，但没有用。

【参考方案1】：

当文件包含像 <Icon ... /> 这样的 JSX 语法时，使用文件扩展名 .tsx 而不是 .ts。