svelte-intellij icon indicating copy to clipboard operation
svelte-intellij copied to clipboard

TypeScript code embedded in script tags is lacks some validations

Open Bilge opened this issue 2 years ago • 8 comments

Adding a TS script block to my Svelte file (<script lang="ts">) allows me to use TypeScript in Svelte, but Svelte preprocess does not validate the code using TS type checking (by design). However, I would expect the Svelte plugin for IntelliJ to offer this, since not validating types voids the purpose of using TypeScript in the first place.

It seems I get a bare minimum of type checking from PhpStorm's built-in TS type checking inspections, but this is just a very small subset of the total number of checks offered by TypeScript and does not accommodate custom configurations specified in tsconfig.json (such as strict mode). This deviates from the level of TypeScript support I get when writing standalone TS files, in which full type checking and tsconfig.json use is supported by PhpStorm out of the box, highlighting errors in the inspection gutter in near real-time. I would hope the same could be achieved for TS embedded in Svelte files.

As a concrete example, if I add the following code to a TS file, I get an error.

// my.ts
function x(y) {
    return y + 1;
}

TS7006: Parameter 'y' implicitly has an 'any' type.

Notice the y is underlined red in the editor to annotate the error, and the x appears in grey to show the method is unused.

image

Copying the same code into a Svelte file shows no errors or warnings and it does not analyse that the method x is unused. Instead, I have to run svelte-check separately if I want to see TS errors in Svelte.

Bilge avatar Oct 09 '21 18:10 Bilge

Okay that's indeed a problem. Looks like IJ built-in TS checker does not report noImplicitAny errors, I wasn't aware of that.

Do you see any other problems besides noImplicitAny? There were some issues in the past about tsconfig.json not being located, that were resolved in v0.21.0 Now, to my knowledge all directory layouts supported by PHPStorm should work also with Svelte files

tomblachut avatar Oct 09 '21 19:10 tomblachut

Looks like IJ built-in TS checker does not report noImplicitAny errors

I don't know what that means. It's not like I'm using a special plugin to make TS checking work, I am using the built-in checker and it does report noImplicitAny, whether because it picks up my tsconfig.json or otherwise. I suppose I have no way of knowing whether or not this plugin is successfully detecting my tsconfig.json? Besides the fact that it doesn't appear to be working correctly, of course.

Bilge avatar Oct 09 '21 19:10 Bilge

TS in WebStorm, PHPStorm, etc. has two layers interweaved. Built-in, and Language Service. Built-in one does not report noImplicitAny back to user. Frameworks are a tricky case that make similar interweaving hard. Svelte files only use built-in layer.

You can disable Language Service in the settings and the error will disappear from .ts file.

If there are other problems than with noImplicitAny you could check for a example how to reproduce broken tsconfig.json detection here https://youtrack.jetbrains.com/issue/WEB-51050

tomblachut avatar Oct 09 '21 20:10 tomblachut

So to resolve this ticket, we would need to find a way to use Language Service with Svelte? Is that something you can do?

Bilge avatar Oct 09 '21 20:10 Bilge

As far as I can tell, many strict checks fail to execute in svelte files. Latest Webstorm and plugin.

Failure to catch: strictFunctionTypes strictNullChecks strictPropertyInitialization

Unfortunately, I currently have to use VSCode for Svelte as the TS support there seems flawless so far. Would love to use IDEA, but this is a bit of a dealbreaker for the time being.

jmroon avatar Nov 24 '21 16:11 jmroon

it should use the typescript language server imo, webstorm's type checker is kinda lacking

DetachHead avatar Apr 12 '22 02:04 DetachHead

For svelte it should probably use the svelte language server (which, as far as I understand, calls the TypeScript one internally) since the TypeScript language server wouldn't understand the svelte single file component format (and probably also not the svelte specific language additions / changes).

feeelX avatar Jul 02 '22 20:07 feeelX

I'm facing the same problem with a normally laid out svelte-kit project.
As far as I can tell, svelte uses svelte-check for validating typescript - could that be somehow supported?

Manually setting the tsc config with --project jsconfig.json in "Language & Frameworks > TypeScript" didn't do anything as well.

NyxCode avatar Jul 31 '22 17:07 NyxCode

For svelte it should probably use the svelte language server (which, as far as I understand, calls the TypeScript one internally) since the TypeScript language server wouldn't understand the svelte single file component format (and probably also not the svelte specific language additions / changes).

From what I can tell the svelte language server uses the Language Server Protocol, which intellij doesn't support. There are plugins available for it, but I'm not sure how much help those can be.

polaroidkidd avatar Mar 07 '23 19:03 polaroidkidd

Contained in WEB-58397 use the svelte language server

tomblachut avatar Jul 04 '23 16:07 tomblachut