Vue Composition API TypeScript ref 类型不起作用

Posted 2023-02-22

【中文标题】Vue Composition API TypeScript ref 类型不起作用

【英文标题】：Vue Composition API TypeScript ref typing not working

【发布时间】：2020-04-10 04:36:21

【问题描述】：

我正在尝试将 Vue 组合 API 与 TypeScript 一起使用，以便对即将发生的更改更加熟悉，但我遇到了一个小而烦人的错误。当我尝试在下面的脚本中使用“ref”实例化一个键入的值时，我收到“未定义数字”的错误。不过，从我在https://vue-composition-api-rfc.netlify.com/api.html#ref 的打字部分看到的情况来看，我做得正确。但是，如果我删除任何键入“ref”的尝试，它会隐含地将其键入为数字。这是我第一次尝试使用 TypeScript，所以我可能错了，但是因为我知道 x 将是一个数字，所以我认为我应该明确声明类型而不依赖于隐式类型。我在下面发布我的代码 sn-p。我没有已部署的副本，因为这实际上是我尝试做的第一件事，而且我没有考虑尝试为这个错误部署它。任何帮助将不胜感激。

<template>
  <div>
    <p>Hello World</p>
    <p> x </p>
    <p> y </p>
  </div>
</template>

<script lang="ts">
  import  createComponent, ref  from '@vue/composition-api';

  export default createComponent(
    setup() 
      const x = ref<number>(0);
      const y = ref(0);
      return 
        x,
        y,
      
    
  )
</script>

【问题讨论】：

和我合作得很好，你是什么打字稿版本？

你应该使用typescript.nuxtjs.org。

【参考方案1】：

只是把它扔在那里以结束问题，但在完全重新启动项目后，它似乎可以工作。一定是我从设置文档中错误地复制了一些内容。