TypeScript utility typy ​

PropType<T> ​

Používá se k anotaci vlastnosti (prop) s pokročilejšími typy při použití runtime props deklarací.

• Příklad

  ts

  import type { PropType } from 'vue'
  
  interface Book {
    title: string
    author: string
    year: number
  }
  
  export default {
    props: {
      book: {
        // poskytne konkrétnější typ k základnímu `Object`
        type: Object as PropType<Book>,
        required: true
      }
    }
  }

• Viz také: Průvodce – Typování vlastností komponenty

MaybeRef<T> ​

• Podporováno až od verze 3.3+

Alias pro T | Ref<T>. Užitečné pro anotaci vstupních parametrů v Composables.

ExtractPropTypes<T> ​

Extrahuje typy vlastností (props) z objektu s runtime props. Extrahované typy jsou interně orientované – tj. vyřešené vlastnosti přijaté komponentou. To znamená, že vlastnosti typu boolean a vlastnosti s výchozími hodnotami jsou vždy definovány, i když nejsou povinné.

Pro extrakci veřejně orientovaných vlastností, tj. vlastností, které může předat rodič, použijte ExtractPublicPropTypes.

• Příklad

  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> ​

• Podporováno až od verze 3.3+

Extrahuje typy vlastností (props) z objektu s runtime props. Extrahované typy jsou veřejně orientované - tj. vlastnosti, které může předat rodič.

• Příklad

  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 ​

Používá se k obohacení typu instance komponenty pro podporu custom globálních vlastností.

• Příklad

  ts

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

  TIP

  Obohacení musí být umístěno v souboru modulu .ts nebo .d.ts. Pro více informací se podívejte na obohacování globálních vlastností.

• Viz také: Průvodce – Obohacování globálních vlastností

ComponentCustomOptions ​

Používá se k obohacení typu vlastností komponenty pro podporu custom vlastností.

• Příklad

  ts

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

  TIP

  Obohacení musí být umístěno v souboru modulu .ts nebo .d.ts. Pro více informací se podívejte na obohacování globálních vlastností.

• Viz také: Obohacování globálních vlastností

ComponentCustomProps ​

Používá se k obohacení povolených TSX vlastností (props) pro použití nedeklarovaných vlastností na prvcích TSX.

• Příklad

  ts

  declare module 'vue' {
    interface ComponentCustomProps {
      hello?: string
    }
  }
  
  export {}

  tsx

  // nyní funguje, i když `hello` není deklarovanou vlastností
  <MyComponent hello="world" />

  TIP

  Obohacení musí být umístěno v souboru modulu .ts nebo .d.ts. Pro více informací se podívejte na obohacování globálních vlastností.

CSSProperties ​

Používá se k obohacení povolených hodnot u vazeb vlastností stylů.

• Příklad

  Povolí libovolnou custom CSS vlastnost

  ts

  declare module 'vue' {
    interface CSSProperties {
      [key: `--${string}`]: string
    }
  }

  tsx

  <div style={ { '--bg-color': 'blue' } }>

  html

  <div :style="{ '--bg-color': 'blue' }"></div>