js 'Typen' können nur in einer .ts-Datei verwendet werden - Visual Studio Code mit @ ts-check

104

Ich beginne mit der Verwendung von TypeScript in einem Knotenprojekt, an dem ich in Visual Studio Code arbeite. Ich wollte die "Opt-In" -Strategie verfolgen, ähnlich wie Flow. Deshalb habe ich // @ts-checkoben in meine .jsDatei gesetzt, in der Hoffnung, TS für diese Datei zu aktivieren. Letztendlich möchte ich die gleiche Erfahrung mit "Flusen" wie Flow, daher habe ich das Plugin TSLint installiert, damit ich Intellisense-Warnungen / Fehler sehen kann.

Aber mit meiner Datei, die aussieht wie:

// @ts-check

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

und meine tsconfig.jsonDatei sieht aus wie ...

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

Ich erhalte diesen Fehler: [js] 'types' can only be used in a .ts file.wie unten im Bild gezeigt.

Fehler von vscode für ts

Ich habe diese Frage gesehen, die empfohlen hat, die Javascript-Validierung in vscode zu deaktivieren, aber dann werden mir keine TypeScript Intellisense-Informationen angezeigt .

Ich habe versucht tslint.jsEnable, truein meinen vscode-Einstellungen Einstellungen vorzunehmen, wie in den TSLint-Erweiterungsdokumenten erwähnt, aber dort kein Glück.

Was ist das richtige Setup, um .jsDateien mit TypeScript zu verwenden und Intellisense zu erhalten, damit ich die Fehler in meinem Code kenne, bevor ich TS-Befehle ausführe?

James
quelle
Haben Sie einen Fehler, wenn Sie die Erweiterung in ts ändern?
Israel Zinc
@ israel.zinc Ändern der Erweiterung, .tsum mir die TS-Fehler / Warnungen wie erwartet anzuzeigen . Ich denke, das könnte funktionieren, aber ich hoffte auf mehr Opt-In-Methode, @ts-checkwährend ich alle meine Erweiterungen als.js
James
@ BuZZ-dEE mag es sein, aber die Antworten dort haben das Problem nicht gelöst. Ich habe dies in meiner ursprünglichen Frage erwähnt.
James

Antworten:

203

Ich verwende @flow mit vscode, hatte aber das gleiche Problem.

Ich habe es mit folgenden Schritten gelöst:

  1. Installieren Sie die Erweiterung Flow Language Support
  2. Deaktivieren Sie die integrierte TypeScript-Erweiterung:

So deaktivieren Sie das integrierte TypeScript:

  1. Gehen Sie zur Registerkarte Erweiterungen
  2. Suchen Sie nach @builtin TypeScript- und JavaScript-Sprachfunktionen
  3. Klicken Sie auf Deaktivieren
Idan Dagan
quelle
5
Die akzeptierte Antwort ist nicht immer richtig. Es gibt einen Fehler in VSCode mit React Native und Flow, der dieselbe Meldung in .js-Dateien ausgibt. In diesem Fall sollten Sie NICHT zu .ts wechseln, sondern mit .js fortfahren und das hier vorgeschlagene Problem beheben!
Pashute
104
Nur zu Ihrer Information: Durch Deaktivieren dieser Erweiterung werden im Grunde alle netten Dinge der JS-Entwicklung mit VSCode zunichte gemacht. Stattdessen sollten Sie einfach Folgendes in Ihre Einstellungs-JSON-Datei "javascript.validate.enable": false
einfügen
1
Wie @heez erwähnt hat, wirkt sich dies auf das Verweisen auf Javascript-Dateien, die automatische Vervollständigung usw. aus. Deaktivieren Sie die Javascript-Sprachfunktionen nicht.
Ajitsen
2
Die gültige Antwort wurde von @heez
Asim Olmez
1
@heez danke für das Speichern, fand ich heraus. Kein Fehler jetzt. Kann endlich Visual Studio Code verwenden.
Anish Arya
93

