Automatsko prevođenje pri čuvanju TypeScript u Visual Studio kôd

U ovoj objavi rešićemo dva problema: 1) Komandu “Tsc” nije prepoznata na terminalu integrisanog naspram koda, i 2) kompilacije ne rade automatski pri čuvanju datoteke “.Ts” (Tip skripte).

Uvod

Samo da kontekstualizujem, o TipScript vam omogućava da napišete kôd koristeći snažno otkucanu strukturu i da ovaj kod sastavite za čist JavaScript. Já o Visual Studio kôd je uređivač koda više platformi koji je kreirao Microsoft.

// Verzije korišćene u ovoj objavi:
- Vizuelni studio (Protiv) Šifru: Verzija 1.14.1
- Tipscript: Verzija 2.4.1

To je laka napojnica, ali možete imati problema ako ne znate šta radite: moj slučaj :(D)

Instalacija oglasa.js i TypeScript

Jedan od načina za instaliranje TypeScript-a je preko menadžera paketa za node.js (Npm – Menadžer paketa node), već da ga upotrebim, prvo ti treba instalirajte Čmiga.js.

Nakon instaliranja čmašne, otvaranje terminala (Komandu) i pokrenite sledeću komandu da biste instaliranje TypeScript-a:

instaliranje npm -typescript g

Još uvek kroz Windows terminal (ili Linux), testiranje opisa tipa proverom instalirane verzije. Zapovjednik “Tsc” je akronim za TypeScript Compiler.

Tsc -v

Problem

Problem je što je komanda “Tsc” normalno funkcioniše na Windows terminalu, ali ne u integrisanom terminalu koji dolazi u okviru samog Visual Studio Koda (VS kôd), prikazivanje sledeće greške:

'TSC' se ne prepoznaje as unutrašnju ili spoljašnju komandu,program ili grupa koja se može operisati Datoteke.

U dodatku, Nisam htio da pokrenem komandu “Tsc” za svaki put kada želite da prevete datoteku “.Ts” (proširenje za TypeScript). Tako, kao i uvek automatska kompilacija prilikom čuvanja (tastere CTRL+S)? To ćemo videti sledeće..

Ostale greške

Pokušavam da rešim ove probleme, Found Posts saying to use the compileOnSave, ali ovo podržava samo Visual Studio 2015 sa TypeScript >= 1.8.4 i dodatna komponenta tipa atoma. IE, nema koristi od korišćenja compileOnSave Inča “tsconfig.json” iz Visual Studio Koda, kôd ispod neće raditi:

{
   "compileOnSave": Istina,
   "compilerOptions": {
       "noImplicitAny" : Istina
   }
}

Rešenje

TSC u vs kod integrisanom terminalu

Prvo da rešimo problem Tsc nije prepoznat u integrisanom terminalu koda vizuelnog studija (VS kôd).

Neki Knjiži predlaganje stavljanja putanje tsc ili npm u promenljivu PATH okruženja, ali lak način da se ovo reši je da se napravi instalacija “TypeScript za Visual Studio, koji je kompatibilan i za VS kod.

Sad da, nakon instalacije, otvaranje integrisanog terminala vizuelnog studijskog koda, Kucanje:

// Hotkey za integrisani terminal vizuelnog studijskog koda:
Ctrl+`
// Ili koristite meni za otvaranje terminala u Visual Studio Kodu:
Prikaz > Integrisani terminal

Pokušajte da proverite TypeScript verzija direktno u integrisani VS Code terminal (Ne na Windows terminalu), i verovatno će uspeti:

Tsc -v

Automatsko prevo prevocijanje prilikom čuvanja datoteke .Ts

Vs Code terminal je pozicioniran u direktorijumu skripti (.Ts), na primer:

C CD:\wamp64wwwts

Kreiranje datoteke tsconfig.json kucanje na terminalu VS koda:

Tsc --Init

Imajte na nauda da je datoteka “tsconfig.json” će biti kreirana u “(C):\wamp64wwwts” (trenutni direktorijum).

Otvorite prozor tsconfig.json i omogućiti opciju “izvorNamap”: Istina, i sačuvaj modifikaciju, postajući tako:

  "compilerOptions": {
    /* Osnovne opcije */
    "target": "es5",                          /* Navedite ECMAScript ciljnu verziju: 'ES3' (Podrazumevani), 'ES5', 'ES2015', 'ES2016', 'ES2017', ili 'ESNEXT'. */
    "module": "commonjs",                     /* Navedite proizvodnju koda modula: 'commonjs', 'amd', 'sistem', 'hmd', 'es2015', ili 'ESNext'. */
    // "lib": [],                             /* Određivanje datoteka biblioteke koje će biti uključene u kompilaciju:  */
    // "allowJs": Istina,                       /* Dozvoli sastavljanje javascript datoteka. */
    // "checkJs": Istina,                       /* Izveštavanje o greškama u .js datotekama. */
    // "jsx": "preserve",                     /* Navedite JSX kôd generacije: 'očuvati', 'react-native', ili 'reaguj'. */
    // "declaration": Istina,                   /* Generiše odgovarajuću datoteku ".d.ts". */
    "sourceMap": Istina,                     /* Generiše odgovarajuću datoteku ".mapa". */
    // "outFile": "./",                       /* Spajanje i emiter izlaza sa jednom datotekom. */
    // "outDir": "./",                        /* Preusmeravanje izlazne strukture u direktorijum. */
    // "rootDir": "./",                       /* Određivanje osnovnog direktorijuma ulaznih datoteka. Koristi se za kontrolu strukture izlaznog direktorijuma sa --outDir. */
    ... nastavlja se ...

Odmah, agora é só ir no terminal do VS Code e digitar o comando:

Tsc -W

Este comando fica monitorando (ou vendo, por isso “W” de watch) a aplicação e qualquer alteração no arquivos .Ts, quando salvo, učiniće neposrednu kompilaciju u .Js.

To je to!

Ukupno pogodaka: 9221

ostavi odgovor

Na vaša e-mail adresa neće biti objavljene. Obavezna polja su označena sa *