Language-tools: TS: Named export from module script not recognized

[IgnusG]

Describe the bug
Importing named exports from <script context='module'> returns an error saying:

Module '"*.svelte"' has no exported member ...

The image is from a test file that imports both the component and the helper method

The svelte component looks like this:

<script context="module" lang="ts">
export const reverseValue = (min: number, max: number) => (
  scale: number,
): number => max - scale + min;
</script>

...

Typescript Config

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {"*": ["*", "typings/*"]},
    "noImplicitAny": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noUnusedParameters": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "types": ["jest", "chrome", "node"],
    "allowJs": true,
    "isolatedModules": false,
    "target": "ESNext",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/.svelte", "typings/*.d.ts", "test/*.ts"],
  "exclude": ["node_modules"]
}

• Svelte: 3.24.1
• Svelte Preprocess: 4.2.1
• Svelte TS Config: 1.0.10
• Typescript: 4.0.2

Expected behavior
The exports should be recognized

Severity
Not severe. Just a small hindrance

[dummdidumm]

I'm not sure if we can solve this. The problem is that the Typescript Language Service does not know how to deal with Svelte files. There's just a minimal type definition in svelte that says "everything that ends with .svelte has a default export of type SvelteComponent". Even writing a TypeScript-Plugin will not help much because those are not used during running the compiler with the tsc command.
As a workaround you can just ignore the error by adding @ts-ignore in the line above the import.

[Conduitry]

If this is going to be kept open, should it be transferred to the language-tools repo?

[IgnusG]

As a workaround you can just ignore the error by adding @ts-ignore in the line above the import.

Yeah, I'm currently using // @ts-expect-error to remove the error

Another solution (not at all clean though) might be to automatically generate .d.ts files while building/linting/testing which include the declarations of the svelte component?

I've used a similar approach with a custom css module setup in one of my projects. This would get rid of the error during compile/linting/testing.

I've coupled it with a typescript plugin which then tricked the editor into recognizing the css classes as exports and allowed completion/linting during development even before the d.ts files were generated (of course as you've mentioned the plugin would only support the editor - tsc would need to rely on the generated declarations).

[dummdidumm]

That's an interesting solution! Would you like to share your plugin code? I did not setup a TS plugin before, but thought about setting one up for Svelte before and having kind of a blue print would certainly help.

[IgnusG]

I'm actually using this awesome plugin by @mrmckeb https://github.com/mrmckeb/typescript-plugin-css-modules :)
It works very well at least within VS Code.

For the compilation step maybe it could be possible to add an option to the typescript preprocessor for svelte-preprocess to generate the declaration for every svelte component while running. If I a tool uses svelte-preprocess it would then immediately get the correct typings

[jasonlyu123]

https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin

Seems like angular language service use the plugin technique. We could probably learn something from their code 😂.

[mrmckeb]

I'm not sure you want to learn from my code haha, but if you have any questions I'll do my best to answer. Thanks for the shout-out @IgnusG.

The only note I'll make is that Language Service plugins only run in IDEs, not during build-time. People have been asking for this change for a while, but the TypeScript team don't seem convinced that it's a good direction.