js 'tipos' solo se pueden usar en un archivo .ts - Visual Studio Code usando @ ts-check

104

Estoy empezando a usar TypeScript en un proyecto de Node en el que estoy trabajando en Visual Studio Code. Quería seguir la estrategia "opt-in", similar a Flow. Por lo tanto, puse // @ts-checken la parte superior de mi .jsarchivo con la esperanza de habilitar TS para ese archivo. En última instancia, quiero la misma experiencia de "linting" que Flow, por lo tanto, instalé el complemento TSLint para poder ver las advertencias / errores de Intellisense.

Pero con mi archivo luciendo así:

// @ts-check

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

y mi tsconfig.jsonarchivo parece ...

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

Recibo este error: [js] 'types' can only be used in a .ts file.como se muestra a continuación en la imagen.

error de vscode para ts

Vi esta pregunta que recomendaba deshabilitar la validación de JavaScript en vscode, pero eso no me muestra ninguna información de TypeScript Intellisense.

Intenté fijar tslint.jsEnablea trueen la configuración de mi vscode como se menciona en los documentos de extensión TSLint pero no hay suerte.

¿Cuál es la configuración correcta para usar .jsarchivos con TypeScript y obtener Intellisense para saber cuáles son los errores en mi código antes de ejecutar cualquier comando de TS?

James
fuente
¿Tiene algún error si cambia la extensión a ts?
Israel Zinc
@ israel.zinc cambiando la extensión para .tsmostrarme los errores / advertencias de TS como se esperaba. Supongo que esto podría funcionar, pero esperaba que se usara más el método de suscripción @ts-checkmientras mantenía todas mis extensiones como.js
james
Posible duplicado del código
.ts
@ BuZZ-dEE podría ser, pero las respuestas allí no resolvieron el problema. Mencioné esto en mi pregunta original.
james

Respuestas:

203

Estoy usando @flow con vscode pero tuve el mismo problema.

Lo resolví con estos pasos:

  1. instalar la extensión Flow Language Support
  2. deshabilite la extensión incorporada de TypeScript:

Cómo deshabilitar TypeScript incorporado:

  1. ir a la pestaña de extensiones
  2. busque @builtin TypeScript y características del lenguaje JavaScript
  3. haga clic en Desactivar
Idan Dagan
fuente
5
La respuesta aceptada no siempre es correcta. Hay un error en VSCode con React Native y Flow que da el mismo mensaje en archivos .js, y en ese caso NO DEBE cambiar a .ts, ¡sino continuar con .js y solucionar el problema como se sugiere aquí!
pashute
105
Solo un FYI: deshabilitar esta extensión básicamente anula todas las cosas buenas sobre el desarrollo de JS con VSCode. En su lugar, solo debe agregar lo siguiente en su archivo json de configuración: "javascript.validate.enable": false
heez
1
como @heez ha mencionado, esto afectará, encontrar referencias a archivos javascript, autocompletar, etc.no deshabilite las características del lenguaje Javascript.
Ajitsen
2
La respuesta válida fue dicha por @heez
Asim Olmez
1
@heez gracias por salvar, me enteré. No hay error ahora. Puede usar el código de Visual Studio finalmente.
Anish Arya
94

Úselo "javascript.validate.enable": falseen la configuración de su código VS, no deshabilita ESLINT. Utilizo tanto ESLINT como Flow. Simplemente siga las instrucciones Flow For Vs Code Setup

Añadiendo esta línea en settings.json. Ayuda "javascript.validate.enable": false

Adeel Imran
fuente
4
Con esto no tiene que deshabilitar el mecanografiado. Ambos pueden existir. ¡Mejor solución!
Nirus
2
Si está utilizando ESLint para validar su Javascript, esta respuesta es la mejor solución. Más información: code.visualstudio.com/docs/languages/… y también github.com/flowtype/flow-for-vscode#setup
Beau Smith
1
¿Dónde puedo encontrar el archivo settings.json?
i18n
1
Hola @ i18n Ve a: Código -> Preferencias -> Configuración -> Extensiones -> Desplázate hacia abajo y busca "Editar en settings.json". En realidad encontrar el más bajo este: 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"}haga clic en Editar en settings.json y añadir lo siguiente: "javascript.validate.enable": false.
Fotis Tsakiris
mejor ... funciona bien para mí
Betini O. Heleno
1

Debe usar un .tsarchivo, por ejemplo, test.tspara obtener la validación de TypeScript , intellisensetyping de vars, tipos de retorno, así como la verificación de errores "escritos" (por ejemplo, pasar un stringa un método que espera que un numberparámetro genere un error).

Se transpilará en (estándar) a .js través detsc .


Actualización (11/2018):

Se necesita una aclaración basada en votos negativos, comentarios muy útiles y otras respuestas.

types

  • Sí, puede typeverificar VS Code en .jsarchivos con @ts-check, como se muestra en la animación

  • Lo que originalmente me refería para Typecript types es algo como esto en el .tsque no es exactamente lo mismo:

    hello-world.ts

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

    Esto no se compilará. Error: Type "1" is not assignable to String

  • si probó esta sintaxis en un archivo Javascript hello-world.js :

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

    Se muestra el mensaje de error al que hace referencia OP: [js] 'types' can only be used in a .ts file

Si hay algo que me perdí que cubra esto así como el contexto del OP, por favor agregue. Aprendamos todos.

EdSF
fuente
Encontré algunos artículos que sugieren que puede usar todas las funciones de TS dentro de un archivo JS. Aquí hay uno de Smashing Magazine , un problema de GitHub para vscode que describe la configuración y algunas notas de la versión para vscode
james
@ jamez14 No lo he probado / tuve la necesidad de no usar .ts. IINM, las muestras muestran comprobación de errores e intellisense . El problema que tiene es (estática) typeing sus variables, y el retorno typestambién - por ejemplo foo:string, bar:number, fubar:MyClass, myMethod(f:Array):void, anotherMethod():string. Hth ...
EdSF
sí, parece que está en lo cierto con su evaluación. Después de mirar más los ejemplos, veo que es solo una verificación de errores JS, no TS, cuando se usa el @ts-checkatributo. Muy engañoso ...
James
-1

Para cualquiera que aterrice aquí y todas las otras soluciones no funcionaron, pruebe esto. Estoy usando mecanografiado + reacciono y mi problema era que yo era asociar los archivos de vscode como javascriptreactno typescriptreacta fin de comprobar la configuración de las siguientes entradas.

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