TS 踩的那些坑

80 阅读1分钟

插件问题

let count:string = ref(4) //不报错 也不提示
const addCount = () => {
  count.value++ //也不报错 也不提示
}

解决方法

使用 Volar 插件就能解决类型与传入不符的问题

参数非必传,对参数判断的问题

image.png

解决方法

因为 val 不是必传参数

//两种判断方法
const reFun = (val?: number):string => {
  if(<number> val <= 12 || <number>val >0) {
  // if( val != undefined && (val > 0 || val <= 12) ) {
    return `月份是${val}`
  }
  return '请输入正确的月份'
}
//或者为 val 设置默认值
const reFun = (val: number = 0):string => {
  if(val <=12 || val > 0) {
    return `月份是${val}`
  }
  return '请输入正确的月份'
}

判断异步返回值问题

image.png

async function getUserInfoList() {
    //解决方法1:定义接口类型,包含期望的属性和类型
    let val = <HttpResponse>await add('成功')
    //解决方法2:指定类型
    let res = await new Promise<{status: number; message: string}>(function (reslove) {
      reslove({status: 200, message: '成功'}) 
    })
    if(val.status === 200) {
      console.log(val,'val')
    }
    if(res.status === 200) {
      console.log(res,'res')
    }
  }
  getUserInfoList()

  function add(val: string){
    return new Promise(function (reslove, reject) {
      let code = val == '成功'? 200: 404
      setTimeout(() => {
        if(code === 200) {reslove({status: code, message: val})}
        if(code === 404) {reject({status: code, message: val})}
      }, 1000);
    })
  }

引入问题

未标题-1.png

//解决方法
npm i --save-dev @types/validator