React Native TSX中如何不使用any定义函数类型的Props？

TypeScript 中可以通过 函数类型签名 定义Props中的函数类型，语法为(参数名: 参数类型, ...) => 返回值类型，完全可以替代any实现严格的静态类型校验。

针对你的场景的修改方案 #

根据你代码里的实际调用逻辑：

• scanCallback 接收两个字符串类型的参数（扫码结果内容、码的类型），无返回值
• OnCloseModal 是关闭弹窗的回调函数，无参数无返回值

你只需要把接口里的any替换为对应的函数类型即可，修改后的完整代码如下：

import React from 'react'
import { View, StyleSheet, Text, Modal, TouchableOpacity } from 'react-native';
import { RNCamera } from 'react-native-camera';

interface PropTypes {
  isVisible : boolean,
  // 定义接收两个string参数、无返回值的函数类型
  scanCallback: (data: string, type: string) => void,
  // 定义无参数、无返回值的函数类型
  OnCloseModal: () => void
}


const ScannerModal = ({isVisible, scanCallback, OnCloseModal}: PropTypes) => {
  if (!isVisible) {
    return null
  }
  
  const onBarCodeRead = (e : {data : string, type: string}) => {
    scanCallback(e.data, e.type)
  }
  return (
      // 原有视图逻辑保持不变
  )
}

扩展说明 #

• 如果函数有返回值，直接把void替换为对应的返回类型即可，比如需要返回布尔值就写() => boolean
• 如果该函数是可选Props，在属性名后加?即可，比如scanCallback?: (data: string, type: string) => void，调用时建议加可选链scanCallback?.(e.data, e.type)避免空值报错
• 若需要运行时类型校验，可以和PropTypes搭配使用，和TypeScript的静态类型校验互不冲突

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