javascript - React Native Arrow 语法解释

Question

我正在查看一些代码，但无法找到此箭头函数语法的分割。有人可以帮忙解释一下参数 ({ match, onOpen }: MatchListItemProps) 的含义吗？

import React from 'react';
import { ListItem } from 'react-native-elements';
import { StyleSheet } from 'react-native';

type MatchListItemProps = {
  match: User,
  onOpen: Function
};

const styles = StyleSheet.create({});

const TestScreen = ({ match, onOpen }: MatchListItemProps) => {
  const { name, image, message } = match;
  return (....

Answer 1

Could someone help explain what the parameters ({ match, onOpen }: MatchListItemProps)mean?

此代码使用 typescript 和解构。让我先把它们去掉，然后再把它们添加回来。这里是纯 JavaScript 代码，没有解构:

const TestScreen = (props) => {
  let match = props.match;
  let onOpen = props.onOpen;

现在我将在 typescript 中添加回来。变量后面可以跟一个冒号，然后是一个类型。此信息用于在编译时捕获类型错误。

const TestScreen = (props: MatchListItemProps) => {
  let match = props.match;
  let onOpen = props.onOpen;

然后添加解构。这是从对象中提取值并将它们分配给局部变量的简写:

const TestScreen = ({ match, onOpen }: MatchListItemProps) => {