Skip to content

Вспомогательные типы

Информация

На этой странице перечислены лишь некоторые часто используемые вспомогательные типы, применение которых может потребовать объяснений по их использованию. Полный список экспортируемых типов можно найти в исходном коде.

PropType<T>

Используется для аннотации входного параметра с более сложными типами по сравнению с runtime определением входных параметров

MaybeRef<T>

  • Поддерживается только в версиях 3.3+.

Псевдоним для T | Ref<T>. Полезно для аннотирования аргументов Composables.

MaybeRefOrGetter<T>

  • Поддерживается только в версиях 3.3+.

Псевдоним для T | Ref<T> | (() => T). Полезно для аннотирования аргументов Composables.

ExtractPropTypes<T>

Извлекает типы значений из объекта входных параметров во время выполнения. Извлеченные типы являются внутренними, то есть разрешенными входными параметрами, полученными компонентом. Это означает, что булевы входные параметры и входные параметры со значениями по умолчанию всегда определены, даже если они не нужны.

Для извлечения общедоступных входных параметров, то есть входных параметров, которые разрешено передать родителю, используйте ExtractPublicPropTypes.

  • Пример

    ts
    const 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. Извлеченные типы являются публичными — то есть входными параметрами, которые разрешено передавать родителю.

  • Пример

    ts
    const 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

Используется для расширения типа экземпляра компонента с целью поддержки пользовательских глобальных свойств.

ComponentCustomOptions

Используется для расширения типа опций компонента с целью поддержки пользовательских опций.

ComponentCustomProps

Используется для расширения разрешенных входных параметров в TSX с целью использования недекларированных входных параметров на элементах TSX.

  • Пример

    ts
    declare module 'vue' {
      interface ComponentCustomProps {
        hello?: string
      }
    }
    
    export {}
    tsx
    // теперь работает, даже если hello не является объявленным входным параметром
    <MyComponent hello="world" />

    Совет

    Дополнения должны быть размещены в файле модуля .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>

    Совет

    Дополнения должны быть размещены в файле модуля .ts или .d.ts. Подробнее об этом см. в разделе Расширение глобальных свойств.

    См. также

    Секции однофайловых компонентов <style> поддерживают привязку CSS-значений к динамическому состоянию компонента с помощью CSS-функции v-bind. Это позволяет использовать пользовательские свойства без дополнения типа.

Вспомогательные типыУже загружено