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

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'.

[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

[sodatea]

For the record, here’s the screencast: https://asciinema.org/a/6G0XuvqLPRjtxHFRh7b9IFKC2

With the provided source code I only see errors like Duplicate identifier, which disappears after I deleted the TSFileExample.ts. I don’t see anything specific to the vue file.