Skip to content

Типи утиліт

INFO

На цій сторінці наведено лише кілька типів утиліт, які зазвичай використовуються, і, можливо, потребуватимуть пояснення щодо їх використання. Щоб отримати повний список експортованих типів, зверніться до початкового коду.

PropType<T>

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

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' }"></div>
    

TIP

Доповнення мають бути розміщені у файлі модуля .ts або .d.ts. Додаткову інформацію дивіться у розділі Розміщення доповнення типу.

Дивіться також

Теги SFC <style> підтримують зв'язування значень CSS із станом динамічного компонента за допомогою функції CSS v-bind. Це дозволяє використовувати спеціальні властивості без доповнення типу.

Типи утиліт has loaded