Javascript js 'types' 只能在 .ts 文件中使用 - Visual Studio Code 使用 @ts-check

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

提问by james

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-checkat the top of my .jsfile in hope to enable TS for that file. Ultimately I want the same experience of "linting" as Flow, therefore I installed the plugin TSLintso I could see Intellisense warnings/errors.

我开始在我在 Visual Studio Code 中处理的 Node 项目中使用 TypeScript。我想遵循类似于 Flow 的“选择加入”策略。因此，我放在文件// @ts-check的顶部，.js希望为该文件启用 TS。最终我想要与 Flow 相同的“linting”体验，因此我安装了插件TSLint以便我可以看到 Intellisense 警告/错误。

But with my file looking like:

但是我的文件看起来像：

// @ts-check

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

and my tsconfig.jsonfile looking like...

我的tsconfig.json文件看起来像...

{
  "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.

我收到此错误：[js] 'types' can only be used in a .ts file.如下图所示。

I saw this questionwhich recommended disabling javascript validation in vscode but then that doesn't show me anyTypeScript Intellisense info.

我看到了这个问题，它建议在 vscode 中禁用 javascript 验证，但这并没有向我显示任何TypeScript Intellisense 信息。

I tried setting tslint.jsEnableto truein my vscode settings as mentioned in the TSLint extension docs but no luck there.

我试着设置tslint.jsEnable到true我vscode设置作为TSLint扩展文档中提到，但没有运气。

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

为了将.js文件与 TypeScript一起使用并获得 Intellisense 以便我在运行任何 TS 命令之前知道代码中的错误是什么，正确的设置是什么？

回答by Idan Dagan

I'm using @flowwith vscode but had the same problem.

我正在将@flow与 vscode 一起使用，但遇到了同样的问题。

I solved it with this steps:

我通过以下步骤解决了它：

1. install the extension Flow Language Support
2. disable the built-in TypeScript extension:

1. 安装扩展流语言支持
2. 禁用内置的 TypeScript 扩展：

How to disable built-in TypeScript:

如何禁用内置 TypeScript：

1. go to extensionstab
2. search for @builtin TypeScript and JavaScript Language Features
3. click on Disable

1. 转到扩展选项卡
2. 搜索@builtin TypeScript 和 JavaScript 语言功能
3. 点击禁用

回答by Adeel Imran

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

用"javascript.validate.enable": false你的VS代码设置，它没有做禁止ESLINT。我同时使用 ESLINT 和 Flow。只需按照说明Flow For Vs Code Setup

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

在 settings.json 中添加这一行。帮助 "javascript.validate.enable": false

回答by EdSF

You must use a .tsfile - e.g. test.tsto get Typescript validation, intellisensetypingof vars, return types, as well as "typed" error checking (e.g. passing a stringto a method that expects an numberparam will error out).

你必须使用一个.ts文件——例如test.ts获取 Typescript验证、typing变量的智能感知、返回类型以及“类型化”错误检查（例如，将 a 传递string给期望number参数会出错的方法）。

It will be transpiled into (standard) .jsvia tsc.

它将.js通过tsc.

---

---

Update (11/2018):

更新（11/2018）：

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

需要根据反对票、非常有用的评论和其他答案进行澄清。

types

types

• Yes, you can do typechecking in VS Code in .jsfiles with @ts-check- as shown in the animation

• What I originally was referring to for Typescripttypesis something like this in .tswhich 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 Javascripthello-world.jsfile:

  //@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

• 是的，您可以使用- 如动画所示type检查.js文件中的 VS Code@ts-check

• 我最初指的Typescripttypes是这样的，.ts其中并不完全相同：

  hello-world.ts

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

  这不会编译。 Error: Type "1" is not assignable to String

• 如果您在Javascripthello-world.js文件中尝试过此语法：

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

  OP引用的错误信息如下所示： [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.

如果我错过了涵盖此内容以及 OP 上下文的内容，请添加。让我们都来学习。

回答by Kenny Hammerlund

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 javascriptreactnot typescriptreactso check your settings for the following entries.

对于任何登陆这里并且所有其他解决方案都不起作用的人，请尝试一下。我正在使用 typescript + react，我的问题是我正在将 vscode 中的文件关联起来，因为javascriptreact没有typescriptreact检查以下条目的设置。

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