otomatis hemat kompilasi typescript di Visual Studio Code

Di posting urang ngajawab dua masalah: 1) parentah “tsc” Ieu henteu dipikawanoh di terminal terpadu kode bobodoran, e 2) kompilasi teu dianggo otomatis nalika nyimpen file “.ts” (ketik Script).

perkenalan

Ngan mun contextualize, éta TypeScript Eta ngidinan Anjeun pikeun nulis kode maké struktur niatna diketik na geus kode ieu disusun nepi ka murni JavaScript. enggeus Visual Code Studio Ieu kode redaktur cross-platform dijieun ku Microsoft.

// Versi dipaké di Post ieu:
- visual Studio (bobodoran) kode: Vérsi 1.14.1
- Typescript: Vérsi 2.4.1

Ieu mangrupa tip gampang, Tapi anjeun bisa manggihan masalah lamun teu nyaho naon nuju anjeun lakukeun: bisi kuring :D

Node.js tur instalasi typescript

Hiji cara masang nyaeta typescript ngaliwatan manajer pakét Node.js (dpl – manajer pakét titik), pikeun leuwih lengkep maké-lo, Anjeun kedah mimitina masang Node.js.

Sanggeus masang titik éta, kabuka atanapi terminal (parentah) tur ngajalankeun paréntah di handap pikeun install typescript:

npm install -g typescript

Sanajan Terminal Windows (atawa Linux Ubuntu), ngadamel test ngaji tina typescript nu mariksa versi dipasang. sorana “tsc” Ieu mangrupa akronim pikeun kompiler typescript.

tsc -v

masalah

Masalahna nyaeta paréntah “tsc” Ieu functioned ilaharna dina Windows Terminal, tapi teu di terminal terpadu datang di Visual Code Studio sorangan (kode bobodoran), mintonkeun kasalahan handap:

'Tsc' teu dipikawanoh siga hiji paréntah internal atanapi éksternal,program operable atanapi tumpak file.

komo, Kuring teu hayang ngajalankeun paréntah “tsc” keur unggal waktu kuring hayang compile file a “.ts” (extension pikeun typescript). terus, sakumaha salawasna nyieun hemat kompilasi otomatis (Ctrl + S)? Ieu naon wajib urang tingali.

kasalahan séjén

Tackling masalah ieu, Tulisan kuring kapanggih nyebutkeun ngagunakeun compileOnSave, Tapi ieu ukur dirojong ku Visual Studio 2015 com TypeScript> = 1.8.4 e atom-typescript plugin. istilah sanésna, euweuh pamakéan alus compileOnSave teu “tsconfig.json” ngalakukeun Visual Studio Code, Kode di handap iyeu moal jalan mun:

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

leyuran

TSC di Terminal Code bobodoran nu terpadu

Kahiji urang ngajawab masalah tsc teu dipikawanoh di terminal terpadu teh Visual Studio Code (kode bobodoran).

sababaraha tulisan Aranjeunna nyarankeun putting jalur tina ck atanapi npm dina variabel lingkungan jalur, tapi mangrupakeun cara nu panggampangna pikeun ngajawab ieu lakukeun pamasangan “TypeScript pikeun Visual Studio, nu cocog pikeun Code bobodoran ogé.

kiwari enya, sanggeus instalasi, Ngabuka panél operasi tina Visual Studio Code, Teclando:

// potong kompas konci pikeun terminal terpadu teh Visual Studio Code:
Ctrl+`
// Atawa ngagunakeun menu pikeun buka terminal dina Visual Studio Code:
Témbongkeun > Terminal Integrated

Coba mun pariksa versi typescript nu langsung terminal terpadu Code bobodoran (Teu di Windows Terminal), sarta bakal meureun jadi gawe:

tsc -v

kompilasi otomatis nalika nyimpen file a .ts

Ku terminal Code bobodoran nyaéta posisi dina diréktori Aksara Anjeun (.ts), contona:

cd C:\wamp64  www  ts

Jieun file tsconfig.json ku ngetikkeun di Code bobodoran terminal:

tsc --init

Catet yén file a “tsconfig.json” Eta bakal dijieun dina “C:\wamp64 www ts” (diréktori ayeuna).

buka tsconfig.json tur ngaktipkeun pilihan nu “sourceMap”: leres, tur nyimpen robah teh, sia ogé:

  "compilerOptions": {
    /* Pilihan dasar */
    "target": "es5",                          /* Sebutkeun target Vérsi ECMAScript: 'ES3' (standar), 'ES5', 'ES2015', 'ES2016', 'ES2017', atanapi 'ESNEXT'. */
    "module": "commonjs",                     /* Sebutkeun modul generasi kode: 'Commonjs', 'AMD', 'Sistem', 'Umd', 'Es2015', atanapi 'ESNext'. */
    // "lib": [],                             /* Sebutkeun file perpustakaan anu kaasup kompilasi éta:  */
    // "allowJs": leres,                       /* Ngawenangkeun JavaScript file bisa disusun. */
    // "checkJs": leres,                       /* kasalahan Laporan di file .js. */
    // "jsx": "preserve",                     /* Sebutkeun JSX generasi kode: 'Melestarikan', 'Meta-pituin', atanapi 'meta'. */
    // "declaration": leres,                   /* Dibangkitkeun file '.d.ts' saluyu. */
    "sourceMap": leres,                     /* Dibangkitkeun saluyu '.map' file. */
    // "outFile": "./",                       /* Concatenate na emit output keur file tunggal. */
    // "outDir": "./",                        /* Alihan struktur output keur diréktori nu. */
    // "rootDir": "./",                       /* Sebutkeun diréktori akar file input. Paké ngadalikeun struktur diréktori kaluaran jeung --outDir. */
    ... terus ...

geuwat, Ayeuna anjeun ngan buka di terminal bobodoran Code tur ngetik paréntah:

tsc -w

paréntah Ieu ngawaskeun (atawa ningali, kituna “w” lalajo) aplikasi tur sagala parobahan koropak .ts, lamun kuring ngahemat, iyeu teh kompilasi saharita .jS.

Éta pisan!

total aksés: 10612

Leave a Reply

alamat surélék anjeun teu bakal dipedar. widang diperlukeun anu dicirian ku *