Error: 'types' can only be used in a .ts file - Visual Studio Code using @ts-check

Question

I am starting to use TypeScript in a Node project I am working on in Visual Studio Code. I wanted to follow the "opt-in" strategy, similar to Flow. Therefore I put // @ts-check at the top of my .js file in hope to enable TS for that file. Ultimately I want the same experience of "linting" as Flow, therefore I installed the plugin TSLint so I could see Intellisense warnings/errors.

But with my file looking like:

// @ts-check

module.exports = {
  someMethod: (param: string): string => {
    return param;
  },
};

and my tsconfig.json file looking like...

{
  "compilerOptions": {
      "target": "es2016",
      "module": "commonjs",
      "allowJs": true
  }
}

I get this error: [js] 'types' can only be used in a .ts file. as shown below in the image.

I saw this question which recommended disabling javascript validation in vscode but then that doesn't show me any TypeScript Intellisense info.

I tried setting tslint.jsEnable to true in my vscode settings as mentioned in the TSLint extension docs but no luck there.

What is the correct setup in order to use .js files with TypeScript and get Intellisense so I know what the errors in my code are before I run any TS commands?

Answer 1

I'm using flow with vscode but had the same problem. I solved it with these steps:

1. Install the extension Flow Language Support

2. Disable the built-in TypeScript extension:

   1. Go to Extensions tab
   2. Search for @builtin TypeScript and JavaScript Language Features
   3. Click on Disable

Answer 2

Use "javascript.validate.enable": false in your VS Code settings, It doesn't disable ESLINT. I use both ESLINT & Flow. Simply follow the instructions Flow For Vs Code Setup

Adding this line in settings.json. Helps "javascript.validate.enable": false

Answer 3

I followed following steps to fix the issue:

Go to Preferences and then to settings:

After going to settings search for javascript.validate in the search bar and uncheck the checkbox:

if you want to edit it via json then: Go to: Code -> Preferences -> Settings -> Extensions -> Scroll down and find "Edit in settings.json". then add

"javascript.validate.enable": false

Answer 4

For anyone who lands here and all the other solutions did not work give this a try. I am using typescript + react and my problem was that I was associating the files in vscode as javascriptreact not typescriptreact so check your settings for the following entries.

   "files.associations": {
    "*.tsx": "typescriptreact",
    "*.ts": "typescriptreact"
  },

Answer 5

The solution that worked for me was adding the following property to settings.json:

"js/ts.implicitProjectConfig.checkJs": true

To enable type checking for all JavaScript files without changing any code, just add "js/ts.implicitProjectConfig.checkJs": true to your workspace or user settings. This enables type checking for any JavaScript file that is not part of a jsconfig.json or tsconfig.json project.

- https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript

Answer 6

Go to settings and search for javascript validate and then disable the option to fix this.

Answer 7

You must use a .ts file - e.g. test.ts to get Typescript validation, intellisense typing of vars, return types, as well as "typed" error checking (e.g. passing a string to a method that expects an number param will error out).

It will be transpiled into (standard) .js via tsc.

---

Update (11/2018):

Clarification needed based on down-votes, very helpful comments and other answers.

types

• Yes, you can do type checking in VS Code in .js files with @ts-check - as shown in the animation

• What I originally was referring to for Typescript types is something like this in .ts which isn't quite the same thing:

  hello-world.ts

  function hello(str: string): string {
    return 1;
  }
  
  function foo(str:string):void{
     console.log(str);
  }
  

  This will not compile. Error: Type "1" is not assignable to String

• if you tried this syntax in a Javascript hello-world.js file:

  //@ts-check
  
  function hello(str: string): string {
    return 1;
  }
  
  function foo(str:string):void{
     console.log(str);
  }
  

  The error message referenced by OP is shown: [js] 'types' can only be used in a .ts file

If there's something I missed that covers this as well as the OP's context, please add. Let's all learn.

Answer 8

[Mac] In your Visual Studio Code type the following command.

• command + shift + P
• Then type " Preferences: Open User Settings (JSON)" in the search bar shown on the top of the VS Code
• Add the the line -> "javascript.validate.enable": false

Note : "Preferences: Open Default Settings (JSON)" is non editable

Answer 9

For me, the issue was not initializing my component with lang="ts" e.g. <script setup lang="ts">

Answer 10

"typescript.validate.enable": false

IN VS Code -> Preferences -> Settings -> Search for above mentioned property and disable the property

Answer 11

Types/Interfaces can only be applied to TypeScript files, and .js files are JavaScript files.

So the solution is simple as to:

Change the extension .js to .tsx to use types/interfaces.

Answer 12

Just disable the built-in TypeScript extension

follow steps as below

Answer 13

For VS code in windows, click on settings. Then on the search bar at the top, type javascript validate and just uncheck the checkbox as shown below.

Answer 14

If you are using .svelte, try putting lang="ts" in your <script> element. Example as below.

<script lang="ts">
   ...
</script>

Answer 15

Just default the variable to the expected type:

(number=1) => ...
(number=1.0) => ...
(string='str') ...