What do you think about Typescript?

[frederikhors]

What do you think about Typescript?

Do you think I can use it with no issues as described in the sveltejs/template instructions if I use this template?

[rixo]

I think Typescript is misguided... Whatever, it's just my own limited personal opinion, if it's supported by the official template it should work here too.

Can't tell if it will work, I've never investigated. Barely realized it had happened tbh. I would naturally doubt that something I have never tested would work, but I can't think of an obvious thing that will break either so, really, I don't know...

Can you try and tell us?

[frederikhors]

Yeah. I'm trying it right now. Gimme few minutes.

[frederikhors]

It works amazingly well!

I'm only having these warnings in console:

[Svelte HMR] Setting css option to false (set hot.noDisableCss to true to bypass)
[HMR] Compat mode: only rewrite import.meta.hot to Nollup API
[Nollup] Listening on http://localhost:5000
{
  pluginCode: 'TS2339',
  message: "@rollup/plugin-typescript TS2339: Property 'hot' does not exist on type 'ImportMeta'.",
  loc: {
    column: 17,
    line: 13,
    file: 'C:/src/main.ts'
  },
  frame: '\r\n' +
    '\u001b[7m13\u001b[0m if (import.meta.hot) {\r\n' +
    '\u001b[7m  \u001b[0m \u001b[91m                ~~~\u001b[0m\r\n'
}
{
  pluginCode: 'TS2339',
  message: "@rollup/plugin-typescript TS2339: Property 'hot' does not exist on type 'ImportMeta'.",
  loc: {
    column: 14,
    line: 14,
    file: 'C:/src/main.ts'
  },
  frame: '\r\n' +
    '\u001b[7m14\u001b[0m  import.meta.hot.dispose(() => {\r\n' +
    '\u001b[7m  \u001b[0m \u001b[91m             ~~~\u001b[0m\r\n'
}
{
  pluginCode: 'TS2339',
  message: "@rollup/plugin-typescript TS2339: Property 'hot' does not exist on type 'ImportMeta'.",
  loc: {
    column: 14,
    line: 17,
    file: 'C:/src/main.ts'
  },
  frame: '\r\n' +
    '\u001b[7m17\u001b[0m  import.meta.hot.accept()\r\n' +
    '\u001b[7m  \u001b[0m \u001b[91m             ~~~\u001b[0m\r\n'
}

How do you think we can fix this?

[frederikhors]

Here the reproduction: https://github.com/frederikhors/svelte-template-hot-typescript.

[frederikhors]

If I add this in tsconfig.json things change:

...
"compilerOptions": {
  "module": "ESNext"
}

[frederikhors]

Now the issue is:

Property 'hot' does not exist on type 'ImportMeta'.ts(2339)

[frederikhors]

I'm using this for now until an "official" solution.

https://stackoverflow.com/a/48638402/10088259

[rixo]

Not sure where the types for import.meta should be declared :thinking: Any idea?

It doesn't feel like it belongs in this template. I guess it would be a problematic of the bundler, or rollup-plugin-hot in our case.

[frederikhors]

Today I am on this issue again. How boring!

Maybe I should try npm i @types/node and update my tsconfig.json.

[rixo]

BTW does this warning comes from the code transformed by svelte-hmr? I'm keen to put a // @ts-ignore in there, if it helps. However, due to technical limitations, it would have to be inline (does this work: /* @ts-ignore */ ?), or at the end of a very long line of code, meaning I'd want to ignore TS on the whole line. The latter should probably be the best outcome, because warnings from transformed code don't make a lot of sense for the user. Do you know if one of those would work?

[frederikhors]

BTW does this warning comes from the code transformed by svelte-hmr?

Nope. This is my source .ts code.

See here: https://github.com/snowpackjs/snowpack/discussions/1433#discussioncomment-267428. Snowpack is using this to fix this error: "types": ["svelte", "@types/snowpack-env"] in tsconfig.json.

[frederikhors]

I don't want to use the comments to ignore because I want to fix the problem rather than work around it.

And also because I also fixed eslint for typescript which works great but also has errors on this:

Unsafe member access .dispose on an any value.eslint@typescript-eslint/no-unsafe-member-access
Unsafe call of an any typed value.eslint@typescript-eslint/no-unsafe-call

on import.meta.hot.dispose(() => { for example.

[frederikhors]

I found a way now: copy https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/snowpack-env/index.d.ts.

[floer32]

@frederikhors how did this turn out for you? I'm tinkering a bit

[floer32]

@frederikhors Seems to work like a charm for me. Some quick notes in case they're helpful to someone -

import ts from 'rollup-plugin-ts';

// I put it after resolve and commonjs, in my project
resolve(),
commonjs()
ts(),
// ...

I didn't compare to the normal typescript plugin - on another project I had a thorny issue, and it proved helpful to switch to rollup-plugin-ts, so it's been my default now. https://github.com/wessberg/rollup-plugin-ts