Типи утиліт
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 } } }
Дивіться також: Посібник - Типізація реквізитів компонентів
MaybeRef<T>
Псевдонім для T | Ref<T>
. Корисно для анотування аргументів Композиційних функцій.
- Підтримується лише в 3.3+.
MaybeRefOrGetter<T>
Псевдонім для T | Ref<T> | (() => T)
. Корисно для анотування аргументів Композиційних функцій.
- Підтримується лише в 3.3+.
ExtractPropTypes<T>
Витягти типи реквізитів з об'єкту параметрів реквізитів під час виконання. Витягнуті типи є внутрішніми, тобто вирішеними реквізитами, отриманими компонентом. Це означає, що булеві реквізити та реквізити зі значеннями за замовчуванням завжди визначені, навіть якщо вони не потрібні.
Щоб витягти загальнодоступні реквізити, тобто реквізити, які дозволено передати батьківському, використовуйте ExtractPublicPropTypes
.
Приклад
tsconst 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>
Витягти типи реквізитів з об'єкта параметрів реквізиту під час виконання. Витягнуті типи є загальнодоступними, тобто реквізитами, які дозволено передати батьківському.
Приклад
tsconst 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
Використовується для розширення типу екземпляра компонента для підтримки користувацьких глобальних властивостей.
Приклад
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
. Це дозволяє використовувати спеціальні властивості без доповнення типу.