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


104

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

但是我的文件看起来像:

// @ts-check

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

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

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

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

来自ts的vscode错误

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

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

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


如果将扩展名更改为ts,是否有任何错误?
以色列锌

@ israel.zinc更改了扩展名,以.ts按预期的方式向我显示TS错误/警告。我想这可能行得通,但是我希望@ts-check在保留所有扩展名的同时使用更多的选择加入方法.js
james


可能是@ BuZZ-dEE,但那里的答案并未解决问题。我在最初的问题中提到了这一点。
james

Answers:


203

我将@flow与vscode一起使用,但存在相同的问题。

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

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

如何禁用内置TypeScript:

  1. 转到扩展标签
  2. 搜索@builtin TypeScript和JavaScript语言功能
  3. 单击禁用

5
接受的答案并不总是正确的。带有React Native和Flow的VSCode中存在一个错误,该错误在.js文件中给出了相同的消息,在这种情况下,您不应更改为.ts,而应继续使用.js并按照此处的建议解决问题!
pashute

105
仅供参考:禁用此扩展基本上使使用VSCode进行JS开发的所有好处都无效。相反,您应该将以下内容添加到您的设置json文件中: "javascript.validate.enable": false
heez

1
正如@heez提到的那样,这将影响,找到对javascript文件的引用,自动补全等不会禁用Javascript语言功能。
Ajitsen

2
@heez说了有效的答案
Asim Olmez

1
@heez感谢您的保存,我发现了。现在没有错误。最终可以使用Visual Studio代码。
艾妮丝艾莉亚

93

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

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


4
这样,您不必禁用打字稿。两者都可以存在。最好的解决方案!
Nirus

2
如果您使用ESLint来验证Java脚本,则此答案是最佳解决方案。更多信息:code.visualstudio.com/docs/languages/…以及github.com/flowtype/flow-for-vscode#setup
Beau Smith

1
在哪里可以找到settings.json文件。
i18n

1
@ i18n,您好:转到:代码->首选项->设置->扩展->向下滚动并找到“在settings.json中编辑”。实际找到以下内容:Include Languages Enable Emmet abbreviations in languages that are not supported by default. Add a mapping here between the language and emmet supported language. E.g.: {"vue-html": "html", "javascript": "javascriptreact"}单击settings.json中的Edit并添加以下内容:"javascript.validate.enable": false
Fotis Tsakiris

最好的..作品对我来说很好
Betini O. Heleno

1

您必须使用.ts文件-例如test.ts,要进行Typescript 验证, typing对vars的智能感知,返回类型以及“类型化”错误检查(例如,将a传递string给期望number参数的方法会出错)。

将transpiled成(标准).js 通过tsc


更新(11/2018):

需要根据否决票,非常有用的评论和其他答案进行澄清。

types

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

  • 我最初为Typescript 指的types是类似这样.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

  • 如果您在Javascript hello-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

如果我错过了涵盖此内容以及操作环境的内容,请添加。让我们一起学习。


我发现一些文章建议您可以在JS文件中使用TS的所有功能。这是Smashing Magazine上的一本,这是GitHub上针对vscode的一期杂志,描述了该设置以及一些针对vscode的发行说明
james

@ jamez14我没试过/有必要使用.ts。IINM,样本显示了错误检查智能感知。你的问题是(静态)type荷兰国际集团的变量,和返回types以及-例如foo:stringbar:numberfubar:MyClassmyMethod(f:Array):voidanotherMethod():string。Hth ...
EdSF '18

是的,看来您的评估正确。在看了更多示例之后,我发现使用该@ts-check属性时它只是JS错误检查,而不是TS 。非常令人误解...
james

-1

对于在这里着陆并且所有其他解决方案均无效的人,请尝试一下。我使用的打字稿+反应,我的问题是,我是在vscode文件关联为javascriptreacttypescriptreact那么请检查您对以下条目。

   "files.associations": {
    "*.tsx": "typescriptreact",
    "*.ts": "typescriptreact"
  },
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.