Verwendung "javascript.validate.enable": falsein Ihren VS-Code-Einstellungen. ESLINT wird nicht deaktiviert. Ich benutze sowohl ESLINT als auch Flow. Folgen Sie einfach den Anweisungen Flow For Vs Code Setup

Hinzufügen dieser Zeile in settings.json. Hilft "javascript.validate.enable": false

Adeel Imran
quelle
4
Damit müssen Sie das Typoskript nicht deaktivieren. Beides kann existieren. Beste Lösung!
Nirus
2
Wenn Sie ESLint zur Validierung Ihres Javascript verwenden, ist diese Antwort die beste Lösung. Weitere Informationen: code.visualstudio.com/docs/languages/… und auch github.com/flowtype/flow-for-vscode#setup
Beau Smith
1
Wo finde ich die Datei settings.json?
18.
1
Hi @ i18n Gehen Sie zu: Code -> Einstellungen -> Einstellungen -> Erweiterungen -> Scrollen Sie nach unten und suchen Sie "In settings.json bearbeiten". Finden Sie tatsächlich die darunter: 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"}Klicken Sie in settings.json auf Bearbeiten und fügen Sie Folgendes hinzu : "javascript.validate.enable": false.
Fotis Tsakiris
am besten .. funktioniert gut für mich
Betini O. Heleno
1

Sie müssen eine .tsDatei verwenden - z. B. test.tsum eine Typoskriptvalidierung , eine Intelligenz typing von Variablen, Rückgabetypen sowie eine "typisierte" Fehlerprüfung zu erhalten (z. B. um eine stringan eine Methode zu übergeben, die erwartet, dass ein numberParameter ausfällt).

Es wird in (Standard) .js übertsc transpiliert .


Update (11/2018):

Klarstellung erforderlich aufgrund von Abstimmungen, sehr hilfreichen Kommentaren und anderen Antworten.

types

  • Ja, Sie können typeVS-Code in .jsDateien mit @ts-check- wie in der Animation gezeigt - einchecken

  • Was ich ursprünglich für Typescript bezeichnet habe, types ist so etwas, in .tsdem es nicht ganz dasselbe ist:

    hello-world.ts

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

    Dies wird nicht kompiliert. Error: Type "1" is not assignable to String

  • Wenn Sie diese Syntax in einer Javascript- hello-world.js Datei ausprobiert haben :

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

    Die von OP referenzierte Fehlermeldung wird angezeigt: [js] 'types' can only be used in a .ts file

Wenn ich etwas verpasst habe, das dies sowie den Kontext des OP abdeckt, fügen Sie bitte hinzu. Lass uns alle lernen.

EdSF
quelle
Ich habe einige Artikel gefunden, die vorschlagen, dass Sie alle Funktionen von TS in einer JS-Datei verwenden können. Hier ist eine aus dem Smashing Magazine , eine GitHub-Ausgabe für vscode , die das Setup beschreibt, und einige Versionshinweise für vscode
james
@ jamez14 Ich habe es nicht versucht / musste es nicht benutzen .ts. IINM, die Beispiele zeigen Fehlerprüfung und Intellisense . Das Problem , das Sie haben , ist (statisch) typeing Ihre Variablen und Rückkehr typesals auch - zum Beispiel foo:string, bar:number, fubar:MyClass, myMethod(f:Array):void, anotherMethod():string. Hth ...
EdSF
Ja, es sieht so aus, als ob Sie mit Ihrer Einschätzung Recht haben. Nachdem ich mir die Beispiele genauer angesehen habe, sehe ich, dass es sich bei der Verwendung des @ts-checkAttributs nur um eine JS-Fehlerprüfung handelt, nicht um TS . Sehr irreführend ...
James
-1

Für alle, die hier landen und alle anderen Lösungen haben nicht funktioniert, probieren Sie es aus. Ich verwende Typoskript + Reagieren und mein Problem war, dass ich die Dateien in vscode zugeordnet habe, da dies javascriptreactnicht der Fall ist. typescriptreactÜberprüfen Sie Ihre Einstellungen auf die folgenden Einträge.

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