Expose typescript helper for getting the type accepted by v-bind

[ycmjason]

I find myself using v-bind a lot. But one problem I face is typing the value returned in setup for the v-bind.

E.g.

// Component A
{
  ... 
  props: {
    x: Number
  },
  emits: {
    jump: (x: number) => true,
    run: (x: number) => true,
    'update:x': (x: number) => true
  },
  ...
}

// Component B using A
setup() {
  ...
  const bindingsA: BindingOf<typeof A> = {
    x: 3,
    onJump: x => ..., // x will be typed as number because of BindingOf<A>
    ....
  }
  ...
}

It would be ideal to have a typescript helper e.g. BindingOf<Component> which gives a type containing all the props and event listeners.

I am able to get the props of a given component, but struggle to get the onEvent listeners.

export type PropOf<T extends Component> = T extends Component<infer Q> ? Q : any;

What do you guys think about this suggestion?

[johnsoncodehk]

you can use InstanceType<typeof A>['$emit'] to get emits overload function type, and than you can parse the overload function to object type like this...

const emit: ConstructorOverloads<InstanceType<typeof A>['$emit']> = { ... }

type ConstructorOverloads<T> =
	// 4 ...
	// 3 ...
	// 2
	T extends {
		(event: infer E1, ...payload: infer P1): void;
		(event: infer E2, ...payload: infer P2): void;
	} ? (
		(E1 extends string ? { [K1 in E1]: (...payload: P1) => void } : {})
		& (E2 extends string ? { [K2 in E2]: (...payload: P2) => void } : {})
	) :
	// 1
	T extends {
		(event: infer E1, ...payload: infer P1): void;
	} ? (
		(E1 extends string ? { [K1 in E1]: (...payload: P1) => void } : {})
	) :
	// 0
	unknown;

This is TypeScript design limitation, I have this same problem (resolved).

If defineComponent export a property like __rawOptions to expose untreated options types will be very helpful.