Põhjalik juhend tsconfig.json faili mõistmiseks ja konfigureerimiseks optimaalseks TypeScripti arenduseks, hõlmates täiustatud kompilaatori valikuid ja parimaid praktikaid.
TypeScripti konfiguratsioon: TSConfigi kompilaatori valikute valdamine
tsconfig.json fail on iga TypeScripti projekti süda. See määrab, kuidas TypeScripti kompilaator (tsc) teisendab teie .ts failid JavaScriptiks. Hästi konfigureeritud tsconfig.json on ülioluline koodi kvaliteedi säilitamiseks, ühilduvuse tagamiseks erinevates keskkondades ja ehitusprotsessi optimeerimiseks. See põhjalik juhend sukeldub sügavalt täiustatud tsconfig.json valikutesse, võimaldades teil oma TypeScripti projekte peenhäälestada tipptasemel jõudluse ja hooldatavuse saavutamiseks.
Põhitõdede mõistmine: miks TSConfig on oluline
Enne täiustatud valikutesse sukeldumist kordame, miks tsconfig.json on nii oluline:
- Kompileerimise juhtimine: see määrab, millised failid tuleks teie projekti kaasata ja kuidas neid tuleks kompileerida.
- Tüübikontroll: see määratleb tüübikontrolli reeglid ja ranguse, aidates teil vigu arendustsükli alguses avastada.
- Väljundi juhtimine: see määrab JavaScripti sihtversiooni, moodulisüsteemi ja väljundkataloogi.
- IDE integratsioon: see pakub väärtuslikku teavet IDE-dele (nagu VS Code, WebStorm jne) selliste funktsioonide jaoks nagu koodi lõpetamine, vigade esiletõstmine ja refaktoreerimine.
Ilma tsconfig.json failita kasutab TypeScripti kompilaator vaikeseadeid, mis ei pruugi kõigi projektide jaoks sobida. See võib põhjustada ootamatut käitumist, ühilduvusprobleeme ja vähem kui ideaalset arenduskogemust.
TSConfigi loomine: kiire algus
tsconfig.json faili loomiseks käivitage lihtsalt järgmine käsk oma projekti juurkataloogis:
tsc --init
See genereerib põhilise tsconfig.json faili mõne levinud valikuga. Seejärel saate seda faili kohandada vastavalt oma projekti spetsiifilistele nõuetele.
Peamised kompilaatori valikud: ĂĽksikasjalik ĂĽlevaade
tsconfig.json fail sisaldab objekti compilerOptions, kus konfigureerite TypeScripti kompilaatori. Uurime mõnda kõige olulisemat ja sagedamini kasutatavat valikut:
target
See valik määrab kompileeritud JavaScripti koodi ECMAScripti sihtversiooni. See määrab, milliseid JavaScripti funktsioone kompilaator kasutab, tagades ühilduvuse sihtkeskkonnaga (nt brauserid, Node.js). Levinud väärtused on ES5, ES6 (ES2015), ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. ESNext kasutamine suunab uusimatele toetatud ECMAScripti funktsioonidele.
Näide:
"compilerOptions": {
"target": "ES2020"
}
See konfiguratsioon käsib kompilaatoril genereerida JavaScripti koodi, mis ühildub ECMAScript 2020-ga.
module
See valik määrab moodulisüsteemi, mida kasutatakse kompileeritud JavaScripti koodis. Levinud väärtused on CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020 ja ESNext. Moodulisüsteemi valik sõltub sihtkeskkonnast ja kasutatavast moodulilaadurist (nt Node.js, Webpack, Browserify).
Näide:
"compilerOptions": {
"module": "CommonJS"
}
See konfiguratsioon sobib Node.js projektidele, mis tavaliselt kasutavad CommonJS moodulisĂĽsteemi.
lib
See valik määrab teegifailide komplekti, mis tuleb kompileerimisprotsessi kaasata. Need teegifailid pakuvad tüübimääratlusi sisseehitatud JavaScripti API-dele ja brauseri API-dele. Levinud väärtused on ES5, ES6, ES7, DOM, WebWorker, ScriptHost ja palju muud.
Näide:
"compilerOptions": {
"lib": ["ES2020", "DOM"]
}
See konfiguratsioon sisaldab ECMAScript 2020 ja DOM API tüübimääratlusi, mis on brauseripõhiste projektide jaoks hädavajalikud.
allowJs
See valik võimaldab TypeScripti kompilaatoril kompileerida JavaScripti faile koos TypeScripti failidega. See võib olla kasulik JavaScripti projekti TypeScripti migreerimisel või olemasolevate JavaScripti koodibaasidega töötamisel.
Näide:
"compilerOptions": {
"allowJs": true
}
Kui see valik on lubatud, töötleb kompilaator nii .ts kui ka .js faile.
checkJs
See valik võimaldab JavaScripti failide tüübikontrolli. Koos valikuga allowJs võimaldab see TypeScriptil tuvastada teie JavaScripti koodis võimalikke tüübivigu.
Näide:
"compilerOptions": {
"allowJs": true,
"checkJs": true
}
See konfiguratsioon pakub tĂĽĂĽbikontrolli nii TypeScripti kui ka JavaScripti failidele.
jsx
See valik määrab, kuidas JSX süntaksit (kasutatakse Reactis ja teistes raamistikes) tuleks teisendada. Levinud väärtused on preserve, react, react-native ja react-jsx. preserve jätab JSX süntaksi muutmata, react teisendab selle React.createElement kutseteks, react-native on React Native'i arenduseks ja react-jsx teisendab selle JSX tehasefunktsioonideks. react-jsxdev on mõeldud arenduseesmärkidel.
Näide:
"compilerOptions": {
"jsx": "react"
}
See konfiguratsioon sobib Reacti projektidele, teisendades JSX React.createElement kutseteks.
declaration
See valik genereerib TypeScripti koodi jaoks deklaratsioonifaile (.d.ts). Deklaratsioonifailid pakuvad teie koodi jaoks tüübiteavet, võimaldades teistel TypeScripti projektidel või JavaScripti projektidel teie koodi kasutada õige tüübikontrolliga.
Näide:
"compilerOptions": {
"declaration": true
}
See konfiguratsioon genereerib .d.ts failid koos kompileeritud JavaScripti failidega.
declarationMap
See valik genereerib lähtekaardi faile (.d.ts.map) genereeritud deklaratsioonifailide jaoks. Lähtekaardid võimaldavad siluritel ja muudel tööriistadel kaardistada tagasi algse TypeScripti lähtekoodi, kui töötate deklaratsioonifailidega.
Näide:
"compilerOptions": {
"declaration": true,
"declarationMap": true
}
sourceMap
See valik genereerib lähtekaardi faile (.js.map) kompileeritud JavaScripti koodi jaoks. Lähtekaardid võimaldavad siluritel ja muudel tööriistadel kaardistada tagasi algse TypeScripti lähtekoodi, kui silute brauseris või muudes keskkondades.
Näide:
"compilerOptions": {
"sourceMap": true
}
outFile
See valik ühendab ja väljastab kõik väljundfailid ühte faili. Tavaliselt kasutatakse seda koodi paketeerimiseks brauseripõhiste rakenduste jaoks.
Näide:
"compilerOptions": {
"outFile": "dist/bundle.js"
}
outDir
See valik määrab kompileeritud JavaScripti failide väljundkataloogi. Kui seda ei määrata, paigutab kompilaator väljundfailid samasse kataloogi kui lähtefailid.
Näide:
"compilerOptions": {
"outDir": "dist"
}
See konfiguratsioon paigutab kompileeritud JavaScripti failid kataloogi dist.
rootDir
See valik määrab TypeScripti projekti juurkataloogi. Kompilaator kasutab seda kataloogi moodulinimede lahendamiseks ja väljundfailide teede genereerimiseks. See on eriti kasulik keerukate projektistruktuuride puhul.
Näide:
"compilerOptions": {
"rootDir": "src"
}
removeComments
See valik eemaldab kompileeritud JavaScripti koodist kommentaarid. See võib aidata vähendada väljundfailide suurust.
Näide:
"compilerOptions": {
"removeComments": true
}
noEmitOnError
See valik takistab kompilaatoril JavaScripti failide väljastamist, kui tuvastatakse tüübivigu. See tagab, et genereeritakse ainult kehtiv kood.
Näide:
"compilerOptions": {
"noEmitOnError": true
}
strict
See valik lubab kõik ranged tüübikontrolli valikud. Uute projektide puhul on see väga soovitatav, kuna see aitab tuvastada võimalikke vigu ja jõustada parimaid praktikaid.
Näide:
"compilerOptions": {
"strict": true
}
Range režiimi lubamine on samaväärne järgmiste valikute lubamisega:
noImplicitAnynoImplicitThisalwaysStrictstrictNullChecksstrictFunctionTypesstrictBindCallApplynoImplicitReturnsnoFallthroughCasesInSwitch
esModuleInterop
See valik võimaldab koostalitlusvõimet CommonJS ja ES moodulite vahel. See võimaldab teil importida CommonJS mooduleid ES moodulites ja vastupidi.
Näide:
"compilerOptions": {
"esModuleInterop": true
}
forceConsistentCasingInFileNames
See valik jõustab failinimedes järjepideva suurtähe kasutuse. See on oluline platvormidevahelise ühilduvuse tagamiseks, kuna mõned operatsioonisüsteemid on tõstutundlikud, teised aga mitte.
Näide:
"compilerOptions": {
"forceConsistentCasingInFileNames": true
}
baseUrl ja paths
Need valikud võimaldavad teil konfigureerida moodulite lahendamist. baseUrl määrab suhteliste moodulinimede lahendamise juurkataloogi ja paths võimaldab teil määratleda kohandatud mooduli aliaseid.
Näide:
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
}
See konfiguratsioon võimaldab teil importida mooduleid, kasutades aliaseid nagu @components/MyComponent ja @utils/myFunction.
Täiustatud konfiguratsioon: enamat kui põhitõed
Nüüd uurime mõnda täiustatud tsconfig.json valikut, mis võivad teie TypeScripti arenduskogemust veelgi parandada.
Inkrementaalne kompileerimine
TypeScript toetab inkrementaalset kompileerimist, mis võib oluliselt kiirendada suurte projektide ehitusprotsessi. Inkrementaalse kompileerimise lubamiseks määrake valik incremental väärtusele true ja määrake valik tsBuildInfoFile.
Näide:
"compilerOptions": {
"incremental": true,
"tsBuildInfoFile": ".tsbuildinfo"
}
Valik tsBuildInfoFile määrab faili, kuhu kompilaator salvestab ehitusteabe. Seda teavet kasutatakse selleks, et teha kindlaks, millised failid tuleb järgnevate ehituste ajal uuesti kompileerida.
Projekti viited
Projekti viited võimaldavad teil oma koodi struktureerida väiksemateks ja hallatavamateks projektideks. See võib parandada ehitusaegu ja koodi korraldust suurte koodibaaside puhul. Hea analoogia sellele kontseptsioonile on mikroteenuste arhitektuur – iga teenus on iseseisev, kuid toetub ökosüsteemis teistele.
Projekti viidete kasutamiseks peate iga projekti jaoks looma eraldi tsconfig.json faili. Seejärel saate peamises tsconfig.json failis määrata projektid, millele tuleks viidata, kasutades valikut references.
Näide:
{
"compilerOptions": {
...
},
"references": [
{ "path": "./project1" },
{ "path": "./project2" }
]
}
See konfiguratsioon määrab, et praegune projekt sõltub projektidest, mis asuvad kataloogides ./project1 ja ./project2.
Kohandatud transformaatorid
Kohandatud transformaatorid võimaldavad teil muuta TypeScripti kompilaatori väljundit. Seda saab kasutada mitmesugustel eesmärkidel, näiteks kohandatud koodimuudatuste lisamiseks, kasutamata koodi eemaldamiseks või väljundi optimeerimiseks konkreetsete keskkondade jaoks. Neid kasutatakse tavaliselt i18n rahvusvahelistamise ja lokaliseerimise ülesannete jaoks.
Kohandatud transformaatorite kasutamiseks peate looma eraldi JavaScripti faili, mis ekspordib funktsiooni, mida kompilaator kutsub. Seejärel saate transformaatorifaili määrata, kasutades valikut plugins failis tsconfig.json.
Näide:
{
"compilerOptions": {
...
"plugins": [
{ "transform": "./transformer.js" }
]
}
}
See konfiguratsioon määrab, et ./transformer.js faili tuleks kasutada kohandatud transformaatorina.
Failid, Kaasa ja Välista
Lisaks compilerOptions valikule kontrollivad muud juurtaseme valikud failis tsconfig.json, millised failid kompileerimisprotsessi kaasatakse:
- files: failiteede massiiv, mis tuleb kompileerimisse kaasata.
- include: globimustrite massiiv, mis määrab kaasatavad failid.
- exclude: globimustrite massiiv, mis määrab välistatavad failid.
Need valikud pakuvad peenhäälestatud kontrolli selle üle, milliseid faile TypeScripti kompilaator töötleb. Näiteks saate testfailid või genereeritud koodi kompileerimisprotsessist välja jätta.
Näide:
{
"compilerOptions": { ... },
"include": ["src/**/*"],
"exclude": ["node_modules", "dist", "**/*.spec.ts"]
}
See konfiguratsioon sisaldab kõiki faile kataloogis src ja selle alamkataloogides, jättes samal ajal välja failid kataloogides node_modules ja dist, samuti kõik failid laiendiga .spec.ts (mida tavaliselt kasutatakse ühiktestide jaoks).
Kompilaatori valikud konkreetsete stsenaariumide jaoks
Erinevad projektid võivad optimaalsete tulemuste saavutamiseks vajada erinevaid kompilaatori sätteid. Vaatame mõnda konkreetset stsenaariumi ja igaühe jaoks soovitatavaid kompilaatori sätteid.
Veebirakenduse arendus
Veebirakenduse arenduse jaoks soovite tavaliselt kasutada järgmisi kompilaatori sätteid:
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Node",
"jsx": "react-jsx",
"esModuleInterop": true,
"strict": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"sourceMap": true,
"outDir": "dist"
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
Need sätted sobivad kaasaegsetele veebirakendustele, mis kasutavad Reacti või muid sarnaseid raamistikke. Nad suunavad uusimatele ECMAScripti funktsioonidele, kasutavad ES mooduleid ja võimaldavad range tüübikontrolli.
Node.js taustarakenduse arendus
Node.js taustarakenduse arenduse jaoks soovite tavaliselt kasutada järgmisi kompilaatori sätteid:
{
"compilerOptions": {
"target": "ESNext",
"module": "CommonJS",
"esModuleInterop": true,
"strict": true,
"sourceMap": true,
"outDir": "dist",
"resolveJsonModule": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
Need sätted sobivad Node.js rakendustele, mis kasutavad CommonJS moodulisüsteemi. Nad suunavad uusimatele ECMAScripti funktsioonidele, võimaldavad range tüübikontrolli ja võimaldavad teil importida JSON faile moodulitena.
Teegi arendus
Teegi arenduse jaoks soovite tavaliselt kasutada järgmisi kompilaatori sätteid:
{
"compilerOptions": {
"target": "ES5",
"module": "UMD",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"outDir": "dist",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
Need sätted sobivad teekide loomiseks, mida saab kasutada nii brauseri- kui ka Node.js keskkondades. Nad genereerivad deklaratsioonifailid ja lähtekaardid parema arenduskogemuse tagamiseks.
Parimad praktikad TSConfigi haldamiseks
Siin on mõned parimad praktikad, mida tuleks tsconfig.json failide haldamisel meeles pidada:
- Alustage põhikonfiguratsiooniga: looge ühiste sätetega põhi-
tsconfig.jsonfail ja seejärel laiendage seda teistes projektides, kasutades valikutextends. - Kasutage ranget režiimi: lubage range režiim, et tuvastada võimalikke vigu ja jõustada parimaid praktikaid.
- Konfigureerige moodulite lahendamine: konfigureerige moodulite lahendamine õigesti, et vältida importimisvigu.
- Kasutage projekti viiteid: struktureerige oma kood väiksemateks ja hallatavamateks projektideks, kasutades projekti viiteid.
- Hoidke oma
tsconfig.jsonfail ajakohasena: vaadake omatsconfig.jsonfail regulaarselt üle ja värskendage seda, kui teie projekt areneb. - Versioonikontrollige oma
tsconfig.jsonfaili: siduge omatsconfig.jsonfail versioonikontrolliga koos muu lähtekoodiga. - Dokumenteerige oma konfiguratsioon: lisage oma
tsconfig.jsonfaili kommentaare, et selgitada iga valiku eesmärki.
Kokkuvõte: TypeScripti konfiguratsiooni valdamine
tsconfig.json fail on võimas tööriist TypeScripti kompilaatori konfigureerimiseks ja ehitusprotsessi juhtimiseks. Mõistes saadaolevaid valikuid ja järgides parimaid praktikaid, saate oma TypeScripti projekte peenhäälestada optimaalse jõudluse, hooldatavuse ja ühilduvuse saavutamiseks. See juhend on andnud põhjaliku ülevaate failis tsconfig.json saadaolevatest täiustatud valikutest, võimaldades teil oma TypeScripti arendustöövoogu täielikult kontrollida. Pidage meeles, et alati tuleks tutvuda ametliku TypeScripti dokumentatsiooniga, et saada kõige ajakohasemat teavet ja juhiseid. Kuna teie projektid arenevad, peaks nii olema ka teie arusaam ja nende võimsate konfiguratsioonitööriistade kasutamine. Head kodeerimist!