typescript 使用defineProps

在 TypeScript 中，可以使用 `defineProps` 函数来定义组件的属性。`defineProps` 是 Vue 3 Composition API 提供的一个工具函数，用于声明组件的属性类型和验证规则。

下面是一个使用 `defineProps` 的示例:

import { defineComponent, defineProps } from 'vue';

interface MyComponentProps {
  name: string;
  age: number;
}

const MyComponent = defineComponent({
  props: defineProps<MyComponentProps>(),
  setup(props) {
    // 在这里可以使用 props.name 和 props.age 进行组件逻辑的处理
    // ...
  }
});

在上面的示例中，我们首先定义了一个 `MyComponentProps` 接口，指定了 `name` 和 `age` 两个属性的类型。然后，在组件定义中，我们使用 `defineProps` 函数来声明组件的属性，并将其类型设置为 `MyComponentProps`。通过这样的方式，TypeScript 将能够对组件属性进行类型检查和推断。

在组件的 `setup` 函数中，我们可以通过 `props` 参数访问到组件的属性，以便在组件逻辑中使用它们。

这是使用 `defineProps` 定义 TypeScript 类型的一种常见方式。当你在组件中使用 `props` 属性时，TypeScript 将能够根据定义的类型提供正确的代码补全和类型检查，以帮助你编写更可靠的代码。