被迫開始學習Typescript —— vue3的 props 與 interface
vue3 的 props
Vue3 的 props ，分為 composition API 的方式以及 option API 的方式，可以實現運行時判斷類型，驗證屬性值是否符合要求，以及提供默認值等功能。
props 可以不依賴TS，自己有一套運行時的驗證方式，如果加上TS的話，還可以實現在編寫程式碼的時候提供約束、判斷和提示等功能。
Prop 的校驗
官網：//staging-cn.vuejs.org/guide/components/props.html#prop-validation
Vue 提供了一種對 props 的屬性進行驗證的方法，有點像 Schema。不知道Vue內部有沒有提供interface，目前沒有找到，所以我們先自己定義一個：
/**
* vue 的 props 的驗證的類型約束
*/
export interface IPropsValidation {
/**
* 屬性的類型，比較靈活，可以是 String、Number 等，也可以是數組、class等
*/
type: Array<any> | any,
/**
* 是否必須傳遞屬性
*/
required?: boolean,
/**
* 自定義類型校驗函數（箭頭函數），value：屬性值
*/
validator?: (value: any) => boolean,
/**
* 默認值，可以是值，也可以是函數（箭頭函數）
*/
default?: any
}
後面會用到。
composition API
官網：//staging-cn.vuejs.org/guide/typescript/composition-api.html
準確的說是在 script setup 的情況下，如何設置 props，具體方法看官網，這裡不搬運。
探討一下優缺點。
interface Props {
foo: string
bar?: number
}
// 對 defineProps() 的響應性解構
// 默認值會被編譯為等價的運行時選項
const { foo, bar = 100 } = defineProps<Props>()
// 引入 介面定義
import { Props } from './other-file'
// 不支援！
defineProps<Props>()
雖然可以單獨定義 interface ，而且可以給整體 props 設置類型約束，但是只能在組件內部定義，目前暫時不支援從單獨的文件裡面讀取。而且不能「擴充」屬性。
也就是說，基本無法實現復用。
這個缺點恰恰和我的目的衝突，等待新版本可以解決吧。
option API
官網：//staging-cn.vuejs.org/guide/typescript/options-api.html
這種方式支援Option API，也支援 setup 的方式，可以從外部引入 介面定義，但是似乎不能給props定義整體的介面。
import { defineComponent } from 'vue'
import type { PropType } from 'vue'
interface Book {
title: string
year?: number
}
export default defineComponent({
props: {
bookA: {
type: Object as PropType<Book>,
// 確保使用箭頭函數
default: () => ({
title: 'Arrow Function Expression'
}),
validator: (book: Book) => !!book.title
}
},
setup(props) {
props.message // <-- 類型：string
}
})
想了半天，可以用「二段定義」方式的方式來解決：
- 定義一個 interface，規定一個組件必須有哪些屬性。
- 定義 props 的 「描述對象」，作為共用的 props。
我的想法
為啥要給 props 設置一個 整體的 interface，而且還要從外部文件引入呢？
因為我理解的 interface 可以擁有「約束」的功能，即：可以通過 interface 約束多個（相關）組件的 props 裡面必須有一些相同的屬性。
所以需要在一個單獨的文件裡面定義介面，然後在組件裡面引入，設置給組件的props。
Vue不倡導組件使用繼承，那麼如果想要約束多個組件，擁有相同的 props？似乎應該可以用 interface ，但是看官方文檔，好像思考角度不是這樣的。
應對方式
- 先定義組件需要哪些屬性的 interface：
/**
* 表單子控制項的共用屬性。約束必須有的屬性
*/
export interface ItemProps {
/**
* 欄位ID、控制項ID，sting | number
*/
columnId: IPropsValidation,
/**
* 表單的 model，含義多個屬性，any
*/
model: IPropsValidation,
/**
* 欄位名稱，string
*/
colName: IPropsValidation,
/**
* 控制項類型，number
*/
controlType: IPropsValidation,
/**
* 控制項備選項，一級或者多級，Array<IOptionItem | IOptionItemTree>
*/
optionList: IPropsValidation,
/**
* 訪問後端API的配置，IWebAPI
*/
webapi: IPropsValidation,
/**
* 防抖延遲時間，0：不延遲，number
*/
delay: IPropsValidation,
/**
* 防抖相關的事件() => void
*/
events: IPropsValidation,
/**
* 控制項的大小，string
*/
size: IPropsValidation,
/**
* 是否顯示清空的按鈕，boolean
*/
clearable: IPropsValidation,
/**
* 控制項的擴展屬性，any
*/
extend: IPropsValidation,
}
ItemProps：目的是約束一個組件需要設置哪些屬性，限制屬性名稱。
- 然後定義 共用 的 props 的描述對象：
import type { PropType } from 'vue'
import type {
ItemProps,
IOptionItem,
IOptionItemTree,
IWebAPI
} from '../types/type'
/**
* 基礎控制項的共用屬性，即表單子控制項的基礎屬性
*/
const itemProps: ItemProps = {
/**
* 欄位ID、控制項ID
*/
columnId: {
type: [Number, String],
default: () => Math.floor((Math.random() * 1000000) + 1) // new Date().valueOf()
},
/**
* // 表單的 model，可以整體傳入，便於子控制項維護欄位值。
*/
model: {
type: Object
},
/**
* 欄位名稱，控制項使用 model 的哪個屬性，多個欄位名稱用 「_」 分割
*/
colName: {
type: String,
default: ''
},
/**
* 控制項類型，表單控制項據此載入對應的子控制項
*/
controlType: {
type: Number,
default: 101
},
/**
* 控制項的備選項，單選、多選、等控制項需要
*/
optionList: {
type: Object as PropType<Array<IOptionItem | IOptionItemTree>>,
default: () => {return []}
},
/**
* 訪問後端API的參數，IWebAPI
*/
webAPI: {
type: Object as PropType<IWebAPI>,
default: () => {
return {
serviceId: '',
actionId: '',
dataId: '',
body: null,
cascader: {
lazy: false, // 是否需要動態載入
actions: ['',''] // 按照level的順序設置後端 API 的 action
}
}
}
},
/**
* 防抖的時間間隔，0：不用防抖。
*/
delay: {
type: Number,
default: 0
},
/**
* 事件集合，主要用於防抖
*/
events: {
type: Object,
default: () => {
return {
input: () => {}, // input 事件
enter: () => {}, // 按了回車
keydown: () => {} // 正在輸入
}
}
},
/**
* 子控制項的規格，默認設置。
* * 【element-plus】large / default / small 三選一
*/
size: { //
type: String,
default: 'small',
validator: (value) => {
// 這個值必須匹配下列字元串中的一個
return ['large', 'default ', 'small'].indexOf(value) !== -1
}
},
/**
* 是否顯示可清空的按鈕，默認顯示
*/
clearable: {
type: Boolean,
default: true
},
/**
* 擴展屬性，對象形式，存放組件的擴展屬性
*/
extend: {
type: Object,
default: () => {return {}}
}
}
export { itemProps }
定義 props 的屬性的具體類型、默認值等。
- 最後在組件裡面引入
import { itemProps } from '../../../lib/base/props-item'
export default defineComponent({
name: 'ui-core-form-item',
props: {
aa: String,
...itemProps
},
setup(props) {
console.log('表單子控制項的 props：', props)
return {
props
}
}
})
使用解構的方式設置組件的 props，還可以有提示，還可以擴展自己的屬性。
好像哪裡不對，不過先這樣了。
vue3 的 props 到底是啥結構？
說起來比較複雜：
- 外層是 shallowReadonly。（第一層屬性不能直接改，但是第二層（通過引用類型）可以直接改。）
- 裡面是 shallowReactive。（解構時不會強制把普通對象變成reactive，為了效率吧。）
基本就是這樣。
