被迫開始學習Typescript —— vue3的 props 與 interface

金色海洋（jyk）發表於2022-05-19
TypeScriptVue

vue3 的 props

Vue3 的 props ，分為 composition API 的方式以及 option API 的方式，可以實現執行時判斷型別，驗證屬性值是否符合要求，以及提供預設值等功能。

props 可以不依賴TS，自己有一套執行時的驗證方式，如果加上TS的話，還可以實現在編寫程式碼的時候提供約束、判斷和提示等功能。

Prop 的校驗

官網：https://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

官網：https://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

官網：https://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的提示.png

好像哪裡不對，不過先這樣了。

vue3 的 props 到底是啥結構？

說起來比較複雜：

vue3的props.png

  • 外層是 shallowReadonly。（第一層屬性不能直接改，但是第二層（通過引用型別）可以直接改。）
  • 裡面是 shallowReactive。（解構時不會強制把普通物件變成reactive，為了效率吧。）

基本就是這樣。

相關文章