vue+ts 错误随笔

笔记

  • 问题
    • [Parameter 'xxx' implicitly has an 'any' type的解决](#Parameter ‘xxx’ implicitly has an ‘any’ type的解决)
    • [ts ref定义数组,数组遍历报错=>类型"never"上不存在属性"xx"](#ts ref定义数组,数组遍历报错=>类型“never”上不存在属性“xx”)
    • ts项目computed定义数据
    • [Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity.](#Getting a value from the props in root scope of <script setup> will cause the value to lose reactivity.)
    • 函数-可选参数
    • [一个函数没有返回值,此时在 TS 的类型中,应该使用 void 类型](#一个函数没有返回值,此时在 TS 的类型中,应该使用 void 类型)
    • vue3+ts+setup,一键返回顶部

问题

Parameter 'xxx' implicitly has an 'any' type的解决

这句话翻译过来就是参数暗指是any类型

解决:tsconfig.json添加"noImplicitAny": false,

或者 "strict": true,改为false

javascript 复制代码
{
  "compilerOptions": {
    "strict": false, //<---或者修改这个
    "noImplicitAny": false // <-----
  }
}

ts ref定义数组,数组遍历报错=>类型"never"上不存在属性"xx"

javascript 复制代码
const list= ref<transferListItem[]>([]);
//原先是ref([]);报错的,改成上面就行了

ts项目computed定义数据

javascript 复制代码
//重点WritableComputedRef
const data:WritableComputedRef<transferListItem[]>   = computed({
      get() {
        return leftData.value
      },
      set(newValue) {
        leftData.value=newValue
      }
  })
    import { computed, type WritableComputedRef } from 'vue'
  
  // 验证通过
 const textvalue: WritableComputedRef<string> = computed({
    get() {
      return store.textvalue
    },
    set(newValue: string) {
      return store.changeTextvalue(newValue)
    }
  })

Getting a value from the props in root scope of <script setup> will cause the value to lose reactivity.

报错内容翻译为 从' setup() '的根范围的' props '中获取一个值将导致该值失去反应性

这样翻译下来应该就能明白什么意思了,就是我们从props中获取父组件传递数据的时候,不管父组件传递的是不是响应式的数据,在接收的时候要把数据转换为响应式的

javascript 复制代码
//改为这种格式即可
 const {option } = {...props }
 //举个例子:
let {
  leftBtnText,
  rightBtnText,
  leftTitleText,
  rightTitleText,
  placeholderLeft,
  placeholderRight } = { ...props}

函数-可选参数

javascript 复制代码
 // 可选参数:在可选参数名的后面添加 ?(问号)
function mySlice(start: number, end?: number): void {
  console.log('起始索引:', start, '结束索引:', end)
}

一个函数没有返回值,此时在 TS 的类型中,应该使用 void 类型

  • 不写return
  • 写return ,但是后面不接内容
  • 写return undefined
javascript 复制代码
// 如果什么都不写,此时,add 函数的返回值类型为: void
const add = () => {}
 
// 这种写法是明确指定函数返回值类型为 void,与上面不指定返回值类型相同
const add = (): void => {}
​
// 如果指定 返回值类型为 undefined,此时,函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
  // 此处返回的 undefined 是 JS 中的一个值
  return undefined
}

vue3+ts+setup,一键返回顶部

javascript 复制代码
 <div class="anchor-point wh" ref="wrapper" @scroll="onScroll">
 </div>
 //返回到顶部
  function backTo(){
    document.querySelector('.anchor-point').scrollTo({
        top:0,
        behavior:'smooth'
      })
  }
相关推荐
翻滚吧键盘9 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾14 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉22 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
code_YuJun2 小时前
Promise 基础使用
前端·javascript·promise
Codebee2 小时前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
邢同学爱折腾2 小时前
当前端轮播图遇上Electron: 变身一款丝滑的 图片查看器
javascript·electron
xiguolangzi2 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js