18

I am writing Javascript in Visual Studio Code (not Typescript). However, I added "checkJs": true ("Enable type checking on JavaScript files") to my compilerOptions in jsconfig.json to enable automatic imports.

Now that I have done that, I'm getting Typescript errors (squiggly lines), for instance:

JSX element type 'Foo' does not have any construct or call signatures. ts(2604)

I could remove these by disabling validity checking, but then I'd lose normal Javascript validity checking.

My question is: is it possible to have automatic imports, and Javascript validity checking, but not have Typescript errors in VS Code? For instance, is there some flag I can set in jsconfig.json to disable errors with "ts" at the end?

And if not, how do I fix Typescript errors in a Javascript file ... without having to adopt Typescript?

EDIT: Just to help clarify the kind of solution I'm imagining ... let's say we were talking about ESLint here. Yes I could add a comment at the top of a file to make ESLint ignore that file, but then I lose all linting whatsoever.

I'm more looking for the equivalent of being able to say "ts2604": false or "ts*": false in an .eslintrc file, or something more like that. In other words, I don't want to adopt Typescript, or lose all type awareness either ... I just want VS Code's great Javascript features, without large chunks of my code being underlined by error/warning messages that I can't do anything about.

Improve this question
6
  • 1
    I've only ever had a jsconfig.js: I've never had a tsconfig.json, because I've never done Typescript. The only way TypeScript is related is that using it in some sense, via the checkJs compiler option, is somehow necessary to get automatic imports. But just because I want VS Code to use Typescript to infer some types when importing, that doesn't mean I care about some code lacking a type in my Javascript code ... which is why I'm looking for some sort of compromise. Commented May 31, 2020 at 15:55
  • I copied my jsconfig.js (including checkJs: true) into a tsconfig.js: it did nothing. Commented May 31, 2020 at 16:57
  • 1
    Unfortunately that just describes the various ways of enabling type-checking, such as the checkJs option in jsconfig.js I'm using. However that mechanism , and the others listed (eg. // @ts-check) seem to be an all or nothing deal: you get all the features and the TS warnings, or none. I'm trying to get the features, but somehow disable/hide/ignore the Typescript warnings about not having types for things in my JS files (because my jS files have no type definitions). Even just a way to "turn off" certain warnings/errors by code (eg. don't show me ts(2604) errors) would be helpful. Commented May 31, 2020 at 17:23
  • But it's not in any way about Typescript, except to the degree that VS Code involves it: my question is 100% about writing Javascript in Visual Studio Code, so I feel like Typescript tags would be misleading. Commented May 31, 2020 at 18:39
  • Does // @ts-nocheck on top of js file work? Commented Jun 2, 2020 at 14:20

3 Answers 3

Reset to default
5
+50

VS Code's JavaScript type checking is powered by TypeScript. The errors you are seeing in your JS files are not TypeScript language errors, they are the TypeScript engine saying: "Hey this JavaScript code looks like it is invalid". The TypeScript engine tries to understand JavaScript as well as possible, but JavaScript's dynamic nature can sometimes trip it up and you may need to help it along with some JSDoc annotations .

So ideally you should address these errors. If this is not possible, you can suppress the errors using a // @ts-ignore comment on the line above the error (this is offered as a quick fix for the error)

This TypeScript feature request also tracks the ability to suppress specific error codes.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you. "you may need to help it along with some JSDoc annotations" - Could you point me to any sort of resource on how I'd do that? I've heard that in theory you can "do Typescript through JSDoc", and that would let me specify types without using Typescript, but I'm not familiar with how to actually accomplish that. Also, that GitHub issue seemed promising ... but it seemed (so far at least) to lack traction.
Sprinkled a few of these in my code and voilà! Errors gone :) Thanks
5

This could be a red herring, but are all your errors JSX related? TypeScript can handle JSX (in *.tsx ot *.jsx files) if you specify the factory to use for the JSX. The error looks like TS can't find the factory class (so it's got <Foo> and doesn't know what to pass it to). Typically this will be something like (the settings say React, but they're the same for Preact or other JSX libraries):

"compilerOptions": {
    "jsx": "react",
    "jsxFactory": "probably the same as transform-react-jsx setting in your plugins"
}

There's much more on that in the TS docs.

Generally I find it best practice to fix TS errors before JS anyway, but that isn't always practical, so another option is adding // @ts-ignore on the preceding line or // @ts-nocheck to skip type checking in the file.

// @ts-ignore is really intended for this kind of situation, but it's not a long term fix - you're upgrading, you know it works, you just need TS to skip the failing check for now. But, when you know the code works and TS is missing a definition somewhere it can be the right patch.

Improve this answer

5 Comments

Thank you. I am using JSX, but I don't get errors on most of my JSX. In that specific instance, a component was being brought in via a hook (instead of via import) and that caused Typescript to not be able to infer a type. I tried to add a "jsxFactory" property (I already had a "jsx": "react" one), but VS Code told me it was invalid. Also, I wasn't clear on what to set it to, as I don't have a transform-react-jsx setting (an old Babel config file I used to use has it; was this a Babel setting that got removed perhaps?)
@machineghost Oh, in that case you can still tell TS where to find Foo() with /// <reference path="path_to_your_defs/foo.d.ts" /> at the top of the file.
I see ... but aren't I adopting Typescript at that point? My goal was to stick to JS.
@machineghost TypeScript just adds type checking to JS. You don't have to switch to TS, but if you want to check types you need to tell TS what the types look like, even in your JS. It needs to know what Foo looks like (or you can declare Foo: any and it won't care). You can use // @ts-nocheck to skip one problem file or // @ts-ignore to skip one line.
I emphasize, you have to add // @ts-ignore on the line BEFORE the line to be ignored, adding to end of the line does NOT work :D
1

Lately I have been coding in React with Visual Studio Code and we have a team recommandation for using ESLint extension.

It has many configuration capabilities, and the following one may match with your needs :

eslint.probe = an array for language identifiers for which the ESLint extension should be activated and should try to validate the file. If validation fails for probed languages the extension says silent. Defaults to ["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue"].

Improve this answer

1 Comment

Thank you. I am using that extension, but if I understand the eslint.probe setting, it's essentially just another "turn off all validation" (by file extension) ... similar to adding //@ts-ignore to every file. I don't want that; I want validation features ... I just want to be able to turn off the ones that I can't address.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.