Static method Class B extends A: "Type 'typeof B' is not assignable to type 'typeof A'" in .vue files

[baseprime]

Version

3.2.3

Reproduction link

Here

Environment info

Environment Info:

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 8.11.4 - ~/.nvm/versions/node/v8.11.4/bin/node
    Yarn: Not Found
    npm: 5.6.0 - ~/.nvm/versions/node/v8.11.4/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: Not Found
    Safari: 12.0.2
  npmPackages:
    @vue/babel-preset-app:  3.2.2 
    @vue/cli-overlay:  3.2.0 
    @vue/cli-plugin-babel: ^3.2.0 => 3.2.2 
    @vue/cli-plugin-eslint: ^3.2.0 => 3.2.2 
    @vue/cli-plugin-typescript: ^3.2.0 => 3.2.2 
    @vue/cli-plugin-unit-mocha: ^3.2.0 => 3.2.2 
    @vue/cli-service: ^3.2.0 => 3.2.3 
    @vue/cli-shared-utils:  3.2.2 
    @vue/component-compiler-utils:  2.4.0 
    @vue/eslint-config-prettier: ^4.0.1 => 4.0.1 
    @vue/eslint-config-typescript: ^3.2.0 => 3.2.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.28 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    babel-plugin-transform-vue-jsx:  4.0.1 
    bootstrap-vue: ^2.0.0-rc.11 => 2.0.0-rc.11 
    eslint-plugin-vue: ^5.0.0 => 5.1.0 
    vue: ^2.5.21 => 2.5.21 
    vue-class-component: ^6.0.0 => 6.3.2 
    vue-eslint-parser:  2.0.3 
    vue-functional-data-merge:  2.0.7 
    vue-hot-reload-api:  2.3.1 
    vue-loader:  15.5.0 
    vue-localstorage: ^0.6.2 => 0.6.2 
    vue-property-decorator: ^7.0.0 => 7.2.0 
    vue-router: ^3.0.1 => 3.0.2 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.5.21 
    vue-template-es2015-compiler:  1.6.0 
    vuex: ^3.0.1 => 3.0.1 
  npmGlobalPackages:
    @vue/cli: 3.2.3

Steps to reproduce

Take this FoodComponent.vue example:

<script lang="ts">
class Food {
    name: string;

    constructor(name: string) {
        this.name = name
    }

    eat() {
        console.log('Ate', this.name);
    }

    static create<T extends Food = T>(name: string): Promise<T> {
        let instance = <T>new this(name)
        return new Promise(resolve => {
            setTimeout(() => resolve(instance), 5000)
        })
    }
}

class MexicanFood extends Food {
    addHotSauce() {
        console.log('Added hot sauce to', this.name)
    }
}

MexicanFood.create('Taco').then((taco: MexicanFood) => {
    //                           ^
    // In ALL .vue files, receiving this error:
    //   Type 'Food' is not assignable to type 'MexicanFood'.
    //    Property 'addHotSauce' is missing in type 'Food'.
})
</script>

What is expected?

I shouldn't receive any errors

What is actually happening?

Moving the above code to its own file does not show any errors. However, using this code in the exact same way in a .vue file shows a Type check error, which shouldn't happen:

Type 'Food' is not assignable to type 'MexicanFood'.
  Property 'addHotSauce' is missing in type 'Food'.

[LinusBorg]

When I copy your code to the TS Playground and turn on all checks, and I get the same error.

However your own Playground code, which is slightly different when using the class, works even with all checks.

So which is the real code?

Also, you didn't provide a reproduction as the link you shared is to a playground (not our software), not a vue-cli project (our software)

So from what I can see so far, this is a Typescript issue, not a Vue CLI issue.

[LinusBorg]

Edit: If you change this code in your Playground:

let taco: MexicanFood = await MexicanFood.create('Taco')

To this:

let taco = await MexicanFood.create('Taco')

Then you also ge the error. In other words: your TS Playground example works because of that annotation, which is missing from the you code you pasted into this issue above.

[baseprime]

@LinusBorg The issue is that the type errors are not consistent across standalone .ts files and .vue files.

I can take the example code and put it in a single .vue file like FoodComponent.vue and I see these type errors. But when I take that exact same code and move it into a standalone .ts file, I don't receive any errors at all. Both using the same tsconfig.json and therefore the same rules.

[baseprime]

Then you also ge the error. In other words: your TS Playground example works because of that annotation, which is missing from the you code you pasted into this issue above.

And by changing

let taco: MexicanFood = await MexicanFood.create('Taco')

to

let taco = await MexicanFood.create('Taco')

then you're unassigning taco as an instance of MexicanFood so you get another error if you try to

taco.addHotSauce()
// Property 'addHotSauce' does not exist on type 'Food'

The above result is very peculiar because it's typed to be given the context T extends Food so your example should work, and you shouldn't have to explicitly type taco: MexicanFood, and it should know that it's an instance of MexicanFood and not Food, but it doesn't in this case.

[baseprime]

In the TS Playground, hovering over create() method also shows a preview of the correct output, which is the same for standalone .ts files, but not the case for .vue files.

Here's what I get in a .vue file with the same exact code:

This type in the latter screenshot is not correct:

(method) Food.create<Food>(name: string): Promise<Food>

And this is what I see (correctly) in the same project, just with a .ts file:

[LinusBorg]

Please provide a reproduction repository.

[baseprime]

Example app is here: 🗄issue-3304-demo.zip

I just simply used Vue CLI with TypeScript+Prettier preset and added two files:

• src/TSFileExample.ts
• src/VueFileExample.vue

The .vue file has type errors and the .ts file doesn't.

@LinusBorg

[haoqunjiang]

Can't reproduce.

[baseprime]

@sodatea Did you download the example app?