const App: () => React $ Node = () => {…}: que signifie cette instruction?

le react-native init ProjectName, le fichier d'application principal App.jscontient la déclaration d'un composant de la manière suivante:

const App: () => React$Node = () => {...}

Que signifie cette instruction?

Je veux dire, je suis habitué aux composants définis comme const App = () => {...}, donc je ne comprends pas, en particulier, l'expression entre les deux : () => React$Node.

Sa définition de type à partir de Flow, cela signifie que la constante App est de type fonction et elle renvoie ReactNode.

ReactNode est l'un de ces types: ReactChild | ReactFragment | ReactPortal | boolean | null | undefined

Cela signifie que la fonction App peut renvoyer, n'importe quel JSX valide (dans React natif, c'est n'importe quoi de View, Text, .etc), ReactFragment, React.Portal, boolean, null, undefined

Si vous êtes confus au sujet du signe dollar, voici un lien avec l'explication. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Il existe des sections distinctes pour les types "privés" ou "magiques" avec un $ dans le nom. Voir la note ici et commenter ici. Mise à jour: certains de ces types sont désormais documentés ici.

Pour facile , vous pouvez penser comme Nodede React(penser comme champ / espace de noms)

Il s'agit également d'un type de déclaration du composant App en tant que fonction, mais vous pouvez le modifier en

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>Hello World!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});

N'oubliez pas de supprimer la déclaration Exporter l'application par défaut à la dernière ligne.

React $ Node est un type défini dans react.js

declare type React$Node =
  | null
  | boolean
  | number
  | string
  | React$Element<any>
  | React$Portal
  | Iterable<?React$Node>;