TypeScript正确定义组件props与函数参数类型的方法

SideMenu组件非any类型Props定义 #

直接通过interface声明组件接收的所有props字段及对应类型，替换原有的any即可。TS会自动对传入的props做类型校验，避免传参错误。
常规侧边栏组件一般会接收菜单项列表、显隐状态、关闭回调这类属性，你可以根据自己的实际业务需求调整props字段。

SideMenuItem三个参数的明确类型定义 #

三个参数对应单个菜单项的三个属性，可以先抽成统一的MenuItem类型复用，各字段类型如下：

• title：菜单项展示的文本内容，类型为string
• handleOnPress：菜单项点击回调，和TouchableOpacity组件的onPress类型保持一致，为(event?: GestureResponderEvent) => void，该类型从react-native包导入即可
• svg：传入的svg图标元素，属于可直接渲染的React节点，类型为React.ReactNode

完整实现代码 #

import React from 'react';
import { View, Text, TouchableOpacity, GestureResponderEvent, StyleSheet } from 'react-native';

// 单个菜单项类型，供SideMenuItem和SideMenu共同复用
interface MenuItem {
  title: string;
  handleOnPress: (event?: GestureResponderEvent) => void;
  svg: React.ReactNode;
}

// SideMenu组件的Props类型，替换原any
interface SideMenuProps {
  menuItems: MenuItem[];
  // 以下为可扩展的可选props，按实际业务需求增减即可
  visible?: boolean;
  onClose?: () => void;
}

// 样式定义（按你原有业务样式补充即可）
const styles = StyleSheet.create({
  sideMenuItem: {},
  syncView: {},
  sideMenuItemText: {},
})

const SideMenu = (props: SideMenuProps) => {
  const { menuItems } = props;

  // 直接复用MenuItem作为内部组件的props类型
  const SideMenuItem = ({ title, handleOnPress, svg }: MenuItem) => (
    <TouchableOpacity style={styles.sideMenuItem} onPress={handleOnPress}>
      <View style={styles.syncView}>
        {svg}
        <Text style={styles.sideMenuItemText}>{title}</Text>
      </View>
    </TouchableOpacity>
  );

  return (
    <View>
      {menuItems.map((item, idx) => (
        <SideMenuItem key={idx} {...item} />
      ))}
    </View>
  );
};

export default SideMenu;

如果你的SideMenu需要接收其他props，直接在SideMenuProps里补充对应字段和类型即可，不需要额外做特殊处理。

内容的提问来源于stack exchange，提问作者emma