Përpilimi automatik kur kurseni TypeScript në Kodin Visual Studio

Në këtë Post do të zgjidhim dy probleme: 1) komandës “tsc” nuk njihet në terminalin e integruar të kodit VS, e 2) përpilimi nuk punon automatikisht kur ruani skedarin “.ts” (Shkruaj skenarin).

paraqitje

Vetëm për të kontekstualizuar, o TypeScript ju lejon të shkruani kod duke përdorur një strukturë të shtypur fort dhe të keni këtë kod të përpiluar në JavaScript të pastër. Une o Kodi i Studio Visual është një redaktues kodesh ndër-platformë i krijuar nga Microsoft.

// Versionet e përdorura në këtë postim:
- Studio vizuale (VS) Kodi: version 1.14.1
- Makinë shkrimi: version 2.4.1

Kjo është një këshillë e lehtë, por mund të keni probleme nëse nuk e dini se çfarë po bëni: rasti im :D

Node.js dhe Instalimi TypeScript

Një mënyrë për të instaluar TypeScript është përmes menaxherit të paketave Node.js (mbi nivelin e detit – Menaxher i paketave të nyjeve), më shumë për ta përdorur atë, ju së pari keni nevojë instaloni Nyja.js.

Pas instalimit të Node, hapur ose terminal (komandë) dhe ekzekutoni komandën e mëposhtme për instalar o TypeScript:

instaloni npm -g daktilografia

Ende nga terminali i Windows (ose Linux), testoni TypeScript duke verifikuar versionin e instaluar. Komanda “tsc” është një akronim për përpiluesin TypeScript.

tsc -v

problem

Problemi është se komanda “tsc” ka punuar normalisht në terminalin Windows, por jo në terminalin e integruar që vjen brenda vetë Visual Studio Code. (Kodi VS), duke shfaqur gabimin e mëposhtëm:

'tsc' nuk njihet si një komandë e brendshme ose e jashtme,program ose grup i funksionueshëm skedar.

Për më tepër, Nuk doja të ekzekutoja komandën “tsc” për çdo herë që keni dashur të përpiloni një skedar “.ts” (shtrirja e shkrimit). pastaj, si gjithmonë autokompilo në save (CTRL+S)? Kjo është ajo që do të shohim më vonë.

gabime të tjera

Duke kërkuar për të zgjidhur këto probleme, Gjeta Postime që thonin të përdornin compileOnSave, por kjo mbështetet vetëm nga Visual Studio 2015 com TypeScript> = 1.8.4 e shtojca e shtypshkrimit të atomit. me fjalë të tjera, pa përdorim duke përdorur compileOnSave jo “tsconfig.json” bëni Visual Studio Code, kodi më poshtë nuk do të funksionojë:

{
   "compileOnSave": i vërtetë,
   "compilerOptions": {
       "noImplicitAny" : i vërtetë
   }
}

zgjidhje

TSC no Terminal integrado do VS Code

Së pari le të zgjidhim problemin e tsc nuk njihet në terminalin e integruar të Visual Studio Code (Kodi VS).

Disa Postimet sugjeroni vendosjen e shtegut tsc ose npm në ndryshoren e mjedisit PATH, por një mënyrë e thjeshtë për ta zgjidhur këtë ishte duke bërë instalimi i “TypeScript për Visual Studio, i cili është i pajtueshëm edhe për Kodin VS.

tani po, pas instalimit, hapni terminalin e integruar të Visual Studio Code, teclando:

// Çelësi i shkurtores për terminalin e integruar të Visual Studio Code:
CTRL+`
// Ose përdorni Menunë për të hapur terminalin në Visual Studio Code:
Pamje > Terminal i integruar

Mundohuni të kontrolloni Versioni TypeScript direkt në terminalin e integruar të Kodit VS (Jo në Windows Terminal), dhe ndoshta do të funksionojë:

tsc -v

Përpilimi automatik kur ruani një skedar .ts

Nga terminali VS Code, pozicionohuni në drejtorinë e skriptit tuaj (.ts), për shembull:

CDC:\wamp64  www  ts

krijoni skedarin tsconfig.json shtypja në Kodin terminal VS:

tsc --nisje

Vini re se një skedar “tsconfig.json” do të krijohet në “C:\wamp64 www ts” (drejtoria aktuale).

hape tsconfig.json dhe aktivizoni opsionin “burimi Harta”: i vërtetë, dhe ruani modifikimin, duke u bërë kështu:

  "compilerOptions": {
    /* Opsionet Themelore */
    "target": "es5",                          /* Specifikoni versionin e synuar të ECMAScript: 'ES3' (parazgjedhur), 'ES5', 'ES2015', 'ES2016', 'ES2017', ose 'ESNEXT'. */
    "module": "commonjs",                     /* Specifikoni gjenerimin e kodit të modulit: 'Commonjs', 'amd', 'sistem', 'umd', 'es2015', ose 'ESNext'. */
    // "lib": [],                             /* Specifikoni skedarët e bibliotekës që do të përfshihen në përmbledhje:  */
    // "allowJs": i vërtetë,                       /* Lejo që skedarët javascript të përpilohen. */
    // "checkJs": i vërtetë,                       /* Raportoni gabimet në skedarët .js. */
    // "jsx": "preserve",                     /* Specifikoni gjenerimin e kodit JSX: 'ruaj', 'reagim vendas', ose 'reagoj'. */
    // "declaration": i vërtetë,                   /* Gjeneron skedarin përkatës '.d.ts'. */
    "sourceMap": i vërtetë,                     /* Gjeneron skedarin përkatës '.map'. */
    // "outFile": "./",                       /* Lidhni dhe lëshoni dalje në një skedar të vetëm. */
    // "outDir": "./",                        /* Përcjell strukturën e daljes në drejtori. */
    // "rootDir": "./",                       /* Specifikoni drejtorinë rrënjësore të skedarëve hyrës. Përdorni për të kontrolluar strukturën e drejtorisë dalëse me --outDir. */
    ... vazhdon ...

shpejt, tani thjesht shkoni në terminalin e Kodit VS dhe shtypni komandën:

tsc -w

Kjo komandë është duke monitoruar (ose duke parë, ja përse “w” Ora) aplikacioni dhe çdo ndryshim në skedarë .ts, kur kursej, do të bëjë përpilimin e menjëhershëm në .js.

Kjo eshte!

gjithsej accesses: 10612

Lini një Përgjigju

Adresa juaj e emailit nuk do të publikohet. Fusha e kërkuar janë shënuar me *