工具型別 ​

PropType ​

在執行時屬性宣告時用於註解更高階的型別。

• 示例

  ts

  import type { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // provide more specific type to `Object`
        type: Object as PropType<Book>,
        required: true
      }
    }
  }

• 另請參閱 指南 - 元件屬性型別化

MaybeRef ​

• 僅支援 3.3+

T | Ref 的別名。用於註解 可組合函式 的引數。

MaybeRefOrGetter ​

• 僅支援 3.3+

T | Ref | (() => T) 的別名。用於註解 可組合函式 的引數。

ExtractPropTypes ​

從執行時屬性選項物件中提取屬性型別。提取的型別是內部面向的 - 即元件接收到的解析後的屬性。這意味著布林屬性和具有預設值的屬性始終定義，即使它們不是必需的。

要提取公共面向的屬性，即父元件允許傳遞的屬性，請使用 ExtractPublicPropTypes。

• 示例

  ts

  const propsOptions = {
    foo: String,
    bar: Boolean,
    baz: {
      type: Number,
      required: true
    },
    qux: {
      type: Number,
      default: 1
    }
  } as const
  
  type Props = ExtractPropTypes<typeof propsOptions>
  // {
  //   foo?: string,
  //   bar: boolean,
  //   baz: number,
  //   qux: number
  // }

ExtractPublicPropTypes ​

• 僅支援 3.3+

從執行時屬性選項物件中提取屬性型別。提取的型別是公共面向的 - 即父元件允許傳遞的屬性。

• 示例

  ts

  const propsOptions = {
    foo: String,
    bar: Boolean,
    baz: {
      type: Number,
      required: true
    },
    qux: {
      type: Number,
      default: 1
    }
  } as const
  
  type Props = ExtractPublicPropTypes<typeof propsOptions>
  // {
  //   foo?: string,
  //   bar?: boolean,
  //   baz: number,
  //   qux?: number
  // }

ComponentCustomProperties ​

用於增強元件例項型別，以支援自定義全域性屬性。

• 示例

  ts

  import axios from 'axios'
  
  declare module 'vue' {
    interface ComponentCustomProperties {
      $http: typeof axios
      $translate: (key: string) => string
    }
  }

  提示

  增強必須放在模組 .ts 或 .d.ts 檔案中。有關詳細資訊，請參閱Type Augmentation Placement。

• 另請參閱 指南 - 增強全域性屬性

ComponentCustomOptions ​

用於增強元件選項型別，以支援自定義選項。

• 示例

  ts

  import { Route } from 'vue-router'
  
  declare module 'vue' {
    interface ComponentCustomOptions {
      beforeRouteEnter?(to: any, from: any, next: () => void): void
    }
  }

  提示

  增強必須放在模組 .ts 或 .d.ts 檔案中。有關詳細資訊，請參閱Type Augmentation Placement。

• 另請參閱 指南 - 增強自定義選項

ComponentCustomProps ​

用於增強允許的 TSX 屬性，以便在 TSX 元素上使用未宣告的屬性。

• 示例

  ts

  declare module 'vue' {
    interface ComponentCustomProps {
      hello?: string
    }
  }
  
  export {}

  tsx

  // now works even if hello is not a declared prop
  <MyComponent hello="world" />

  提示

  增強必須放在模組 .ts 或 .d.ts 檔案中。有關詳細資訊，請參閱Type Augmentation Placement。

CSSProperties ​

用於增強樣式屬性繫結中允許的值。

• 示例

  允許任何自定義 CSS 屬性

  ts

  declare module 'vue' {
    interface CSSProperties {
      [key: `--${string}`]: string
    }
  }

  tsx

  <div style={ { '--bg-color': 'blue' } }>

  html

  <div :style="{ '--bg-color': 'blue' }"></div>