const App: () => React $ Node = () => {chút}: hướng dẫn này có nghĩa là gì?

trên react-native init ProjectName, tệp ứng dụng chính App.jschứa khai báo của một thành phần theo cách sau:

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

Nó có nghĩa là gì hướng dẫn này?

Ý tôi là, tôi đã quen với thành phần được định nghĩa là const App = () => {...}, vì vậy tôi không hiểu, đặc biệt, biểu thức ở giữa : () => React$Node.

Định nghĩa kiểu của nó từ Flow, có nghĩa là Ứng dụng không đổi có chức năng loại và nó trả về ReactNode.

ReactNode là một trong những loại sau: ReactChild | ReactFragment | ReactPortal | boolean | null | undefined

Điều này có nghĩa là ứng dụng có thể trả về, bất kỳ JSX hợp lệ nào (phản ứng tự nhiên mọi thứ từ View, Text, .etc), ReactFragment, React.Portal, boolean, null, không xác định

Nếu bạn bối rối về ký hiệu đô la, đây là một liên kết với lời giải thích. https://www.saltycrane.com/flow-type-cheat-sheet/latest/

Có các phần riêng biệt cho các loại "riêng tư" hoặc "ma thuật" với $ trong tên. Xem ghi chú ở đây và bình luận ở đây. Cập nhật: Một số loại hiện được ghi lại ở đây.

Để dễ dàng, bạn có thể nghĩ về nó như Nodetừ React(nghĩ về nó như phạm vi / không gian tên)

React $ Node là một loại được định nghĩa trong Reac.js

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

Nó cũng là một kiểu khai báo thành phần Ứng dụng như một hàm nhưng bạn có thể thay đổi nó thành

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
    }
});

Đừng quên xóa câu lệnh Xuất ứng dụng mặc định trong dòng cuối cùng.