初步使用vue3+ts的错误

最新推荐文章于 2024-08-30 14:16:38 发布

原创最新推荐文章于 2024-08-30 14:16:38 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript

bug制造同时被 2 个专栏收录

4 篇文章

订阅专栏

vue3+ts

2 篇文章

订阅专栏

作者在尝试使用Vue3和TypeScript进行项目练习时遇到了一些问题，包括使用import引入模块时的报错，以及在处理数组时的类型定义错误。通过学习，作者发现需要为变量指定正确的类型，如使用`any[]`。另外，还介绍了Vue2与Vue3中`nextTick`的用法差异。最后，作者提醒注意在Vue3中定义的数据应放在`onMounted`之外。

最近在练手vue3的项目，然后就接触了ts。其实并没有使用过ts也没有看过文档，就开始动手了，结果就是一堆报错。

1、使用import引入会报错，找不到模块

还没解决，后期应该解决再更新。

2、数组的定义

一开始使用js的写法写了以下代码

const list= [{name:'111',text:'22222'},{name:'3333',text:'22222'}]
const temp = []
onMounted(() => {

   list.forEach(async (item:any,index)=>{
       temp.push(item)
    })
  
 })

输出报错：Argument of type ‘‘ is not assignable to parameter of type ‘never‘.

然后，我就在想是不是要用ref或者reactive定义，没错，此刻我还觉得是我vue3的语法错误，直到我使用ref和reactive依然报错时，我才意识到可能是ts语法的错误。

然后就是一顿百度，才知道，原来ts初始化的时候要完善一下定义类型，我就给item加上了类型，还是报错，我就把目光移向了我定义的数组，一顿操作：

 const list: any[] = [{name:'111',text:'22222'},{name:'3333',text:'22222'}]
const temp: any[] = []
onMounted(() => {
   list.forEach(async (item:any,index)=>{
          temp.push(item)
    })

 })
return{
list,temp
}

不报错了！此处vue3需要注意的是，定义的数据要放在onMounted的外面，否则可能访问不到。

3、使用nextTick

//vue2的写法
this. $nextTick(()=>{
})

//vue3的写法
import {defineComponent, ref, reactive,onMounted,nextTick} from 'vue';
 export default defineComponent({
       setup() {
             nextTick(()=>{
            })

        }
})