Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript: Typed Function Props #9692

Closed
maxmellen opened this issue Mar 13, 2019 · 0 comments
Closed

TypeScript: Typed Function Props #9692

maxmellen opened this issue Mar 13, 2019 · 0 comments

Comments

@maxmellen
Copy link

maxmellen commented Mar 13, 2019

What problem does this feature solve?

Get type checking for function passed as prop to a component.

Currently, it is possible to use PropType to get better typing on props passed to a component.
For example:

import Vue, { PropType } from "vue";

interface User {
  name: string;
}

export default Vue.extend({
  name: "MyComponent",
  props: {
    user: Object as PropType<User>
  }
});

In this example, the user prop will be correctly typed by the TypeScript type checker.

This however doesn't work with function props, the following example...

import Vue, { PropType } from "vue";

interface User {
  name: string;
}

type ConfirmCallback = (confirm: boolean) => void;

export default Vue.extend({
  name: "MyComponent",
  props: {
    user: Object as PropType<User>,
    confirmCallback: Function as PropType<ConfirmCallback>
  }
});

... yields the following error:

src/MyComponent.ts:13:22 - error TS2352: Conversion of type 'FunctionConstructor' to type 'PropType<ConfirmCallback>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'FunctionConstructor' is not comparable to type '() => ConfirmCallback'.

13     confirmCallback: Function as PropType<ConfirmCallback>

What does the proposed API look like?

As converting to unknown first is somewhat unwieldy (and seems not to work in a SFC Vetur setup, maybe this should be looked into separately), it would be nice to have a helper function exposed by Vue such as the following...

import { PropType } from "vue";

export default function TypedFunctionProp<T>(): PropType<T> {
  return (Function as unknown) as PropType<T>;
}

... which would allow writing the following:

import Vue, { PropType, TypedFunctionProp } from "vue";

interface User {
  name: string;
}

type ConfirmCallback = (confirm: boolean) => void;

export default Vue.extend({
  name: "MyComponent",
  props: {
    user: Object as PropType<User>,
    confirmCallback: TypedFunctionProp<ConfirmCallback>()
  }
});

I would be willing to write a PR for this, but I'm not sure where to put the definition of the TypedFunctionProp function as it can't be put in the declaration file.

I'm also completely open to having a different name for that function. Maybe FunctionPropType is more consistent. I've actually switched to FnPropType in the project I'm working on, as it's relatively short, and is consistent with the PropType name.

pikax pushed a commit to pikax/vue that referenced this issue Mar 18, 2019
kiku-jw pushed a commit to kiku-jw/vue that referenced this issue Jun 18, 2019
Lostlover pushed a commit to Lostlover/vue that referenced this issue Dec 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants