fix(types): fix function prop type inference

[kjleitz]

close #9357

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

Before this change:

const ComponentWithFunctionProps = Vue.extend({
  props: {
    functionProp: {
      type: Function,
      default: () => true,
    },
    functionPropWithBooleanReturnType: {
      type: Function as PropType<() => boolean>,
      default: () => true,
    },
    booleanProp: {
      type: Boolean,
      default: true,
    },
    booleanPropWithFunctionDefault: {
      type: Boolean,
      default: () => true,
    },
  },
  methods: {
    test(): void {
      // ERROR!
      // (property) functionProp: boolean | Function
      // -------------------------------------------
      // This expression is not callable.
      //   No constituent of type 'boolean | Function' is callable.ts(2349)
      this.functionProp();

      // ERROR!
      // (property) functionPropWithBooleanReturnType: boolean | (() => boolean)
      // -----------------------------------------------------------------------
      // This expression is not callable.
      //   Not all constituents of type 'boolean | (() => boolean)' are callable.
      //     Type 'false' has no call signatures.ts(2349)
      this.functionPropWithBooleanReturnType();

      // const foo: boolean
      const foo = this.booleanProp;

      // const bar: boolean
      const bar = this.booleanPropWithFunctionDefault;
    },
  },
});

After this change:

const ComponentWithFunctionProps = Vue.extend({
  props: {
    functionProp: {
      type: Function,
      default: () => true,
    },
    functionPropWithBooleanReturnType: {
      type: Function as PropType<() => boolean>,
      default: () => true,
    },
    booleanProp: {
      type: Boolean,
      default: true,
    },
    booleanPropWithFunctionDefault: {
      type: Boolean,
      default: () => true,
    },
  },
  methods: {
    test(): void {
      // (property) functionProp: Function
      this.functionProp();

      // (property) functionPropWithBooleanReturnType: () => boolean
      this.functionPropWithBooleanReturnType();

      // const foo: boolean
      const foo = this.booleanProp;

      // const bar: boolean
      const bar = this.booleanPropWithFunctionDefault;
    },
  },
});

[kjleitz]

@ktsn this might be up your alley!

[kjleitz]

To explain a little: calling assertBoolean(value) will only compile if value is precisely boolean, and not if value is boolean | AnotherType, nor if value is any (the latter is why ...lue: string extends A ? nev... is there—it's just a way to throw if value is any).

[kjleitz]

For reference...

Before the change, these lines were failing with:

this.functionProp();

(property) functionProp: boolean | Function
This expression is not callable.
No constituent of type 'boolean | Function' is callable. ts(2349)

assertBoolean(this.functionPropWithBooleanReturnType());

(property) functionPropWithBooleanReturnType: boolean | (() => boolean)
This expression is not callable.
Not all constituents of type 'boolean | (() => boolean)' are callable.
Type 'false' has no call signatures. ts(2349)

[kjleitz]

Also related: microsoft/TypeScript#17574 and #9873

[kjleitz]

Note: If it helps with confidence, I've tested that this change works & compiles in a project with 154 different .vue SFC files (consisting of a little over 23,000 lines of code), all using TypeScript.

[medinab]

I've been looking for a solution for some time now, thanks!

[kjleitz]

Can anyone look at this? I'd really appreciate it!

[doyaaaaaken]

Hi, is there any update on this? I'd be happy this PR was merged.

[kjleitz]

Can someone look at this? It's been a thorn in our side for a long time.

[kjleitz]

@ktsn ?