使用Vue3必会的ts写法

一、defineProps

defineProps<{
    title:string,
    data:number[]
}>()

TS 特有的默认值方式写法
withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值
type Props = {
    title?: string,
    data?: number[]
}
withDefaults(defineProps<Props>(), {
    title: "张三",
    data: () => [1, 2, 3]
})

二、defineEmits

// 父组件
<template>
    <div>
        <Children @myClick="handleClick"></Children>
    </div>
</template>

<script setup lang="ts">
import Children from './Children.vue';
const handleClick = (value:number)=> {
    console.log(value);
}
</script>


  
// 子组件
<template>
    <div>
        <button @click="click123">我传父</button>
    </div>
</template>

<script setup lang="ts">
import { defineEmits } from 'vue';
// const emits = defineEmits(["myClick"]) js写法

//ts写法
const emits = defineEmits<{
    (e:"myClick", value: number): void
}>()

const click123 = () => {
    emits("myClick",88 )
}

</script>

三、ref获取子组件类型写法

<template>
    <div>
        <Children ref="childrenRef"></Children>
    </div>
</template>

<script setup lang="ts">
import Children from './Children.vue';
import { ref } from "vue"

// 重点
const childrenRef = ref<InstanceType<typeof Children> | null>(null)

const handleClick = () => {
    console.log(childrenRef.value?.num); //就有ts推断提示了
}

</script>

<style scoped></style>

四、ts定义全局函数和变量app.config.globalProperties

由于Vue3 没有Prototype 属性 使用 app.config.globalProperties 代替 然后去全局定义变量和声明

在main.ts入口文件中

const app = createApp(App)
app.config.globalProperties.$dev = "dev" //这里随便定义个字符串dev

// 声明文件 不然TS无法正确类型 推导
// 声明要扩充@vue/runtime-core包的声明.
// 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型.
declare module 'vue' {
    export interface ComponentCustomProperties {
        $dev: string
    }
}
 

使用说明

<template>
  <div class="home">
    {{ $dev }} //模版上直接使用即可
  </div>
</template>

<!-- script标签里使用 -->
<script setup lang="ts">
import { onMounted,getCurrentInstance, ComponentInternalInstance } from "vue"

const {proxy} = getCurrentInstance() as ComponentInternalInstance
onMounted(() => {
    console.log(proxy!.$dev);
})
</script>