Vue3应用：在 Vue 3 中输入组件属性

Vue 3 显著扩展了它的功能，最近我一直在使用Composition API和Typescript来开发我的项目，很高兴看到开发人员体验如何通过适当的类型安全性和支持得到提升，同时解决了 Vue 2 臭名昭著的缺点。

// MyComponent.vue
 <script setup lang= "ts" > 
const props = defineProps ({ 
 foo : Boolean
 }) 
</script>

Vue 现在支持仅类型的 prop 声明，方法是为definePropstype 提供文字类型参数，并在不传递任何值的情况下调用该函数。这会将类型推断委托给编译器，无缝生成运行时类型声明：

// MyComponent.vue
 <script setup lang= "ts" > 
const props = defineProps<{ 
 foo : string
   bar?: number
 }>() 
</script>

但问题出在哪里呢？

然而，尽管这种体验看似神奇，但也存在局限性。虽然编译器可以熟练地推断简单情况的类型，但它在处理复杂类型或逻辑密集型类型声明时会遇到挑战，导致 Vue 抛出错误。例如：

// MyComponent.vue - Error
 <script setup lang= "ts" > 
type  SimpleProps = { 
 foo : string , 
  bar?: boolean , 
  bazz?: number
 } 
type  InferredProps = { 
  [S in keyof SimpleProps ]: boolean
 } 
const props = defineProps< InferredProps >() 
</script>

此代码导致 vue 编译器错误：Error: [@vue/compiler-sfc] Failed to resolve index type into finite keys为了解决这个问题，Vue 可以单独推断每个 prop，而不是整个 props 对象：

// MyComponent.vue - Works
 <script setup lang= "ts" > 
type  SimpleProps = { 
 foo : string , 
  bar?: boolean , 
  bazz?: number
 } 
type  InferredProps = { 
  [S in keyof SimpleProps ]: boolean
 } 
type  AcceptableInferredProps = { 
 foo : InferredProps [ 'foo' ], 
  bar?: InferredProps [ 'bar' ], 
  bazz?: InferredProps [ 'bazz' ] 
} 
const props = defineProps< AcceptableInferredProps >() 
</script>

类似地，由于同样的潜在问题，使用接口语法时也会出现错误：

// MyComponent.vue - Error
 <script setup lang= "ts" > 
interface  SimpleProps { 
 foo : string , 
  bar?: boolean , 
  bazz?: number
 } 
type  InferredProps = { 
  [S in keyof SimpleProps ]: boolean
 } 
interface  Props  extends  InferredProps { 
 qux : string
 } 
const props = defineProps< Props >() 
</script>