vue组件中没有ts语法报错提示

我在app.config.globalProperties上挂载了一个对象,对象中包含了一个函数,函数的形参声明的是字符串类型,为什么我在组件内调用时传number类型也不报错。

img

img

  • 这篇博客: 框架技术Vue ---- watch监听、组件生命周期和数据共享、全局注册属性中的 main.js通过app.config.globalProperties全局挂载 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 要全局配置axios,需要在main.js文件中,使用app.config.globalProperties进行全局挂载

    可以通过defaults.baseURL指定相对路径,使用pp.config.globalProperties.$http = axios挂载axios

    然后组件就可以通过this.$http.get(‘相对路径’) 发起请求 这里的名称是自定义的,可以使用ajax

    import { createApp } from 'vue'
    import App from './App.vue'
    import './index.css'
    import './assets/css/bootstrap.css'
    
    //导入axios
    import axios from 'axios'
    
    const spa_app = createApp(App)
    
    //在mount之前进行配置
    //声明请求的相对路径
    axios.defaults.baseURL = 'https://www.escook.cn/api'
    
    //全局注册挂载
    spa_app.config.globalProperties.$ajax = axios
    
    spa_app.mount('#app')
    

    相当于先使用axios的default的baseURL定义相对路径,然后将axios注册为全局的属性,这里在组件中可以使用this进行调用, 注意是defaults,不要少写s

    const res = this.$ajax.get('/finduser/'+ newVal)
    
  • 以下回答由chatgpt基于相关博客总结生成:

    对于这个问题,我们可以使用TypeScript的类型注解来使Vue组件能够正确地识别并提示语法错误。

    具体地说,我们可以将函数的形参声明为特定类型,然后在Vue组件中使用该函数时,传入相应类型的参数。这样,如果有任何类型不匹配的情况,TypeScript会自动给出报错提示。

    以一个简单的案例为例,假设我们有一个包含函数的对象:

    interface MyObject {
      myFunction(str: string): void;
    }
    
    const myObject: MyObject = {
      myFunction(str: string) {
        console.log(str);
      },
    };
    

    我们可以在Vue组件中使用它:

    <template>
      <div>
        <button @click="handleClick">Click me</button>
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent } from 'vue';
    
    export default defineComponent({
      setup() {
        const handleClick = () => {
          // 此处传入类型错误的参数会提示报错
          myObject.myFunction(123);
        };
    
        return {
          handleClick,
        };
      },
    });
    </script>
    

    在这个例子中,我们定义了一个只接受字符串类型参数的函数myFunction,并将它存储在了一个类型为MyObject的对象中。在Vue组件中,我们使用defineComponent函数来定义了一个setup函数,并在其中使用了一个类型错误的参数来调用该函数。此时,TypeScript会自动给出报错提示,指出传入的参数类型不匹配。

    除了在组件内使用TypeScript的类型注解之外,我们还可以通过配置tsconfig.json文件来进一步优化代码。例如,我们可以将"strict": true选项设置为true,以启用所有严格的类型检查。我们也可以设置"noImplicitAny": true,以禁止使用隐式的any类型,并要求必须显示地指定变量的类型。

    综上所述,无论是在组件内使用类型注解,还是通过配置tsconfig.json文件来优化代码,都可以提高Vue组件中使用TypeScript的语法报错提示的准确性和可靠性。

是不是没有开TS类型检查