ユーティリティー型 ​

PropType<T> ​

ランタイム props 宣言を使用する際、より具体的な型で props に注釈を付けるために使われます。

• 例

  ts

  import type { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // より具体的な型を `Object` に提供します
        type: Object as PropType<Book>,
        required: true
      }
    }
  }

• 参照 ガイド - コンポーネント props の型付け

MaybeRef<T> ​

• 3.3 以上でのみサポートされています

T | Ref<T> のエイリアスです。 コンポーザブルの引数を注釈するときに役立ちます。

MaybeRefOrGetter<T> ​

• 3.3 以上でのみサポートされています

T | Ref<T> | (() => T) のエイリアスです。 コンポーザブルの引数を注釈するときに役立ちます。

ExtractPropTypes<T> ​

ランタイム props オプションオブジェクトから props の型を抽出します。抽出された型は内向き、つまりコンポーネントから受け取った解決済みの props です。これは、仮に必須でなくても、真偽値の型の props とデフォルト値を持った props が常に定義されていることを意味しています。

外向きの props、つまり親が渡すことのできる props を抽出するためには 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<T> ​

• 3.3 以上でのみサポートされています

ランタイム props オプションオブジェクトから props の型を抽出します。抽出された型は外向き、つまり親が渡すことのできる props です。

• 例

  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
    }
  }

  TIP

  拡張するには、モジュールを .ts または .d.ts ファイルとして配置する必要があります。詳細はグローバルプロパティの拡張を参照してください。

• 参照 ガイド - グローバルプロパティの拡張

ComponentCustomOptions ​

コンポーネントオプション型を拡張してカスタムオプションをサポートするのに使われます。

• 例

  ts

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

  TIP

  拡張するには、モジュールを .ts または .d.ts ファイルとして配置する必要があります。詳細はグローバルプロパティの拡張を参照してください。

• 参照 ガイド - カスタムオプションの拡張

ComponentCustomProps ​

TSX 要素で宣言されていない props を使用するため、許可された TSX の props を拡張するために使用します。

• 例

  ts

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

  tsx

  // hello が宣言されていない props でも使えるようになります
  <MyComponent hello="world" />

  TIP

  拡張するには、モジュールを .ts または .d.ts ファイルとして配置する必要があります。詳細はグローバルプロパティの拡張を参照してください。

CSSProperties ​

スタイルプロパティに適用できる値を拡張します。

• 例

  どんなカスタム CSS プロパティでも適用できます

  ts

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

  tsx

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

  html

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