otomatis daya kompilasi typescript ing Visual Studio Code

Ing kirim kita bakal ngatasi loro masalah: 1) printah “tsk” Iku ora dikenali ing terminal terpadu kode VS, e 2) kompilasi ora bisa otomatis nalika nyimpen file “.ts” (Ketik Script).

introduksi

Cukup kanggo contextualize, ing TypeScript Nanging ngidini sampeyan kanggo nulis kode nggunakake struktur banget diketik lan wis kode iki nyawiji kanggo murni JavaScript. wis Visual Code Studio Iku kode editor salib-platform digawe dening Microsoft.

// Versi digunakake ing Post iki:
- visual Studio (VS) kode: versi 1.14.1
- Typescript: versi 2.4.1

Iki tip gampang, nanging sampeyan bisa uga duwe masalah yen ora ngerti apa sing lagi dilakoni: cilik :D

Node.js lan instalasi typescript

Salah siji cara kanggo nginstal typescript liwat manager paket Node.js (asl – manager paket Node), kanggo liyane nggunakake-lo, sampeyan kudu nginstal Node.js.

Sawise nginstall Node ing, mbukak utawa terminal (printah) lan mbukak printah ing ngisor kanggo nginstal o TypeScript:

Npm nginstal -g typescript

Senajan Terminal Windows (Linux), nggawe test run saka typescript ing mriksa versi diinstal. printah “tsk” Iku acronym kanggo Compiler typescript.

tsk -v

masalah

Masalah iku printah “tsk” Iku functioned biasane ing Windows Terminal, nanging ora ing terminal terpadu teka ing Visual Code Studio dhewe (kode VS), nampilake kesalahan iki nduwé:

'Tut' ora dikenali minangka printah internal utawa njaba,program operable utawa kumpulan berkas.

malih, Aku ora arep mbukak printah “tsk” kanggo saben-saben aku wanted kanggo ngumpulake file “.ts” (extension kanggo typescript). banjur, minangka tansah nggawe daya kompilasi otomatis (CTRL + S)? Iki apa bakal kita waca.

kasalahan

Ketaman masalah iki, Posts Aku ketemu matur nggunakake compileOnSave, nanging iki mung didhukung dening Visual Studio 2015 com TypeScript> = 1.8.4 e atom-typescript plugin. ing tembung liyane, ora apik nggunakake compileOnSave ora “tsconfig.json” apa Visual Studio Code, kode ngisor ora bisa:

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

solusi

TSC ing Terminal Code VS ing terpadu

Kawitan kita ngatasi masalah tsk ora bisa dikenali ing terminal terpadu saka Visual Studio Code (kode VS).

sawetara Posts Padha suggest panggolekan path tsk utawa Npm ing global lingkungan PATH, nanging cara sing gampang kanggo ngatasi iki dilakoni panginstalan “TypeScript kanggo Visual Studio, kang kompatibel kanggo Code VS uga.

saiki ya, sawise instalasi, mbukak panel operasi saka Visual Studio Code, typing:

// trabasan tombol kanggo terminal terpadu saka Visual Studio Code:
CTRL+:
// Utawa nggunakake menu kanggo mbukak terminal ing Visual Studio Code:
View > Terminal Integrated

Coba priksa versi typescript ing langsung terminal Integrasi Code VS (Ora ing Windows Terminal), lan bakal mbokmenawa bisa digunakake:

tsk -v

kompilasi otomatis nalika nyimpen file sing .ts

Miturut terminal Code VS iku posisi ing direktori script Panjenengan (.ts), contone:

cd C:\wamp64  www  ts

Nggawe berkas tsconfig.json ngetik ing Code VS terminal:

tsk --init

Elinga yen file “tsconfig.json” Iku bakal digawe ing “C:\wamp64 www ts” (direktori saiki).

Bukak tsconfig.json lan ngaktifake pilihan “sourceMap”: bener, lan nyimpen owah-owahan ing, njupuk uga:

  "compilerOptions": {
    /* Pilihan dhasar */
    "target": "es5",                          /* Panjenengan target versi ECMAScript: 'ES3' (standar), 'ES5', 'ES2015', 'ES2016', 'ES2017', utawa 'ESNEXT'. */
    "module": "commonjs",                     /* Panjenengan modul generasi kode: 'Commonjs', 'AMD', 'Sistem', 'Umd', 'Es2015', utawa 'ESNext'. */
    // "lib": [],                             /* Panjenengan file perpustakaan kanggo kalebu ing kompilasi ing:  */
    // "allowJs": bener,                       /* Allow javascript file kanggo compile. */
    // "checkJs": bener,                       /* kasalahan Report in file .js. */
    // "jsx": "preserve",                     /* Panjenengan JSX generasi kode: 'Ngreksa', 'Nanggepi-native', utawa 'nanggepi'. */
    // "declaration": bener,                   /* Nggawé berkas '.d.ts' cocog. */
    "sourceMap": bener,                     /* Nggawé cocog 'miturut negara anggota .Peta' file. */
    // "outFile": "./",                       /* Concatenate lan emit output menyang berkas single. */
    // "outDir": "./",                        /* Pangalihan struktur output kanggo direktori. */
    // "rootDir": "./",                       /* Nemtokake direktori file input. Gunakake kanggo ngontrol struktur direktori output karo --outDir. */
    ... terus ...

rauh, Saiki sampeyan mung pindhah ing terminal VS Code lan ketik perintah:

tsk -w

printah iki ngawasi (utawa nonton, mulane “w” de watch) aplikasi lan owah-owahan ing file .ts, nalika disimpen, bakal pangumpulan langsung .JS.

Mekaten!

Total accesses: 9221

Ninggalake a Reply

Panjenengan alamat email ora bisa diterbitake. Perangkat kothak ditandhani karo *