一開始使用TS不太習(xí)慣泛释，但是用了一段時(shí)間墩划，發(fā)現(xiàn)有類型的支持，書寫起來真是爽歪歪约谈，下面介紹幾個(gè)TS初步上手時(shí)解決的類型支持的問題
1岛都、父子組件通過prop傳參蚤认，在子組件中強(qiáng)化類型支持
父組件向子組件傳值凹蜈，子組件通過 defineProps接收值限寞，有兩種方式可以強(qiáng)化類型：
1.1、在子組件中通過PropType 修飾踪区，并傳入泛型昆烁，這時(shí)候會(huì)發(fā)現(xiàn)吊骤，使用的時(shí)候?qū)懸粋€(gè)點(diǎn)缎岗，后面的屬性就提示出來了

image.png

image.png

image.png

另外補(bǔ)充一下：如果要設(shè)置默認(rèn)值 需要使用withDefaults:

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

2传泊、vuex4 在項(xiàng)目中使用類型支持

image.png

image.png

image.png

用代碼簡單實(shí)現(xiàn)了一個(gè)改變登錄狀態(tài)的小demo
父組件切換登錄狀態(tài)，子組件更新登錄狀態(tài)

123123.gif

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

import { createStore, Store } from "vuex";

//從vue 中引入一個(gè) InjectionKey 
import {InjectionKey} from 'vue'

//使用全局唯一的值創(chuàng)建一個(gè)injectionKey
export const injectionKey: InjectionKey<Store<State>> = 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'

//插件安裝時(shí) 作為參數(shù)傳入 injectionKey
createApp(App).use(store, injectionKey).mount('#app')

Child.vue 文件

<template>
  <div style="background-color:#42b983;">
    <h2>這是子組件</h2>
    <h3>{{ dataInfo?.title }}</h3>
    <h3>id: {{ dataInfo?.id }}</h3>
    <h4>當(dāng)前登錄狀態(tài)：{{isLogin ? '已登錄' : '未登錄'}}</h4>
  </div>
</template>
<script lang="ts" setup>
import { computed, defineProps, PropType, toRefs } from "vue";
import { useStore } from "vuex";
import { injectionKey } from "../store";
export interface DataInfo {
  title: string;
  id: string;
}
//在組件中使用的時(shí)候 傳入 injectionKey
const store = useStore(injectionKey)
const isLogin = computed(()=> store.state.isLogin)
const props = defineProps({
  dataInfo: Object as PropType<DataInfo>,
});
const { dataInfo } = toRefs(props);
</script>

App.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from "./components/HelloWorld.vue";
import Child, { DataInfo } from "./components/Child.vue";
import { reactive } from "vue";
import { useStore } from "vuex";
import { injectionKey } from "./store";

const store = useStore(injectionKey);

let state = reactive<{ dataInfo: DataInfo }>({
  dataInfo: { title: "這是標(biāo)題", id: "123132123" },
});

const login = () => {
  store.commit("changeLoginState", true);
};

const logout = () => {
  store.commit("changeLoginState", false);
};
</script>
<template>
  <div style="background-color: #ffccff; width: 400px; height: 400px">
    <h2>這是父組件</h2>
    <button @click="login">登錄</button>
    <button @click="logout">退出</button>
    <child :data-info="state.dataInfo"></child>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>