tsis siv neeg muab tso ua ke saving typescript nyob rau hauv Visual Studio Code

Nyob rau hauv no ncej peb yuav daws tau ob teeb meem: 1) hais kom ua “tsc” Nws yog tsis yog tsis paub nyob rau hauv lub kev davhlau ya nyob twg VS code, e 2) muab tso ua ke tsis ua hauj lwm thaum txuag cov ntaub ntawv “.ts” (ntaus Script).

kev taw qhia

Cia li mus contextualize, lub TypeScript Nws tso cai rau koj sau cov code siv ib tug xav ntaus qauv thiab tau no code tso ua ke rau dawb huv JavaScript. twb Visual Studio Code Nws yog ib tug ntoo khaub lig-platform code editor tsim los ntawm Microsoft.

// Versions siv nyob rau hauv qhov no Ncej:
- Visual Studio (VS) Code: version 1.14.1
- Typescript: version 2.4.1

Qhov no yog ib qho yooj yim nyiaj, tab sis tej zaum koj yuav muaj teeb meem yog tias koj tsis paub dab tsi koj nyob nraum ua: kuv cov ntaub ntawv :D

Node.js thiab typescript installation

Ib txoj kev rau nruab yog typescript los ntawm Node.js pob saib xyuas (asl – Ntawm pob saib xyuas), tab sis siv nws, koj thawj yuav tsum tau nruab los yog node.js.

Tom qab kev txhim kho cov ntawm, qhib los yog davhlau ya nyob twg (hais kom ua) thiab khiav rau nram qab hais kom ua nruab los yog typescript:

asl nruab -g typescript

Txawm tias lub qhov rais Terminal (los yog Linux), ua ib txoj kev kuaj khiav ntawm lub typescript xyuas lub ntsia version. O hais kom ua “tsc” Nws yog ib qho acronym rau typescript compiler.

tsc -v

teeb meem

Qhov teeb meem no yog hais tias qhov hais kom ua “tsc” Nws functioned nquag nyob rau hauv lub qhov rais Terminal, tab sis tsis nyob rau hauv lub kev davhlau ya nyob twg los nyob rau hauv Visual Studio Code nws tus kheej (VS code), displaying tus nram qab no yuam kev:

'Tsc' yog tsis yog tsis paub raws li ib tug nrog los yog sab nraud hais kom ua,operable kev pab cuam los yog batch cov ntaub ntawv.

Ntxiv, Kuv tsis xav khiav qhov hais kom ua “tsc” rau txhua txhua lub sij hawm kuv xav mus compile ib cov ntaub ntawv “.ts” (extension rau typescript). ces, raws li ib txwm ua tsis siv neeg muab tso ua ke uas cawm (CTRL + S)? Qhov no yog dab tsi peb yuav tsum saib.

lwm yam uas tsis

Tackling cov teeb meem, Posts kuv pom hais tias yuav siv compileOnSave, tab sis qhov no yog tsuas yog kev txhawb los ntawm Visual Studio 2015 com TypeScript> = 1.8.4 e atom-typescript plugin. nyob rau hauv lwm yam lus, tsis zoo siv compileOnSave tsis muaj “tsconfig.json” ua Visual Studio Code, cov cai hauv qab no yuav tsis ua hauj lwm:

{
   "compileOnSave": muaj tseeb,
   "compilerOptions": {
       "noImplicitAny" : muaj tseeb
   }
}

tshuaj

TSC nyob rau hauv lub kev Terminal VS Code

Ua ntej peb yuav daws tau qhov teeb meem ntawm tsc tsis tau lees paub tias nyob rau hauv lub kev davhlau ya nyob twg ntawm hoob Visual Studio Code (VS code).

ib co posts Lawv xav kom muab txoj kev ntawm tsk los yog npm nyob rau hauv lub kev puag ncig nce mus nce los, tab sis ib qho yooj yim txoj kev uas yuav daws tau qhov no yog ua installation ntawm “TypeScript rau Visual Studio, uas yog tau tshaj rau VS Code kuj.

