Типи утиліт
INFO
На цій сторінці наведено лише кілька типів утиліт, які зазвичай використовуються, і, можливо, потребуватимуть пояснення щодо їх використання. Щоб отримати повний список експортованих типів, зверніться до початкового коду.
PropType<T>
Використовується для анотації реквізиту з більш розширеними типами під час використання декларацій реквізитів під час виконання.
Приклад
tsimport 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
Використовується для розширення типу екземпляра компонента для підтримки спеціальних глобальних властивостей.
Приклад
tsimport axios from 'axios' declare module 'vue' { interface ComponentCustomProperties { $http: typeof axios $translate: (key: string) => string } }
TIP
Доповнення мають бути розміщені у файлі модуля
.ts
або.d.ts
. Додаткову інформацію дивіться у розділі Розміщення доповнення типу.Дивіться також: Посібник - Доповнення глобальних властивостей
ComponentCustomOptions
Використовується для доповнення типу опцій компонента для підтримки опцій з налаштуванням.
Приклад
tsimport { Route } from 'vue-router' declare module 'vue' { interface ComponentCustomOptions { beforeRouteEnter?(to: any, from: any, next: () => void): void } }
TIP
Доповнення мають бути розміщені у файлі модуля
.ts
або.d.ts
. Додаткову інформацію дивіться у розділі Розміщення доповнення типу.Дивіться також: Посібник - Доповнення опцій з налаштуванням
ComponentCustomProps
Використовується для розширення дозволених реквізитів TSX, щоб використовувати неоголошені реквізити для елементів TSX.
Приклад
tsdeclare module 'vue' { interface ComponentCustomProps { hello?: string } } export {}
tsx// тепер працює, навіть якщо hello не є оголошеним реквізитом <MyComponent hello="world" />
TIP
Доповнення мають бути розміщені у файлі модуля
.ts
або.d.ts
. Додаткову інформацію дивіться у розділі Розміщення доповнення типу.
CSSProperties
Використовується для збільшення дозволених значень у прив'язках властивостей стилю.
Приклад
Дозволити будь-які користувацькі властивості CSS
tsdeclare 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
. Це дозволяє використовувати спеціальні властивості без доповнення типу.