vue3搭配ts开发

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
  }