api styles & options

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

defineComponent enables type inference for Options API props

To enable type inference for props in Options API, wrap the component with defineComponent(). Vue can then infer types for props based on the props option, accounting for additional options like required: true and default.

Type inference for basic props in Options API

When using defineComponent() with Options API, primitive prop types are automatically inferred. For example, props: { name: String } infers name as string | undefined, props: { msg: { type: String, required: true } } infers msg as string, and props: { metadata: null } infers metadata as any.

PropType utility type for complex prop types

Use PropType utility type to annotate complex prop types that cannot be expressed with constructor functions. Import PropType from 'vue' and use it as: type: Object as PropType<ComplexType>. This allows specifying objects with nested properties and function call signatures.

PropType example with interface annotation

Example showing PropType usage: import type { PropType } from 'vue'. Define interface Book { title: string; author: string; year: number }. Use in props: { book: { type: Object as PropType<Book>, required: true } }. This enables type checking on book.title and book.year.

PropType with function type annotation

Use PropType to annotate function props: callback: Function as PropType<(id: number) => void>. This ensures type checking on function parameters, so calling callback with a string will produce a type error.

Arrow functions required for default and validator in TypeScript < 4.7

When using TypeScript version less than 4.7, use arrow functions for the default and validator prop options to prevent type inference failures. Use default: () => ({ ... }) instead of default() { ... }. This prevents TypeScript from having to infer the type of 'this' inside these functions.

Augmenting global properties with ComponentCustomProperties

To type global properties installed via app.config.globalProperties, use TypeScript module augmentation on the ComponentCustomProperties interface. Declare module 'vue' { interface ComponentCustomProperties { $http: typeof axios; $translate: (key: string) => string } }.

Module augmentation must be in a TypeScript module

For module augmentation to work correctly, place it in a file that contains at least one top-level import or export. Without at least one top-level import/export (including export {}), the augmentation will overwrite original types instead of augmenting them.

Type augmentation placement for global properties

Place type augmentation for global properties in a .ts file or a project-wide *.d.ts file. Ensure it is included in tsconfig.json. For library/plugin authors, specify this file in the types property in package.json.

Augmenting custom component options

Some plugins provide custom component options. To type these, augment the ComponentCustomOptions interface. Example: declare module 'vue' { interface ComponentCustomOptions { beforeRouteEnter?(to: Route, from: Route, next: () => void): void } }. This ensures proper typing of custom option arguments.

TypeScript version recommendation for Options API

Vue supports TypeScript with Options API, but it is recommended to use Vue with TypeScript via Composition API instead, as it offers simpler, more efficient, and more robust type inference.

Give your agent this brain