vue3+ts模板语法中使用javascript 表达式，typescript 类型检测时找不到自定义的全局属性(app.config.globalProperties.$_，如何解决？

Question

vue3+ts模板语法中使用javascript 表达式，typescript 类型检测时找不到自定义的全局属性(app.config.globalProperties.$_)。

• 情况比较复杂，我直接上代码

  //我的.vue文件
          <el-form-item
            label="考试时间"
            prop="daterange"
            :rules="[
              { required:true,trigger: 'change' ,validator(_rule,value,callback){
                if(!value){
                  callback(new Error('请输入时间'))
                }else if($_.isEqual(value,['',''])){
                  callback(new Error('请输入时间'))
                }else{
                  callback()
                }
              }},
            ]"
          >
            <el-date-picker
              v-model="appraisalFrom.daterange"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
  

  其中的$_.isEqual(value,['',''])可以按照预期执行，同时 console.log也没有任何错误。
  这里仅仅提示错误信息 找不到名称“$_”。ts(2304) any，也就是说 ts 还不认识$_。但是我已经配置，如下：

  //utils/custom.d.ts
  import _ from 'lodash'
  declare module '@vue/runtime-core'{
  interface ComponentCustomProperties {
    $_: typeof _
  }
  }
  export {}
  

  //main.ts
  import _ from 'lodash'
  //... 省略
  app.config.globalProperties.$_ = _
  //... 省略
  

  按照我之前所说， 程序已经按照预期执行，$_.isEqual()执行没有问题，逻辑也正确，就是vscode不认识$_。虽然不影响执行，但是看起里有个红色的浪线，很是不爽

• 以上是在 js 表达式中，ts类型检测器 不认识$_。但是，神奇的是在 vue 的内联事件处理器中却好用。

  <el-button
  @click="()=>{
    testedDialog = true
    $_.isEqual([''], ['',''])
  }">
   <template #icon>
     <ep-plus />
   </template>
   添加被考核人
  </el-button>
  

  同样的配置，此处的$_却正确，ts 类型检测器也认识。截图如下：
  

  

Answer 1

该回答引用自GPT-3.5,由博主GISer Liu编写：

根据你的描述，问题出现在 TypeScript 类型检测器无法识别全局属性 $_，导致在模板中使用时出现错误提示。虽然代码能够正常执行，但在 VS Code 中出现红色波浪线提示，影响了代码的可读性和美观性。

为了解决这个问题，你已经进行了如下配置：

1. 在 utils/custom.d.ts 文件中，声明了 $_ 全局属性，并指定了其类型为 lodash 库的类型。
2. 在 main.ts 中，将 _ 注入到了 Vue 实例的全局属性 $_ 中。

但是，尽管代码能够正常执行，TypeScript 类型检测器仍然无法正确识别 $_，在模板中会报错。

要解决这个问题，可以尝试以下方法：

1. 类型声明合并问题：首先确保 utils/custom.d.ts 文件中的类型声明能够正确合并到 Vue 的类型声明中。你可以尝试在声明 ComponentCustomProperties 时使用全局的 VueConstructor 类型，以确保正确的类型合并。

import _ from 'lodash';
import { VueConstructor } from 'vue';

declare module 'vue' {
  interface ComponentCustomProperties {
    $_: typeof _;
  }
}

1. 全局属性注入方式：检查 main.ts 中全局属性的注入方式是否正确。确认 app.config.globalProperties.$_ = _; 是在 Vue 实例创建之后执行的。可以尝试在 main.ts 的 createApp 函数之后执行该代码，以确保 Vue 实例已经创建。

import { createApp } from 'vue';
import App from './App.vue';
import _ from 'lodash';

const app = createApp(App);

// other configurations...

app.config.globalProperties.$_ = _;

app.mount('#app');

1. VS Code 插件问题：有时候 VS Code 的 TypeScript 插件可能会出现缓存问题，导致无法正确识别类型。你可以尝试重启 VS Code，或者清除 TypeScript 缓存，看是否能够解决问题。

如果以上方法都无法解决问题，可以考虑将 $_ 替换为其他不会产生类型检测问题的变量名，以规避 TypeScript 类型检测器的限制。

如果该回答解决了您的问题，请采纳！如果没有，请参考以下方案进行修订