Типи утиліт ​

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 ​

Використовується для розширення типу екземпляра компонента для підтримки спеціальних глобальних властивостей.

• Приклад

  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, щоб використовувати неоголошені реквізити для елементів 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' }"></div>