Vue3.2 + TS 组合式API强类型支持

一开始使用TS不太习惯，但是用了一段时间，发现有类型的支持，书写起来真是爽歪歪，下面介绍几个TS初步上手时解决的类型支持的问题
1、父子组件通过prop传参，在子组件中强化类型支持
父组件向子组件传值，子组件通过 defineProps接收值，有两种方式可以强化类型：
1.1、在子组件中通过PropType 修饰，并传入泛型，这时候会发现，使用的时候写一个点，后面的属性就提示出来了

image.png

image.png

1.2、还可以定义一个type，在 defineProps 传入这个泛型type：

image.png

另外补充一下：如果要设置默认值 需要使用withDefaults:

type Props = {
  dataInfo?: DataInfo;
};
// const props = defineProps();
withDefaults(defineProps(), {
  dataInfo: ()=> {return {title: '默认title',id: '默认值id'}}
})

2、vuex4 在项目中使用类型支持

image.png

image.png

image.png

用代码简单实现了一个改变登录状态的小demo
父组件切换登录状态，子组件更新登录状态

123123.gif

完整代码：
store->index.ts 文件

import { createStore, Store } from "vuex";

//从vue 中引入一个 InjectionKey 
import {InjectionKey} from 'vue'

//使用全局唯一的值创建一个injectionKey
export const injectionKey: InjectionKey> = Symbol()

export type State = {
    isLogin: boolean
}

export default createStore({
  state: {
    isLogin: false,
  },
  mutations: {
    changeLoginState(state, payload) {
        state.isLogin = payload
    },
  },
});

main.ts 文件

import { createApp } from 'vue'
import App from './App.vue'
import store, { injectionKey } from './store'

//插件安装时 作为参数传入 injectionKey
createApp(App).use(store, injectionKey).mount('#app')

Child.vue 文件

App.vue