本文へジャンプ

ユーティリティー型

INFO

このページでは、一般的に使われるものの中から、使用法の説明が必要ないくつかのユーティリティー型のみがリストされています。export された型の完全なリストについては、ソースコードを参照してください。

PropType<T>

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

  • 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
        }
      }
    }
    
  • 参照: ガイド - コンポーネントプロパティの型付け

ComponentCustomProperties

コンポーネントインスタンス型を拡張してカスタムグローバルプロパティのサポートするのに使われます。

ComponentCustomOptions

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

ComponentCustomProps

TSX 要素のプロパティとして宣言されていないプロパティを拡張して TSX プロパティとして使用します。

  • ts
    declare module 'vue' {
      interface ComponentCustomProps {
        hello?: string
      }
    }
    
    export {}
    
    tsx
    // hello が宣言されていないプロパティでも使えるようになります
    <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' }">
    

TIP

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

参照

SFC <style> タグは、v-bind CSS 関数を使って、CSS の値を動的コンポーネントの状態にリンクすることをサポートしています。これにより、型を拡張することなく、カスタムプロパティを使用することができます。

ユーティリティー型が読み込まれました