Os 'tipos' de js só podem ser usados ​​em um arquivo .ts - Código do Visual Studio usando @ ts-check

105

Estou começando a usar o TypeScript em um projeto Node no qual estou trabalhando no Visual Studio Code. Eu queria seguir a estratégia "opt-in", semelhante ao Flow. Portanto, coloquei // @ts-checkno topo do meu .jsarquivo na esperança de habilitar o TS para esse arquivo. No final das contas, eu quero a mesma experiência de "linting" que o Flow, portanto instalei o plug-in TSLint para ver avisos / erros do Intellisense.

Mas com meu arquivo parecido com:

// @ts-check

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

e meu tsconfig.jsonarquivo se parece com ...

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

Recebo este erro: [js] 'types' can only be used in a .ts file.conforme mostrado abaixo na imagem.

erro de vscode para ts

Eu vi esta questão que recomendava desativar a validação de javascript no vscode, mas isso não me mostra nenhuma informação do TypeScript Intellisense.

Tentei definir tslint.jsEnablecomo trueem minhas configurações de vscode, conforme mencionado nos documentos de extensão do TSLint, mas não tive sorte.

Qual é a configuração correta para usar .jsarquivos com TypeScript e obter o Intellisense para que eu saiba quais são os erros em meu código antes de executar qualquer comando TS?

James
fonte
Você tem algum erro se alterar a extensão para ts?
Israel Zinc
@ israel.zinc alterando a extensão para .tsme mostrar os erros / avisos de TS conforme o esperado. Eu acho que isso poderia funcionar, mas eu esperava mais do método opt-in usando @ts-checkao mesmo tempo mantendo todas as minhas extensões como.js
James
Possível duplicata do código
.ts
@ BuZZ-dEE pode ser, mas as respostas não resolveram o problema. Eu mencionei isso na minha pergunta original.
James

Respostas:

203

Estou usando @flow com vscode, mas tive o mesmo problema.

Eu resolvi com estas etapas:

  1. instale a extensão Flow Language Support
  2. desative a extensão TypeScript integrada:

Como desativar o TypeScript integrado:

  1. vá para a guia de extensões
  2. procure @builtin TypeScript e recursos de linguagem JavaScript
  3. clique em Desativar
Idan Dagan
fonte
5
A resposta aceita nem sempre é correta. Há um bug no VSCode com React Native e Flow que dá a mesma mensagem em arquivos .js, e nesse caso VOCÊ NÃO DEVE mudar para .ts, mas continuar com .js e corrigir o problema como sugerido aqui !!
pashute de
107
Apenas para sua informação: desativar essa extensão basicamente anula todas as coisas boas sobre o desenvolvimento de JS com VSCode. Em vez disso, você deve apenas adicionar o seguinte em seu arquivo json de configurações: "javascript.validate.enable": false
heez
1
como @heez mencionou, isso afetará, encontrar referências a arquivos javascript, preenchimento automático etc. não desabilita os recursos da linguagem Javascript.
Ajitsen
2
A resposta válida foi dita por @heez
Asim Olmez
1
@heez obrigado pelo save, eu descobri. Sem erro agora. Pode usar o código do Visual Studio, finalmente.
Anish Arya
93

Use "javascript.validate.enable": falsenas configurações do VS Code, ele não desativa o ESLINT. Eu uso ESLINT e Flow. Basta seguir as instruções de Fluxo para configuração do código Vs

Adicionando esta linha em settings.json. Ajuda "javascript.validate.enable": false

Adeel Imran
fonte
4
Com isso, você não tem que desativar a escrita. Ambos podem existir. Melhor solução!
Nirus
2
Se você estiver usando ESLint para validar seu Javascript, esta resposta é a melhor solução. Mais informações: code.visualstudio.com/docs/languages/… e também github.com/flowtype/flow-for-vscode#setup
Beau Smith
1
Onde posso encontrar o arquivo settings.json.?
i18n
1
Hi @ i18n Vá para: Código -> Preferências -> Configurações -> Extensões -> Role para baixo e encontre "Editar em settings.json". Na verdade, encontrar o caminho sob o seguinte: 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"}clique em Editar no settings.json e acrescentar o seguinte: "javascript.validate.enable": false.
Fotis Tsakiris
melhor ..funciona bem para mim
Betini O. Heleno
0

Você deve usar um .tsarquivo - por exemplo, test.tspara obter a validação do Typecript, intellisense typing de vars, tipos de retorno, bem como verificação de erro "digitada" (por exemplo, passar um stringpara um método que espera umnumber parâmetro resultará em erro).

Ele será transpilado para (padrão) .js viatsc .


Atualização (11/2018):

Esclarecimento necessário com base em votos negativos, comentários muito úteis e outras respostas.

types

  • Sim, você pode fazer o typecheck-in do VS Code em .jsarquivos com @ts-check- como mostrado na animação

  • O que eu originalmente estava me referindo para o texto datilografado types é algo assim, no .tsqual não é exatamente a mesma coisa:

    hello-world.ts

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

    Isso não vai compilar. Error: Type "1" is not assignable to String

  • se você tentou essa sintaxe em um arquivo Javascript hello-world.js :

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

    A mensagem de erro referenciada por OP é mostrada: [js] 'types' can only be used in a .ts file

Se houver algo que perdi que cubra isso e também o contexto do OP, adicione. Vamos todos aprender.

EdSF
fonte
Eu encontrei alguns artigos que sugerem que você pode usar todos os recursos do TS em um arquivo JS. Aqui está um da Smashing Magazine , um problema do GitHub para vscode que descreve a configuração e algumas notas de versão para vscode
James
@ jamez14 Não tentei / tive necessidade de não usar .ts. IINM, as amostras mostram verificação de erros e intellisense . O problema que você tem é (estático) typeing suas variáveis, e de retorno types, bem como - por exemplo foo:string, bar:number, fubar:MyClass, myMethod(f:Array):void, anotherMethod():string. Hth ...
EdSF de
sim, parece que você está certo com sua avaliação. Depois de examinar mais os exemplos, vejo que é apenas verificação de erro JS, não TS, ao usar o @ts-checkatributo. Muito enganador ...
James
-1

Pra quem pousar aqui e todas as outras soluções não funcionaram dá uma chance. Estou usando typescript + react e meu problema era que eu estava associando os arquivos em vscode para javascriptreactnão typescriptreactverificar suas configurações para as entradas a seguir.

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