kt-dc

A tiny TypeScript-friendly alias/wrapper around Vue's defineComponent optimized for the setup-style component pattern.

kt-dc exports a single named helper defineComponent and an alias dc. It provides a strongly-typed signature for setup-style components where the setup function receives typed props, an expose helper, and the SetupContext (including slots and emit types).

Install

Install from npm (or your preferred package manager):

npm:

	npm install kt-dc

yarn:

	yarn add kt-dc

bun:

	bun add kt-dc

What it does

kt-dc is intentionally small: it re-exports Vue's defineComponent under a typed wrapper and provides a convenient dc alias. The wrapper helps when writing fully-typed setup-style components in TypeScript by exposing a compact generic helper that matches a common pattern.

The implementation (see index.ts) roughly does:

• Export a typed defineComponent helper that accepts a setup function with the signature (props, expose, ctx) => RenderFunction | Promise<RenderFunction>.
• The helper accepts optional options including a props list, emits, and slots typing hints.
• Exports dc as a short alias for defineComponent.

Usage (TypeScript)

Simple example using the dc alias:

import { dc } from 'kt-dc';
import { h } from 'vue';

export default dc(
	(props: { msg: string }, expose, ctx) => {
		// You can call ctx.emit, ctx.slots, etc. with appropriate types inferred
		expose({ /* exposed methods */ });

		return () => {
			return <>
				<div>{props.msg}</div>
			</>
		};
	},
	{
		props: ['msg'],
	}
);

For more complex typing, the helper exports several TypeScript utilities in index.ts, such as DefineSetupFnComponent, DCExpose, and UnwrapSlotsType to help with stronger typing of the component instance, exposed members, and slots.

API

• defineComponent(setup, options?) - Typed wrapper around Vue's defineComponent. Returns a typed component constructor compatible with Vue.
• dc - a direct alias for defineComponent.

Types exported (high-level):

• DefineSetupFnComponent — a constructor type representing the typed component returned by the helper.
• DCExpose<Expose> — a helper type for the expose callback used inside setup.
• UnwrapSlotsType<S> — utility to convert a slots type description into Vue Slots shape.

Notes

• This package is intentionally minimal and focuses on developer ergonomics when authoring TypeScript setup-style components.
• It relies on Vue types being available in your project. Make sure you have vue and its types installed.

Contributing

Small PRs and fixes welcome. Keep changes focused and add tests/examples when adding behavior.

License

MIT