TS+VUE3

1.基于vite创建VUE3+TS模板

 2.安装VScode相关插件（均已更名）

编写的时候报错，打包的时候报错。

 3.给ref进行注解

 

 4.为reacrive标注类型

 

 5.为computed标注类型

 代码提示

 

 6.为事件函数标注类型

 

 7.给模板标注类型

 

 

8.对象的非空值处理

这个主要是对应的是7中的模板中的

 

 

 

 

 9.为组件的props标注类型（富传子）

 在子组件中进行编写

 

 10.为组件emits标注类型（子传父）

 在子组件中进行编写

 

 11.类型声明文件

 

 

 

 

 

 

 

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
// 简单数据直接使用类型推导
const num = ref(100)
// 初始值是数值，那么就不能再赋值其他类型
// num.value='22'
console.log(num.value)

// 复杂数据使用泛型指定类型
const num1 = ref<number | string>(123)
num1.value = 11
console.log(num1.value)
num1.value = '111'
console.log(num1.value);

// 类型别名
type ITEM = {
    id: string,
    name: string,
    price: number
}
// 使用泛型再加类型别名
const num2 = ref<ITEM[]>()
num2.value = [{
    id: '1',
    name: 'q',
    price: 11
}, {
    id: '2',
    name: '2',
    price: 22
}]
console.log(num2.value[0]?.id);

console.log('___________________________________-');
// reactive,简单数据直接进行类型推导
const num3 = reactive({
    username: '',
    password: ''
})
// 复杂数据类型使用类型别名的方式
type From = {
    username: string,
    password: string,
    age?: number
}
const num4: From = reactive({
    username: '',
    password: '2',
})
console.log(num4.password);


//计算属性
// 为ref标注类型
type item = {
    id: number,
    name: number,
    price: number
}

let list = ref<item[]>([])
list.value = [{
    id: 12,
    name: 123,
    price: 89999
}, {
    id: 12,
    name: 123,
    price: 89999
}]
//基于list筛选出大于100商品价格的商品
const filterList = computed(() => list.value.filter(item => item.price > 1000))

const dianji = (e: Event) => {
    console.log((e.target as HTMLButtonElement).innerHTML);

}

//给模板标注类型
const inputRef = ref<HTMLInputElement | null>(null)

onMounted(() => {
    console.log(inputRef.value?.innerHTML);

})

//对象的非空值处理

//导入共享类型
import type {Goods} from './types/data'
let good: Goods={
    id:'qq',
    name:'22'
}
</script>

<template>
    <!-- 模板 -->
    <div>
        <ul>
            <li v-for="item in filterList" :key="item.id">
                {{ item.id }}+{{ item.name }}+{{ item.price }}
            </li>
        </ul>
        <input>
        <button @click="dianji">click</button>
        <input type="text" ref="inputRef">
    </div>
</template>

<style scoped></style>