Unable to use TypeScript type exports from vue component file

[d-akara]

Version

15.0.0

Reproduction link

https://github.com/dakaraphi/vue-loader-bug-sample

Steps to reproduce

1. clone referenced github repo.
2. npm install
3. npm run build

What is expected?

Should build without error

What is actually happening?

16:77-84 "export 'Message' was not found in './InlineMessage.vue'

---

This seems related to #1234

[yyx990803]

Vue files currently does not support type exports, because that's processed at the TypeScript checker level, and all *.vue modules are simply shimmed to be of type Vue (see your vue-shims.d.ts). I don't think this can be fixed in vue-loader unless we have first-class *.vue support in TS itself.

/cc @octref

[d-akara]

@yyx990803 I forgot to mention, webpack will build properly on incremental build. So after the error is shown on initial build, if you then just touch the file InlineMessage.vue it will then build without error.

I don't understand enough of the internal build process to know if this is useful information or not, but just wanted to point it out in case.

[codetalks-new]

An unrelated opinion: I think we should put the below code in a separate ts file. because it's purely model mode.

export type MessageType = 'none' | 'info' | 'warning' | 'error' | 'success' | 'loading'
export interface Message {
     type: MessageType
     dismissable: boolean
     content: string
}

and I prefer declare a enum type for MessageType, such as:

export enum MessageType{
    none = 'none', 
    info = 'info' ,
    warning = 'warning',
    error = 'success' ,
    loading = 'loading',
}

[octref]

As @yyx990803 said there is no existing way to do this. Your best bet right now would be having a type.ts file where you define the types and import them from the Vue files.

@DanielRosenwasser Do you know what would it take to have this supported in TS? microsoft/TypeScript#12846 doesn't seem to cover it.

[DanielRosenwasser]

Really, you need something special to resolve these types correctly within

1. the language service
2. the Webpack loaders themselves

There's always been a problem with importing from .vue files from a .ts file in the language service (i.e. in the editor)

I've forgotten whether the Webpack loaders are capable of doing "the right thing" without the vue-shims.d.ts file.

[nailfar]

Could this way help you ?

//index.ts

import Test from "./Test.vue";
export default Test;

You can just write your template and styles in .vue file (and it is surport scoped scss less) ,and script in ts files;

//Template.vue

<template>
  <div>Test</div>
</template>
<style lang="scss" scoped>
</style>

//test.ts

import { Vue, Component, Prop } from "vue-property-decorator";
import _Template from "./Template.vue";
@Component({
  mixins: [_Template],
})
export default class Test extends Vue {
  public id: string = "Test";
}

//in ohter .ts to import

import Test from "@/Test"
expport default TestChild extend Test{
console.info(this.id);
}

You can use ts type now;
You can also use tsx like react; It is surport ts type;

@yyx990803 @dakaraphi

[d-akara]

@nailfar yes, it has been worked around using .ts files. It is just not as convenient.

[nailfar]

We can write a bash or node script to create module files.
run command such as npm run generate app/views/test.
then create the Test.ts , Index.ts and Template.vue files with templates in app/views/test;
// ts Template

import { Vue, Component, Prop } from "vue-property-decorator";
( other common import  you want here);
import _Template from "./Template.vue";
@Component({
  mixins: [_Template],
})
export default class {{FILE_NAME}} extends Vue {
  public id: string = "{{FILE_NAME}}";
  (do some thing others  you want...)
}

// vue Template

<template>
  <div class="module-{{FILE_NAME}}">{{FILE_NAME}}</div>
</template>
<style lang="scss" scoped>
</style>

// barrel Template

import {{FILE_NAME}} from "./{{FILE_NAME}}.vue";
export default {{FILE_NAME}};

{{FILE_NAME}} will be replaced by the script;
one command many code;

[ZSkycat]

@nailfar This will make the hot update not work

[nailfar]

@ZSkycat https://github.com/skyrpex/vue-jsx-hot-loader

[ZSkycat]

This is the two methods I tried, but there are still problems.
TypeStrong/ts-loader#826

And a another way:
Type conversion of vue components with additional ts files.

file list

Hello.vue // <script src="./Hello.script.ts"></script>
Hello.script.ts // <script> content
Hello.ts // magic wrap

Hello.ts content

import components from './Hello.vue';
import componentsClass from './Hello.script';
class Magic extends componentsClass {}
(<any>Magic) = components;
export default Magic;

This is written using vue-class-component.

[ZSkycat]

@yyx990803 It is probably a good idea to allow vue-loader to use the ts file as an entry point.

about webpack.module.rules
We can use double extensions to avoid affecting normal ts files. For example *.vue.ts

(I have been exploring vue + typescript and if there is a chance I hope we can talk about it.)