Skip to content

Tipos de Utilitários de TypeScript

INFORMAÇÃO

Esta página lista apenas alguns tipos de utilitários comummente usados que podem precisar de explicação para o seu uso. Para uma lista completa de tipos exportados, consulte o código-fonte.

PropType<T>

Usado para anotar uma propriedade com tipos mais avançados quando usamos as declarações de propriedades de execução.

  • Exemplo

    ts
    import type { PropType } from 'vue'
    
    interface Book {
      title: string
      author: string
      year: number
    }
    
    export default {
      props: {
        book: {
          // fornecer tipo mais específico ao `Object`
          type: Object as PropType<Book>,
          required: true
        }
      }
    }
  • Consulte também: Guia - Tipos para as Propriedades do Componente

MaybeRef<T>

Pseudónimo para T | Ref<T>. Útil para anotar argumentos de Funções de Composição.

  • Apenas suportado na 3.3+.

MaybeRefOrGetter<T>

Pseudónimo para T | Ref<T> | (() => T). Útil para anotar argumentos de Funções de Composição.

  • Apenas suportado na 3.3+.

ExtractPropTypes<T>

Extrai tipos de propriedades a partir dum objeto de opções de propriedades de tempo de execução. Os tipos extraídos são rosto interno - isto é, as propriedades resolvidas recebidas pelo componente. Isto significa que propriedades booleanas e propriedades com os valores padrão são sempre definidas, mesmo se não forem obrigatórias.

Para extrair propriedades de rosto público, isto é, propriedades que o pai é permitido passar, usamos ExtractPublicPropTypes.

  • Exemplo

    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>

Extrai tipos de propriedade a partir dum objeto de opções de propriedades de tempo de execução. Os tipos extraídos são rosto público - isto é, as propriedades que o pai é permitido passar.

  • Exemplo

    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

Usado para aumentar o tipo da instância do componente para suportar as propriedades globais personalizadas.

  • Exemplo

    ts
    import axios from 'axios'
    
    declare module 'vue' {
      interface ComponentCustomProperties {
        $http: typeof axios
        $translate: (key: string) => string
      }
    }

DICA

Os aumentos devem ser colocados num ficheiro .ts ou .d.ts de módulo. Consulte Colocação do Aumento de Tipo por mais detalhes.

ComponentCustomOptions

Usado para aumentar os tipos das opções do componente para suportar opções personalizadas.

  • Exemplo

    ts
    import { Route } from 'vue-router'
    
    declare module 'vue' {
      interface ComponentCustomOptions {
        beforeRouteEnter?(to: any, from: any, next: () => void): void
      }
    }

DICA

Os aumentos devem ser colocados num ficheiro .ts ou .d.ts de módulo. Consulte Colocação do Aumento de Tipo por mais detalhes.

ComponentCustomProps

Usado para aumentar as propriedades de TSX permitidas no sentido de usar propriedades não declaradas sobre os elementos de TSX.

  • Exemplo

    ts
    declare module 'vue' {
      interface ComponentCustomProps {
        hello?: string
      }
    }
    
    export {}
    tsx
    // agora funciona mesmo se `hello` não for uma propriedade declara
    <MyComponent hello="world" />

DICA

Os aumentos devem ser colocados num ficheiro .ts ou .d.ts de módulo. Consulte Colocação do Aumento de Tipo por mais detalhes.

CSSProperties

Usado para aumentar os valores permitidos nos vínculos da propriedade de estilo.

  • Exemplo

    Permitir qualquer propriedade de CSS personalizada

    ts
    declare module 'vue' {
      interface CSSProperties {
        [key: `--${string}`]: string
      }
    }
    tsx
    <div style={ { '--bg-color': 'blue' } }>
    html
    <div :style="{ '--bg-color': 'blue' }"></div>

DICA

Os aumentos devem ser colocados num ficheiro .ts ou .d.ts de módulo. Consulte Colocação do Aumento de Tipo por mais detalhes.

CONSULTE TAMBÉM

Os marcadores <style> de componente de ficheiro único suportam ligação de valores de CSS ao estado do componente dinâmico usando a função de CSS v-bind. Isto permite propriedades personalizadas sem aumento de tipo.

Tipos de Utilitários de TypeScript has loaded