reactNative×typescriptの型Element'と 'ComponentType<any>の違いが分かりません

Question

reactNativeで以下のコードを記述したところ、AppNavigator.tsx側で下記のエラーが発生しました。

HomeScreen.tsx

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

const HomeScreen = () => {
  return (
      (省略)
  );
};

export default HomeScreen();

AppNavigator.tsx

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from '../screens/HomeScreen';
import ArticleScreen from '../screens/ArticleScreen';

export default function App() {
  const Stack = createStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}　//ここで下記エラーが発生
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Type 'Element' is not assignable to type 'ComponentType<any> | undefined'.
  Type 'Element' is not assignable to type 'FunctionComponent<any>'.
    Type 'Element' provides no match for the signature '(props: any, context?: any): ReactElement<any, any> | null'.ts(2322)

HomeScreen.tsxで最後のexport defaultをやめてexport const HomeScreen = () => {}にしたところエラーは解決したのですが、なぜexport defaultをやめたことで上記エラーが解決されたのかが分かりません。

TypeScriptのElementとComponentTypeの違いは何なのでしょうか？
export defaultを修正してエラーが解決したということは、この部分が何か関係しているということなのでしょうか？

わかる方がいましたら教えていただきたいです。
よろしくお願いいたします。

Answer 1

HomeScreen.tsx の最後は () を削除して export default HomeScreen; とすれば良いのでは。
HomeScreen は関数そのもの (この場合はたぶん関数コンポーネント) ですが、HomeScreen() は関数を呼び出した結果 (return の中身が省略されてますが、たぶん <Text>Hello, world!</Text> みたいなやつ) になります。

TypeScriptのElementとComponentTypeの違いは何なのでしょうか？

React の Element は例えば <HomeScreen /> や <Text>Hello, world!</Text> のことで、Component は HomeScreen や Text などです。
参考: React ComponentとReact Elementの違い - Qiita
参考: Reactのコンポーネント周りの用語を整理する

Comments

[alpha95]

ご回答いただきありがとうございます。
参考記事もありがとうございます。