在 Vue 3 中，如果你使用 <script setup> 语法，可以使用 defineProps 来声明组件的 props。对于函数类型的 prop，你可以这样定义：

<script setup lang="ts">
import { defineProps } from 'vue'

// 定义 props 类型
type Props = {
  setVisible: () => void;
}

// 使用 defineProps 声明 props
const props = defineProps<Props>();
</script>

如果你不使用 <script setup> 语法，而是使用普通的 <script> 标签，你可以这样定义：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    setVisible: {
      type: Function as () => void,
      required: true
    }
  },
  // 其他组件选项...
})
</script>

在这两种情况下，你都声明了一个名为 setVisible 的 prop，它是一个没有参数也没有返回值的函数。在组件内部，你可以通过 props.setVisible 来访问这个函数，并在需要的时候调用它。

还想申明一个属性isOpen，类型是布尔值，并且默认是false，应该如何写呢？

如果你想在 Vue 3 的 <script setup> 语法中声明一个名为 isOpen 的布尔类型属性，并且默认值为 false，同时还有一个名为 setVisible 的函数类型属性，你可以这样写：

<script setup lang="ts">
import { defineProps } from 'vue'

// 定义 props 类型
type Props = {
  setVisible: () => void;
  isOpen: boolean;
}

// 使用 defineProps 声明 props，并设置默认值
const props = withDefaults(defineProps<Props>(), {
  isOpen: false
})
</script>

在这里，withDefaults 函数用于为 props 设置默认值。

如果你使用的是普通的 <script> 标签，可以这样定义：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    setVisible: {
      type: Function as () => void,
      required: true
    },
    isOpen: {
      type: Boolean,
     default: false
    }
  },
  // 其他组件选项...
})
</script>

在这个例子中，isOpen prop 被定义为一个布尔类型，并且通过 default 选项指定了默认值为 false。这样，如果父组件没有为 isOpen 提供值，它将默认为 false。

如果还想申明一个visible，要求是必传的呢？

如果你想在 Vue 3 的 <script setup> 语法中声明一个名为 visible 的必传属性，你可以这样写：

<script setup lang="ts">
import { defineProps } from 'vue'

// 定义 props 类型
type Props = {
  setVisible: () => void;
  isOpen: boolean;
  visible: boolean; // 必传的布尔类型属性
}

// 使用 defineProps 声明 props，并设置默认值
const props = withDefaults(defineProps<Props>(), {
  isOpen: false
})
</script>

在 TypeScript 中，所有的属性默认都是必传的，除非你为它们提供了一个默认值或者将它们标记为可选（使用 ?）。在上面的代码中，visible 没有默认值，也没有标记为可选，因此它是必传的。

如果你使用的是普通的 <script> 标签，可以这样定义：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    setVisible: {
      type: Function as () => void,
      required: true
    },
    isOpen: {
      type: Boolean,
      default: false
    },
    visible: {
      type: Boolean,
      required: true // 设置为必传
    }
  },
  // 其他组件选项...
})
</script>

在这个例子中，visible prop 被定义为一个布尔类型，并且通过 required 选项指定了它是必传的。这意味着父组件在使用这个子组件时必须提供 visible 属性的值，否则 Vue 会在控制台中发出警告。

自定义类型PropType

在 Vue 3 中，使用 Composition API 时，可以通过 defineProps 函数来定义组件的 props。如果你希望在 defineProps 中指定 props 的类型，通常是通过 TypeScript 的类型或接口来实现的。

首先，你需要定义一个 TypeScript 类型或接口来描述你的 prop。例如，如果你有一个名为 RiskReportMsgBody 的接口用于描述 riskMsgData prop 的结构，你可以像下面这样定义它：

interface RiskReportMsgBody {
  // 定义属性和类型
  message: string;
  level: number;
}

// 在 Vue 组件中
const props = defineProps({
  riskMsgData: Object as PropType<RiskReportMsgBody>,
});

在这个例子中，RiskReportMsgBody 是一个 TypeScript 接口，它定义了 riskMsgData prop 应有的结构。使用 Object as PropType<RiskReportMsgBody> 是 TypeScript 的类型断言，它告诉 TypeScript，我们期望这个 prop 是一个对象，且这个对象符合 RiskReportMsgBody 接口的结构。PropType 是 Vue 3 提供的一个泛型类型，用于定义 prop 的类型。

如果你的 prop 是其他类型（例如：String, Number, Boolean, Array），你也可以使用类似的方式来指定类型：

const props = defineProps({
  riskLevel: Number,
  riskMessages: Array as PropType<string[]>,
});

这里的 riskLevel 是一个简单的 Number 类型的 prop，而 riskMessages 则是一个字符串数组，我们通过 Array as PropType<string[]> 来指定它的类型。

需要注意的是，使用 TypeScript 来定义 prop 类型主要是为了在开发过程中提供类型检查和代码提示功能，并不会在运行时对 prop 的实际类型进行检查。如果你需要在运行时验证 prop 的类型，你仍然需要使用 Vue 的 prop 验证功能。