我在app.config.globalProperties上挂载了一个对象,对象中包含了一个函数,函数的形参声明的是字符串类型,为什么我在组件内调用时传number类型也不报错。
要全局配置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)
对于这个问题,我们可以使用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类型检查