vue3中的TS

1.当导入导出类型模块的时候，需要加一个type,并且在vite框架下，不允许使用枚举类型

<script lang="ts" setup>
import type{ Ref } from 'vue'
import { ref } from 'vue'
const count = ref(1)
 const c:Ref<number> = count
</script>
 
<template>
  <div>{{ c.toFixed(2) }}</div>
</template>

2.defineComponent让属性具有ts的特性

defineComponent可以给组件的setup方法准确的参数类型定义.
defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断
defineComponent 可以正确适配无 props、数组 props 等形式
引入 defineComponent() 以正确推断 setup() 组件的参数类型
 

import { defineComponent } from "vue"
export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
 
  setup(props) {
    let x: String = props.message
      console.log(x);
  }
 
})

3.断言as

<script lang="ts" setup>
let x: string | number = 1
 
</script>
 
<template>
  <div>{{ (x as number).toFixed(2) }}</div>
</template>
 
<style lang="css">
/* css 代码 */
</style>

4.在setup中的props类型

（1）通过对象

<script lang="ts" setup>
  const props = defineProps({
    bar: Number
  })
 
  const b: Number = props.bar
</script>

（2）通过泛型

<script lang="ts" setup>
// 基于类型的声明
const props = defineProps<{
  foo: string,
  bar: number
}>()
 
let f: string = props.foo

（3）通过接口

<script lang="ts" setup>
interface Props {
  foo: string,
  bar: number
}
const props = defineProps<Props>()
let f: string = props.foo
 
</script>

（4）?:当不传的时候可以给个默认值

<script lang="ts" setup>
  interface Props {
    foo: string;
    bar?: number //可以不传，传的话就是number
  }
  const { foo, bar = 10 } = defineProps<Props>() //不传的话给个默认值10
</script>

emit

defineEmits

通过泛型定义emit出去的函数的事件名，参数以及返回值

<script lang="ts" setup>
const emit = defineEmits<{  //分别抛出是两个函数
  (e: 'change', id: number) : number  //change是事件名，id是参数，后面：number是函数返回的类型
  (e: 'updata', value: string): void
}>()
</script>

ref类型

通过泛型

<script lang="ts" setup>
import { ref } from 'vue'
import type { Ref } from 'vue'
 
const year: Ref<string | number> = ref('2022') //在里面可以写字符串也可以写数字了
year.value = 2020
</script>

reactive类型

<script lang="ts" setup>
import { reactive } from 'vue'
const list = reactive({id: 100, name: 'felixlu'})
const id: number = list.id
const n: string = list.name
</script>

通过接口定义reactive里面对象的类型

<script lang="ts" setup>
import { reactive } from 'vue'
interface List {
  id: number,
  name: string
}
const list1: List = reactive({id: 100, name: 'felixlu'}) //对象里面的类型必须与接口里面的类型是一致的
</script>

computed类型

import { ref, computed } from 'vue'
import type { ComputedRef } from 'vue'
const count = ref(100)
// addOne: ComputedRef<number>
const addOne = computed <number>(() => count.value + 1)
const a: ComputedRef<number> = addOne
a.value.toFixed(1)
// a.value.indexOf() //数字没有indexof方法
</script>

对象中事件函数的定义

<script lang="ts" setup>
function handleChange(event: Event) {
  console.log((event.target as HTMLInputElement).value); //通过断言event.target是什么类型
  return 2
}
 
function handleClick(event: Event) {
  console.log((event.target as HTMLButtonElement).innerHTML)
}
</script>
 
<template>
  <input type="text" @change="handleChange">
  <!-- <input type="button" @click="handleClick"> -->
  <button @click="handleClick">aa</button>
</template>

provide  inject类型

知识点：InjectionKey

import type { InjectionKey } from 'vue'

 
<script lang="ts" setup>
import { provide, inject,ref } from 'vue'
import type { InjectionKey,Ref } from 'vue'
const key1=Symbol() as InjectionKey<number>//首先断言是InjectionKey 然后标记是number类型
let key2  = Symbol() as InjectionKey <Ref<string>> //因为下面传的是ref类型
const X=ref('100')
provide(key1, 2)
provide(key2,X )
const fee:number|undefined =inject(key1)
const foo:Ref<string>|undefined = inject<Ref<string>>(key2,ref('我是默认值')) //inject后面的类型是默认值的类型
</script>

重点：当通过provide注入对象的写法

import { provide, inject,reactive} from 'vue'
import type { InjectionKey } from 'vue'
//interface List {
  //id: number,
  //name: string
//}这种对象的接口只能对对象进行查改
interface List {
[key:string]:number|string|boolean
} //可以实现对象的增删查改
const list1 = reactive({id: 100, name: 'felixlu'})
const key1=Symbol() as InjectionKey<List>
provide(key1, list1) //注入
const fee:List|undefined =inject(key1)//接收

绑定元素的ref类型

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
const ipt = ref<HTMLInputElement | null>(null)//定义ipt是input或者null类型
onMounted(() => {
  ipt.value?.focus()
})
</script>
<template>
  <input type="text" ref="ipt">
</template>
<style lang="css"> 
/* css 代码 */
</style>