js 'types' można używać tylko w pliku .ts - Visual Studio Code przy użyciu @ ts-check

106

Zaczynam używać TypeScript w projekcie Node, nad którym pracuję w Visual Studio Code. Chciałem zastosować strategię „opt-in”, podobnie jak w przypadku Flow. Dlatego umieszczam // @ts-checkna początku mojego .jspliku w nadziei, że włączę TS dla tego pliku. Ostatecznie chcę mieć takie same wrażenia z „lintingu” jak Flow, dlatego zainstalowałem wtyczkę TSLint, aby zobaczyć ostrzeżenia / błędy Intellisense.

Ale z moim plikiem wyglądającym tak:

// @ts-check

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

a mój tsconfig.jsonplik wygląda jak ...

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

Otrzymuję ten błąd: [js] 'types' can only be used in a .ts file.jak pokazano poniżej na obrazku.

błąd z vscode dla ts

Widziałem to pytanie, które zalecało wyłączenie walidacji javascript w vscode, ale wtedy nie pokazuje mi żadnych informacji TypeScript Intellisense.

Próbowałem ustawienie tslint.jsEnablesię truew moich ustawieniach vscode jak wspomniano w TSLint docs przedłużających ale bez powodzenia tam.

Jaka jest prawidłowa konfiguracja, aby używać .jsplików z TypeScript i pobierać Intellisense, aby wiedzieć, jakie są błędy w moim kodzie, zanim uruchomię jakiekolwiek polecenia TS?

James
źródło
Czy masz jakiś błąd, jeśli zmienisz rozszerzenie na ts?
Israel Cinc,
@ israel.zinc zmieniając rozszerzenie, aby .tspokazywać mi błędy / ostrzeżenia TS zgodnie z oczekiwaniami. Wydaje mi się, że to może zadziałać, ale liczyłem na większą część metody opt-in przy @ts-checkjednoczesnym zachowaniu wszystkich moich rozszerzeń.js
james
Możliwy duplikat kodu
.ts
@ BuZZ-dEE może być, ale odpowiedzi tam nie rozwiązały problemu. Wspomniałem o tym w moim pierwotnym pytaniu.
james

Odpowiedzi:

204

Używam @flow z vscode, ale miałem ten sam problem.

Rozwiązałem to w ten sposób:

  1. zainstaluj rozszerzenie Flow Language Support
  2. wyłącz wbudowane rozszerzenie TypeScript:

Jak wyłączyć wbudowany TypeScript:

  1. przejdź do zakładki rozszerzenia
  2. wyszukaj funkcje języka @builtin TypeScript i JavaScript
  3. kliknij Wyłącz
Idan Dagan
źródło
5
Przyjęta odpowiedź nie zawsze jest poprawna. W VSCode z React Native i Flow jest błąd, który wyświetla ten sam komunikat w plikach .js. W takim przypadku NIE WOLNO zmieniać na .ts, ale kontynuować z .js i rozwiązać problem zgodnie z sugestią tutaj !!
pashute
107
Tylko do Twojej wiadomości: wyłączenie tego rozszerzenia w zasadzie unieważnia wszystkie miłe rzeczy związane z rozwojem JS w VSCode. Zamiast tego powinieneś po prostu dodać do swojego pliku json ustawień: "javascript.validate.enable": false
heez
1
jak wspomniał @heez, będzie to miało wpływ, znajdowanie odniesień do plików javascript, autouzupełnianie itp. nie wyłącza funkcji języka Javascript.
Ajitsen
2
Prawidłowa odpowiedź została udzielona przez @heez
Asim Olmez
1
@heez dzięki za uratowanie, dowiedziałem się. Teraz nie ma błędu. Wreszcie może używać kodu Visual Studio.
Anish Arya
94

Użyj "javascript.validate.enable": falsew ustawieniach VS Code, nie wyłącza ESLINT. Używam zarówno ESLINT, jak i Flow. Wystarczy postępować zgodnie z instrukcjami Flow For Vs Code Setup

Dodanie tego wiersza w settings.json. Pomaga "javascript.validate.enable": false

Adeel Imran
źródło
4
Dzięki temu nie musisz wyłączać maszynopisu. Obie mogą istnieć. Najlepsze rozwiązanie!
Nirus
2
Jeśli używasz ESLint do sprawdzania poprawności JavaScript, ta odpowiedź jest najlepszym rozwiązaniem. Więcej informacji: code.visualstudio.com/docs/languages/ ... a także github.com/flowtype/flow-for-vscode#setup
Beau Smith
1
Gdzie mogę znaleźć plik settings.json.?
i18n
1
Hi @ i18n Idź do: Kod -> Preferencje -> Ustawienia -> Rozszerzenia -> Przewiń w dół i znajdź „Edytuj w settings.json”. Faktycznie znaleźć jeden pod tym: 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"}kliknij Edytuj w settings.json i dodać to: "javascript.validate.enable": false.
Fotis Tsakiris
najlepiej ... działa dobrze dla mnie
Betini O. Heleno
0

Musisz użyć .tspliku - np. test.tsAby uzyskać walidację Typescript , intelisensetyping of vars, typy zwracane, a także sprawdzanie "wpisanych" błędów (np. Przekazanie a stringdo metody, która oczekuje numberparametru, spowoduje błąd).

Zostanie przeniesiony do (standard) .js za pośrednictwemtsc .


Aktualizacja (11/2018):

Potrzebne jest wyjaśnienie na podstawie głosów przeciw, bardzo pomocnych komentarzy i innych odpowiedzi.

types

  • Tak, możesz typesprawdzać VS Code w .jsplikach za pomocą @ts-check- jak pokazano na animacji

  • To, do czego pierwotnie odnosiłem się w przypadku maszynopisu,types to coś takiego, .tsco nie jest tym samym:

    hello-world.ts

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

    To się nie skompiluje. Error: Type "1" is not assignable to String

  • jeśli wypróbowałeś tę składnię w pliku Javascript hello-world.js :

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

    Wyświetlany jest komunikat o błędzie, do którego odwołuje się OP: [js] 'types' can only be used in a .ts file

Jeśli jest coś, co przegapiłem, co obejmuje to, a także kontekst PO, dodaj. Nauczmy się wszyscy.

EdSF
źródło
Znalazłem kilka artykułów, które sugerują, że możesz używać wszystkich funkcji TS w pliku JS. Oto jeden z Smashing Magazine , problem z GitHub dla vscode, który opisuje konfigurację i kilka informacji o wydaniu dla vscode
James,
@ jamez14 Nie próbowałem / nie miałem potrzeby nie używać .ts. IINM, próbki pokazują kontrolę błędów i inteligencję . Kwestia masz jest (statyczny) typeing zmienne i powrotu types, jak również - na przykład foo:string, bar:number, fubar:MyClass, myMethod(f:Array):void, anotherMethod():string. Hth ...
EdSF
tak, wygląda na to, że masz rację ze swoją oceną. Po dokładniejszym przyjrzeniu się przykładom widzę, że jest to po prostu sprawdzanie błędów JS, a nie TS, podczas używania @ts-checkatrybutu. Bardzo mylące ...
james
-1

Dla każdego, kto tu wyląduje, a wszystkie inne rozwiązania nie zadziałały, spróbuj. Używam TypeScript + React i moim problemem było to, że kojarzyłem pliki w vscode, ponieważ javascriptreactnie, typescriptreactwięc sprawdź ustawienia dla następujących wpisów.

   "files.associations": {
    "*.tsx": "typescriptreact",
    "*.ts": "typescriptreact"
  },
Kenny Hammerlund
źródło