vue3在ts中定义ref,reactive
import {ref , reactive} from 'vue';
// import type { User } from '@/api/api-interface/home' // 可以将泛型定义在ts文件引入
// <>里面就是基本类型那些
const myRef = ref<number>(0)
interface User {
name: string;
age: number;
}
// ref定义对象,ref也可以定义对象数组这些的
const myUser = ref<User>({
name: 'xxxx',
age: 24,
text: '你好,我今年24岁了'
})
// 定义对象
const user: User = reactive<User>({
name: 'John Doe',
age: 30
});
// 定义数组
const arr = reactive<number[]>([1, 2, 3, 4])
// 定义对象数组
const arrTwo = reactive<User[]>([{
name: 'xxxx',
age: 24,
text: '你好,我今年24岁了'
}])
vue3在ts中定义函数
import { ref} from 'vue'
const myValue = ref<number>(0)
// 有返回值
const myValueAge = (age: number): string => {
myValue.value = age;
return '你的年纪'+myValue.value
}
// 没有返回值
const myValueAgeTwo = (age: number): void=> {
myValue.value = age;
}
vue3在ts中报找不到vue模块
开发vue+ts的项目时,ts会提示找不到模块vue或起相应的类型声明
ts文件无法识别.vue,虽然可以编译可以运行,但是红色的波浪看着让人不舒服.
解决方案
在src的目录下创建env.d.ts
在下面进行以下声明
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}