Вспомогательные типы
Информация
На этой странице перечислены лишь некоторые часто используемые вспомогательные типы, применение которых может потребовать объяснений по их использованию. Полный список экспортируемых типов можно найти в исходном коде.
PropType<T>
Используется для аннотации входного параметра с более сложными типами по сравнению с runtime определением входных параметров
Пример
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>
- Поддерживается только в версиях 3.3+.
Псевдоним для T | Ref<T>
. Полезно для аннотирования аргументов Composables.
MaybeRefOrGetter<T>
- Поддерживается только в версиях 3.3+.
Псевдоним для T | Ref<T> | (() => T)
. Полезно для аннотирования аргументов Composables.
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>
- Поддерживается только в версиях 3.3+.
Извлечение типов входных параметров из объекта runtime props options. Извлеченные типы являются публичными — то есть входными параметрами, которые разрешено передавать родителю.
Пример
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 } }
Совет
Дополнения должны быть размещены в файле модуля
.ts
или.d.ts
. Подробнее об этом см. в разделе Расширение глобальных свойств.
ComponentCustomOptions
Используется для расширения типа опций компонента с целью поддержки пользовательских опций.
Пример
tsimport { Route } from 'vue-router' declare module 'vue' { interface ComponentCustomOptions { beforeRouteEnter?(to: any, from: any, next: () => void): void } }
Совет
Дополнения должны быть размещены в файле модуля
.ts
или.d.ts
. Подробнее об этом см. в разделе Расширение глобальных свойств.
ComponentCustomProps
Используется для расширения разрешенных входных параметров в TSX с целью использования недекларированных входных параметров на элементах TSX.
Пример
tsdeclare module 'vue' { interface ComponentCustomProps { hello?: string } } export {}
tsx// теперь работает, даже если hello не является объявленным входным параметром <MyComponent hello="world" />
Совет
Дополнения должны быть размещены в файле модуля
.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>
Совет
Дополнения должны быть размещены в файле модуля
.ts
или.d.ts
. Подробнее об этом см. в разделе Расширение глобальных свойств.См. также
Секции однофайловых компонентов
<style>
поддерживают привязку CSS-значений к динамическому состоянию компонента с помощью CSS-функцииv-bind
. Это позволяет использовать пользовательские свойства без дополнения типа.