前端乱码-TypeScript范型

最近在用van-tabs写一个业务逻辑，就是点击tab的时候进行弹窗验证，确认的时候切换，取消的时候啥也不干。

之前用一种很绕的逻辑处理了一下，特别的不优雅，不赘述了。

昨天又有一个相同的场景要使用到这逻辑，看着之前场景写的代码，感觉挺傻逼的，遂福至心灵，为什么不用promise来处理呢？

在vant的文档有写，通过 before-change 属性可以在切换标签前执行特定的逻辑，文档中也有Promise的例子。

const beforeChange = (index) => { 
    // 返回 false 表示阻止此次切换 
    if (index === 1) { 
        return false; 
    } 
    // 返回 Promise 来执行异步逻辑 
    return new Promise((resolve) => { 
    // 在 resolve 函数中返回 true 或 false 
        resolve(index !== 3); 
    }); 
};

业务代码改造了下，就是把resove和reject方法赋值给变量后使用，等最终的结果返回就处理tab的跳转。

const beforeTabChange = (name: string) => {
  if(name === 'curMonth'){
    Object.assign(timeParams, curMonthDate)
    return true
  }else if(name === 'lastMonth'){
    Object.assign(timeParams, lastMonthDate)
    return true
  }else {
    return new Promise((resolve,reject)=>{
      popResolve.value=resolve
      popReject.value=reject
      showPop.value = true
    })
  }
}

但是，这有报错，我的返回类型不符合规定

一通乱搜，没啥头绪。

追根溯源。

TypeScript菜🐔一时看的迷茫。

。。。今天下班回来洗完澡继续看这个问题。。。

福至心灵

const beforeTabChange = (name: string) => {
  if(name === 'curMonth'){
    Object.assign(timeParams, curMonthDate)
    return true
  }else if(name === 'lastMonth'){
    Object.assign(timeParams, lastMonthDate)
    return true
  }else {
    return new Promise<boolean>((resolve,reject)=>{
      popResolve.value=resolve
      popReject.value=reject
      showPop.value = true
    })
  }
}

就是在Promise后加上范型约束，申明返回参数是Promise<boolean>

睡觉！