tam sim no yog, tom qab installation, abra o davhlau ya nyob twg integrado ua Visual Studio Code, Teclando:

// shortcut tseem ceeb rau cov kev davhlau ya nyob twg ntawm hoob Visual Studio Code:
CTRL+'
// Ou siv o Ntawv qhia zaub mov para abrir o davhlau ya nyob twg tsis muaj Visual Studio Code:
Saib > Integrated Terminal

Sim mus xyuas lub version ntawm lub typescript nyiaj tso ncaj rau kev davhlau ya nyob twg VS Code (Tsis nyob rau hauv lub qhov rais Terminal), thiab yuav tej zaum yuav ua hauj lwm:

tsc -v

tsis siv neeg muab tso ua ke thaum txuag ib cov ntaub ntawv .ts

Los ntawm lub davhlau ya nyob twg VS Code yog txoj hauj lwm nyob rau hauv koj tsab ntawv directory (.ts), piv txwv li:

cd C:\wamp64  www  ts

Tsim cov ntaub ntawv tsconfig.json digitando tsis muaj davhlau ya nyob twg VS Code:

tsc --init

Nco ntsoov tias ib cov ntaub ntawv “tsconfig.json” Nws yuav tsum tau tsim nyob rau hauv “C:\wamp64 www ts” (tam sim no directory).

qhib los yog tsconfig.json thiab pab kom cov kev xaiv “sourceMap”: muaj tseeb, thiab txuag cov kev hloov, tau txais zoo:

  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Qhia kom meej ECMAScript phiaj version: 'SS3' (neej ntawd hais), 'SS5', 'ES2015', 'ES2016', 'ES2017', los yog 'ESNEXT'. */
    "module": "commonjs",                     /* Qhia kom meej module code tiam: 'Commonjs', 'AMD', 'System', 'Umd', 'Es2015', los yog 'ESNext'. */
    // "lib": [],                             /* Qhia kom meej cov tsev qiv ntawv cov ntaub ntawv yuav tsum tau muaj nyob rau hauv lub tso ua ke:  */
    // "allowJs": muaj tseeb,                       /* Cia javascript cov ntaub ntawv yuav tsum tau muab tso ua ke. */
    // "checkJs": muaj tseeb,                       /* Daim ntawv qhia txog uas tsis nyob rau hauv cov ntaub ntawv .js. */
    // "jsx": "preserve",                     /* Qhia kom meej JSX code tiam: 'Khaws cia', 'Hnov mob-haiv neeg', los yog 'hnov mob'. */
    // "declaration": muaj tseeb,                   /* Generates coj '.d.ts' cov ntaub ntawv. */
    "sourceMap": muaj tseeb,                     /* Generates coj '.map' cov ntaub ntawv. */
    // "outFile": "./",                       /* Concatenate thiab emit tso zis rau ib cov ntaub ntawv. */
    // "outDir": "./",                        /* Redirect tso zis qauv rau cov directory. */
    // "rootDir": "./",                       /* Qhia kom meej cov hauv paus hniav directory ntawm cov tswv yim ntaub ntawv. Siv los tswj cov qhov tso zis directory qauv nrog --outDir. */
    ... tseem ...

sai, Tam sim no koj cia li mus nyob rau hauv lub davhlau ya nyob twg VS Code thiab ntaus qhov hais kom ua:

tsc -w

Qhov no hais kom ua yog xyuas (los yog saib, yog li ntawd “w” de watch) daim ntawv thov thiab tej kev hloov nyob rau hauv cov ntaub ntawv .ts, thaum kuv txuag, yuav tam sim ntawd muab tso ua ke .js.

Tus ntawd yog nws!

Tag nrho cov accesses: 1117

Sau ntawv cia Ncua

Koj email chaw nyob yuav tsis tsum luam tawm. Yuav tsum tau teb cov cim nrog *