vue-component-type-helpers

Helper utilities for extracting types such as props, slots, attrs, emit, and exposed from Vue component types. No runtime dependencies; provides TypeScript type definitions only.

Installation

npm install vue-component-type-helpers

Type Helpers

ComponentProps<T>

Extracts the props type of a component.

import type { ComponentProps } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Props = ComponentProps<typeof MyComponent>;

ComponentSlots<T>

Extracts the slots type of a component.

import type { ComponentSlots } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Slots = ComponentSlots<typeof MyComponent>;

ComponentAttrs<T>

Extracts the attrs type of a component.

import type { ComponentAttrs } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Attrs = ComponentAttrs<typeof MyComponent>;

ComponentEmit<T>

Extracts the emit function type of a component.

import type { ComponentEmit } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Emit = ComponentEmit<typeof MyComponent>;

ComponentExposed<T>

Extracts the instance type exposed via defineExpose.

import type { ComponentExposed } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Exposed = ComponentExposed<typeof MyComponent>;

Example

Given the following component:

<!-- MyComponent.vue -->
<script setup lang="ts">
defineProps<{
  title: string;
  count?: number;
}>();

defineEmits<{
  update: [value: string];
  close: [];
}>();

defineSlots<{
  default(props: { item: string }): any;
  header(): any;
}>();

const internalState = ref(0);
defineExpose({
  reset: () => { internalState.value = 0; },
});
</script>

Using type helpers:

import type { ComponentProps, ComponentSlots, ComponentEmit, ComponentExposed } from 'vue-component-type-helpers';
import MyComponent from './MyComponent.vue';

type Props = ComponentProps<typeof MyComponent>;
// { title: string; count?: number }

type Slots = ComponentSlots<typeof MyComponent>;
// { default(props: { item: string }): any; header(): any }

type Emit = ComponentEmit<typeof MyComponent>;
// { (e: 'update', value: string): void; (e: 'close'): void }

type Exposed = ComponentExposed<typeof MyComponent>;
// { reset: () => void }

License

MIT License