在打字稿中提取道具以分离Vue组合API中的模块

Posted 2023-02-22

【中文标题】在打字稿中提取道具以分离Vue组合API中的模块

【英文标题】：Extracting props to separate module in Vue composition API in typescript

【发布时间】：2021-05-10 01:45:26

【问题描述】：

我正在尝试将一些旧代码从 Vue 选项 API + JS 移植到 Vue 组合 API + TS，并且我有以下 mixin：

export default 
  props: 
    time: 
      default: 1,
      type: String | Number,
    ,
    iterations: 
      default: 1,
      type: String | Number,
    ,
  ,
  data: () => (
    animation: '',
  ),
  methods: 
    animate() 
      this.animation = `move $this.times ease-in-out $this.iterations forwards`
    ,
  ,

现在我很难找到正确的方式来键入道具，同时保留默认值和反应性。例如，在这个例子中，默认值会丢失：

export default (props: 
  time: string | number
  iterations: string | number
) => 
  const animation = ref('')
  const animate = () => 
    animation.value = `move $props.times ease-in-out $props.iterations forwards`
  
  return 
    animation,
    animate,
  

而在这里我失去了反应性，因为我解构了 props 参数：

export default (
  time = 1,
  iterations = 1,
: 
  time: string | number
  iterations: string | number
) => 
  const animation = ref('')
  const animate = () => 
    animation.value = `move $times ease-in-out $iterations forwards`
  
  return 
    animation,
    animate,
  

我该如何解决这个问题？

【参考方案1】：

我会选择第二种解决方案并为 props 对象添加一个导出

export const moduleProps 
  time: 
    default: 1,
    type: [String, Number],
  ,
  iterations: 
    default: 1,
    type: [String, Number],
  ,

有点多余，但很有效