TypeScript language service can't find name

[pauleveritt]

This one is kind of weird. I have a Jasmine test:

import '../src/declarations';
import App from '../src/App.vue';


describe('Hello.vue', () => {
    let vm: App;
    it('should render correct contents', () => {
        vm = (new App).$mount();
        expect(vm.msg).toBe('Welcome to Your Vue.js App');
    })
});

I don't think declarations.ts matters, but just in case:

declare module '*.vue' {
  import * as Vue from 'vue'
  const Component: typeof Vue
  export default Component
}

My App.vue file has a <script> block with:

export default class App extends Vue {

Everything works great, my tests pass/fail as expected, I get autocomplete in WebStorm as I'm writing my tests. Except...the TypeScript language service gives me:

Error:(6, 13) TS2304:Cannot find name 'App'.

...for the line with:

    let vm: App;

If I omit the type declaration the error goes away. But then it complains for everything on vm, as it thinks is is a Vue instance, not my TypeScript class.

I can, of course, do testing the way you do, with no $mount. Or I can do as you suggest in the ticket about component instances, and don't think in terms of typing in tests, and work down at the generated ES6 layer. But it would sure feel nice to get some typing.

[HerringtonDarkholme]

Thanks for trying out av-ts.

Your problem is, probably, not fixable in the library.
Single File Component is not compiled by TypeScript compiler. You can use SFC because you have used ts-loader to extract script from SFC. However, TypeScript language service does not have such functionality, so came the error.

I'm afraid this is out of av-ts' scope. But I appreciate your clear issue reporting.

My suggestion is

1. just ignore language service. Actually I wonder where you use LS.
2. writing test in JavaScript. Not ideal, but makes compile error / type assertion walk away.

[pauleveritt]

Thanks for the fast response, and I understand what you're saying. I had a feeling it was a fundamental issue with the .vue SFC approach. To answer the question about LS, I'm using it in WebStorm (I'm the WebStorm Developer Advocate) which just shipped support for Vue.

[HerringtonDarkholme]

Sounds cool!

I had a feeling it was a fundamental issue with the .vue SFC approach.

Yes, static lint and semantic completion have been very weak in SFC.

However, for IDE development, I think TypeScript has some new project concept to support non TS file.

For example:
https://github.com/Microsoft/TypeScript/blob/5b199b0a1a24ce5102b2297f977b457bab2ba0e4/src/harness/unittests/tsserverProjectSystem.ts

And VSCode uses it to support TypeScript in HTML, which I think should alas applies to Vue.

For standalone service, proxy seems useful. microsoft/TypeScript#12231

That said, though, it still requires man power to implement plugins. I don't think one individual developer to do it in spare time...