TypeScript type imports

[jnordberg]

Currently you cannot import TypeScript types using standard import {MyInterface} from 'mylib' syntax but must use import type {MyInterface} from 'mylib' instead. This is a bit inconvenient and non-obvious since Vue and many others allow using the standard syntax, is this something that could be improved or is it a limitation of svelte?

Refs sveltejs/template#146

[kaisermann]

This is a known limitation. import type is needed because we need to remove type imports before passing it to svelte/the bundler. Since we don't do type-checking anymore, it's not possible to know what kind of import we're dealing with (see it here).

edit: Just added a quick link regarding the limitation in the docs: https://github.com/sveltejs/svelte-preprocess/blob/master/docs/preprocessing.md#typescript---limitations

[orta]

I can fix this at TypeScript level for Svelte in the tsconfig via https://www.staging-typescript.org/tsconfig#importsNotUsedAsValues

[kaisermann]

@orta Didn't know about that prop! I don't have the time to test it right now, but does it work when transpileOnly is true? If yes, would probably make sense to force it from our side here

[orta]

I think it's worth turning on there, but I'm not 100% if it runs in transpileOnly because it won't have a type system to back up its interpretation (so it's fine either way)

[dominic-simplan]

This change seems to break my code which was working fine with version 1.0.2.
I am importing typescript types from other files as in import { GraphData } from "./GraphData";. This was working fine previously and now I am getting the error:
This import is never used as a value and must use 'import type' because the 'importsNotUsedAsValues' is set to 'error'.

If I understand you correctly, my code wasn't supposed to work actually? Or was it working because my typescript files only contain code which doesn't need to be preprocessed (e.g. no decorators, ...)?

[orta]

Your code used to work kinda by accident is mainly the point, the identifier GraphData was included in your JS at runtime but it wasn't being used and most of the time that can be OK but sometimes that can overwrite the wrong thing and you would be hard pressed to know why that broke

[johnpapa]

Thanks for posting this. I also ran into this and didn;t want to add import type ... to all of my code. So I added the setting to my tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
  "compilerOptions": {
    "importsNotUsedAsValues": "remove"
  }
}