VisaptveroÅ”s ceļvedis tsconfig.json faila izpratnei un konfigurÄÅ”anai optimÄlai TypeScript izstrÄdei, aptverot papildu kompilatora opcijas un labÄko praksi.
TypeScript konfigurÄcija: TSConfig kompilatora opciju apgÅ«Å”ana
tsconfig.json fails ir jebkura TypeScript projekta sirds. Tas nosaka, kÄ TypeScript kompilators (tsc) pÄrveido jÅ«su .ts failus JavaScript failos. Labi konfigurÄts tsconfig.json ir ļoti svarÄ«gs, lai uzturÄtu koda kvalitÄti, nodroÅ”inÄtu saderÄ«bu ar dažÄdÄm vidÄm un optimizÄtu bÅ«vÄÅ”anas procesu. Å is visaptveroÅ”ais ceļvedis dziļi iedziļinÄs papildu tsconfig.json opcijÄs, sniedzot jums iespÄju precÄ«zi noregulÄt savus TypeScript projektus maksimÄlai veiktspÄjai un uzturÄjamÄ«bai.
Pamatu izpratne: KÄpÄc TSConfig ir svarÄ«gs
Pirms iedziļinÄmies papildu opcijÄs, atkÄrtosim, kÄpÄc tsconfig.json ir tik svarÄ«gs:
- KompilÄcijas kontrole: Tas norÄda, kuri faili jÄiekļauj jÅ«su projektÄ un kÄ tie jÄkompilÄ.
- Tipu pÄrbaude: Tas definÄ tipu pÄrbaudes noteikumus un stingrÄ«bu, palÄ«dzot jums agrÄ«ni izstrÄdes ciklÄ atklÄt kļūdas.
- Izvades kontrole: Tas nosaka mÄrÄ·a JavaScript versiju, moduļu sistÄmu un izvades direktoriju.
- IDE integrÄcija: Tas nodroÅ”ina vÄrtÄ«gu informÄciju IDE (piemÄram, VS Code, WebStorm utt.) tÄdÄm funkcijÄm kÄ koda pabeigÅ”ana, kļūdu izcelÅ”ana un refaktorÄÅ”ana.
Bez tsconfig.json faila TypeScript kompilators izmantos noklusÄjuma iestatÄ«jumus, kas var nebÅ«t piemÄroti visiem projektiem. Tas var izraisÄ«t neparedzÄtu uzvedÄ«bu, saderÄ«bas problÄmas un mazÄk nekÄ ideÄlu izstrÄdes pieredzi.
TSConfig izveide: Ätrs starts
Lai izveidotu tsconfig.json failu, vienkÄrÅ”i palaidiet Å”Ädu komandu sava projekta saknes direktorijÄ:
tsc --init
Tas Ä£enerÄs pamata tsconfig.json failu ar dažÄm parastÄm opcijÄm. PÄc tam varat pielÄgot Å”o failu, lai tas atbilstu jÅ«su projekta specifiskajÄm prasÄ«bÄm.
GalvenÄs kompilatora opcijas: DetalizÄts pÄrskats
tsconfig.json fails satur compilerOptions objektu, kurÄ jÅ«s konfigurÄjat TypeScript kompilatoru. IzpÄtÄ«sim dažas no vissvarÄ«gÄkajÄm un visbiežÄk izmantotajÄm opcijÄm:
target
Å Ä« opcija norÄda ECMAScript mÄrÄ·a versiju kompilÄtajam JavaScript kodam. Tas nosaka, kuras JavaScript funkcijas kompilators izmantos, nodroÅ”inot saderÄ«bu ar mÄrÄ·a vidi (piemÄram, pÄrlÅ«kprogrammÄm, Node.js). BiežÄkÄs vÄrtÄ«bas ir ES5, ES6 (ES2015), ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. Izmantojot ESNext, tiks atlasÄ«tas jaunÄkÄs atbalstÄ«tÄs ECMAScript funkcijas.
PiemÄrs:
"compilerOptions": {
"target": "ES2020"
}
Å Ä« konfigurÄcija norÄdÄ«s kompilatoram Ä£enerÄt JavaScript kodu, kas ir saderÄ«gs ar ECMAScript 2020.
module
Å Ä« opcija norÄda moduļu sistÄmu, kas jÄizmanto kompilÄtajÄ JavaScript kodÄ. BiežÄkÄs vÄrtÄ«bas ir CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020 un ESNext. Moduļu sistÄmas izvÄle ir atkarÄ«ga no mÄrÄ·a vides un izmantotÄ moduļu ielÄdÄtÄja (piemÄram, Node.js, Webpack, Browserify).
PiemÄrs:
"compilerOptions": {
"module": "CommonJS"
}
Å Ä« konfigurÄcija ir piemÄrota Node.js projektiem, kas parasti izmanto CommonJS moduļu sistÄmu.
lib
Å Ä« opcija norÄda bibliotÄku failu kopu, kas jÄiekļauj kompilÄcijas procesÄ. Å ie bibliotÄku faili nodroÅ”ina tipu definÄ«cijas iebÅ«vÄtiem JavaScript API un pÄrlÅ«kprogrammu API. BiežÄkÄs vÄrtÄ«bas ir ES5, ES6, ES7, DOM, WebWorker, ScriptHost un citas.
PiemÄrs:
"compilerOptions": {
"lib": ["ES2020", "DOM"]
}
Å Ä« konfigurÄcija ietver tipu definÄ«cijas ECMAScript 2020 un DOM API, kas ir bÅ«tiski pÄrlÅ«kprogrammÄs balstÄ«tiem projektiem.
allowJs
Å Ä« opcija ļauj TypeScript kompilatoram kompilÄt JavaScript failus lÄ«dzÄs TypeScript failiem. Tas var bÅ«t noderÄ«gi, migrÄjot JavaScript projektu uz TypeScript vai strÄdÄjot ar esoÅ”Äm JavaScript kodu bÄzÄm.
PiemÄrs:
"compilerOptions": {
"allowJs": true
}
Ja Ŕī opcija ir iespÄjota, kompilators apstrÄdÄs gan .ts, gan .js failus.
checkJs
Å Ä« opcija iespÄjo tipu pÄrbaudi JavaScript failiem. ApvienojumÄ ar allowJs, tas ļauj TypeScript identificÄt iespÄjamÄs tipu kļūdas jÅ«su JavaScript kodÄ.
PiemÄrs:
"compilerOptions": {
"allowJs": true,
"checkJs": true
}
Å Ä« konfigurÄcija nodroÅ”ina tipu pÄrbaudi gan TypeScript, gan JavaScript failiem.
jsx
Å Ä« opcija norÄda, kÄ jÄpÄrveido JSX sintakse (ko izmanto React un citos ietvaros). BiežÄkÄs vÄrtÄ«bas ir preserve, react, react-native un react-jsx. preserve atstÄj JSX sintaksi nemainÄ«gu, react pÄrveido to par React.createElement zvaniem, react-native ir paredzÄts React Native izstrÄdei, un react-jsx pÄrveido to par JSX rÅ«pnÄ«cas funkcijÄm. react-jsxdev ir paredzÄts izstrÄdes vajadzÄ«bÄm.
PiemÄrs:
"compilerOptions": {
"jsx": "react"
}
Å Ä« konfigurÄcija ir piemÄrota React projektiem, pÄrveidojot JSX par React.createElement zvaniem.
declaration
Å Ä« opcija Ä£enerÄ deklarÄciju failus (.d.ts) jÅ«su TypeScript kodam. DeklarÄciju faili nodroÅ”ina tipu informÄciju jÅ«su kodam, ļaujot citiem TypeScript projektiem vai JavaScript projektiem izmantot jÅ«su kodu ar atbilstoÅ”u tipu pÄrbaudi.
PiemÄrs:
"compilerOptions": {
"declaration": true
}
Å Ä« konfigurÄcija Ä£enerÄs .d.ts failus lÄ«dzÄs kompilÄtajiem JavaScript failiem.
declarationMap
Å Ä« opcija Ä£enerÄ avota kartes failus (.d.ts.map) Ä£enerÄtajiem deklarÄciju failiem. Avota kartes ļauj atkļūdotÄjiem un citiem rÄ«kiem atgriezties pie sÄkotnÄjÄ TypeScript pirmkoda, strÄdÄjot ar deklarÄciju failiem.
PiemÄrs:
"compilerOptions": {
"declaration": true,
"declarationMap": true
}
sourceMap
Å Ä« opcija Ä£enerÄ avota kartes failus (.js.map) kompilÄtajam JavaScript kodam. Avota kartes ļauj atkļūdotÄjiem un citiem rÄ«kiem atgriezties pie sÄkotnÄjÄ TypeScript pirmkoda, atkļūdojot pÄrlÅ«kprogrammÄ vai citÄs vidÄs.
PiemÄrs:
"compilerOptions": {
"sourceMap": true
}
outFile
Å Ä« opcija savieno un izlaiž visus izvades failus vienÄ failÄ. To parasti izmanto koda komplektÄÅ”anai pÄrlÅ«kprogrammÄs balstÄ«tÄm lietojumprogrammÄm.
PiemÄrs:
"compilerOptions": {
"outFile": "dist/bundle.js"
}
outDir
Å Ä« opcija norÄda izvades direktoriju kompilÄtajiem JavaScript failiem. Ja nav norÄdÄ«ts, kompilators ievietos izvades failus tajÄ paÅ”Ä direktorijÄ, kurÄ atrodas pirmkoda faili.
PiemÄrs:
"compilerOptions": {
"outDir": "dist"
}
Å Ä« konfigurÄcija ievietos kompilÄtos JavaScript failus dist direktorijÄ.
rootDir
Å Ä« opcija norÄda TypeScript projekta saknes direktoriju. Kompilators izmanto Å”o direktoriju, lai atrisinÄtu moduļu nosaukumus un Ä£enerÄtu izvades failu ceļus. Tas ir Ä«paÅ”i noderÄ«gi sarežģītÄm projektu struktÅ«rÄm.
PiemÄrs:
"compilerOptions": {
"rootDir": "src"
}
removeComments
Å Ä« opcija noÅem komentÄrus no kompilÄtÄ JavaScript koda. Tas var palÄ«dzÄt samazinÄt izvades failu lielumu.
PiemÄrs:
"compilerOptions": {
"removeComments": true
}
noEmitOnError
Å Ä« opcija neļauj kompilatoram izlaist JavaScript failus, ja tiek atklÄtas kÄdas tipu kļūdas. Tas nodroÅ”ina, ka tiek Ä£enerÄts tikai derÄ«gs kods.
PiemÄrs:
"compilerOptions": {
"noEmitOnError": true
}
strict
Å Ä« opcija iespÄjo visas stingrÄs tipu pÄrbaudes opcijas. Tas ir ļoti ieteicams jauniem projektiem, jo tas palÄ«dz atklÄt iespÄjamÄs kļūdas un nodroÅ”inÄt labÄko praksi.
PiemÄrs:
"compilerOptions": {
"strict": true
}
StingrÄ režīma iespÄjoÅ”ana ir lÄ«dzvÄrtÄ«ga Å”Ädu opciju iespÄjoÅ”anai:
noImplicitAnynoImplicitThisalwaysStrictstrictNullChecksstrictFunctionTypesstrictBindCallApplynoImplicitReturnsnoFallthroughCasesInSwitch
esModuleInterop
Å Ä« opcija iespÄjo sadarbspÄju starp CommonJS un ES moduļiem. Tas ļauj importÄt CommonJS moduļus ES moduļos un otrÄdi.
PiemÄrs:
"compilerOptions": {
"esModuleInterop": true
}
forceConsistentCasingInFileNames
Å Ä« opcija nodroÅ”ina konsekventu reÄ£istru failu nosaukumos. Tas ir svarÄ«gi starpplatformu saderÄ«bai, jo dažas operÄtÄjsistÄmas ir jutÄ«gas pret reÄ£istru, bet citas nav.
PiemÄrs:
"compilerOptions": {
"forceConsistentCasingInFileNames": true
}
baseUrl un paths
Å Ä«s opcijas ļauj konfigurÄt moduļu atrisinÄÅ”anu. baseUrl norÄda bÄzes direktoriju relatÄ«vu moduļu nosaukumu atrisinÄÅ”anai, un paths ļauj definÄt pielÄgotus moduļu aizstÄjvÄrdus.
PiemÄrs:
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
}
Å Ä« konfigurÄcija ļauj importÄt moduļus, izmantojot aizstÄjvÄrdus, piemÄram, @components/MyComponent un @utils/myFunction.
Papildu konfigurÄcija: Ärpus pamatiem
Tagad izpÄtÄ«sim dažas papildu tsconfig.json opcijas, kas var vÄl vairÄk uzlabot jÅ«su TypeScript izstrÄdes pieredzi.
InkrementÄla kompilÄcija
TypeScript atbalsta inkrementÄlu kompilÄciju, kas var ievÄrojami paÄtrinÄt bÅ«vÄÅ”anas procesu lieliem projektiem. Lai iespÄjotu inkrementÄlu kompilÄciju, iestatiet opciju incremental uz true un norÄdiet opciju tsBuildInfoFile.
PiemÄrs:
"compilerOptions": {
"incremental": true,
"tsBuildInfoFile": ".tsbuildinfo"
}
Opcija tsBuildInfoFile norÄda failu, kur kompilators glabÄs bÅ«vÄÅ”anas informÄciju. Å Ä« informÄcija tiek izmantota, lai noteiktu, kuri faili ir jÄkompilÄ atkÄrtoti turpmÄkajÄs bÅ«vÄÅ”anÄs.
Projekta atsauces
Projekta atsauces ļauj strukturÄt jÅ«su kodu mazÄkos, pÄrvaldÄmÄkos projektos. Tas var uzlabot bÅ«vÄÅ”anas laikus un koda organizÄciju lielÄm kodu bÄzÄm. Laba analoÄ£ija Å”im konceptam ir Mikroservisu arhitektÅ«ra - katrs serviss ir neatkarÄ«gs, bet paļaujas uz citiem ekosistÄmÄ esoÅ”ajiem.
Lai izmantotu projekta atsauces, jums jÄizveido atseviŔķs tsconfig.json fails katram projektam. PÄc tam galvenajÄ tsconfig.json failÄ varat norÄdÄ«t projektus, uz kuriem jÄatsaucas, izmantojot opciju references.
PiemÄrs:
{
"compilerOptions": {
...
},
"references": [
{ "path": "./project1" },
{ "path": "./project2" }
]
}
Å Ä« konfigurÄcija norÄda, ka paÅ”reizÄjais projekts ir atkarÄ«gs no projektiem, kas atrodas direktorijÄs ./project1 un ./project2.
PielÄgoti transformatori
PielÄgoti transformatori ļauj modificÄt TypeScript kompilatora izvadi. To var izmantot dažÄdiem mÄrÄ·iem, piemÄram, pielÄgotu koda transformÄciju pievienoÅ”anai, neizmantota koda noÅemÅ”anai vai izvades optimizÄÅ”anai noteiktÄm vidÄm. Tos parasti izmanto i18n internacionalizÄcijas un lokalizÄcijas uzdevumiem.
Lai izmantotu pielÄgotus transformatorus, jums jÄizveido atseviŔķs JavaScript fails, kas eksportÄ funkciju, kuru izsauks kompilators. PÄc tam varat norÄdÄ«t transformatora failu, izmantojot opciju plugins failÄ tsconfig.json.
PiemÄrs:
{
"compilerOptions": {
...
"plugins": [
{ "transform": "./transformer.js" }
]
}
}
Å Ä« konfigurÄcija norÄda, ka fails ./transformer.js jÄizmanto kÄ pielÄgots transformators.
Faili, Iekļaut un IzslÄgt
Papildus compilerOptions, citas saknes lÄ«meÅa opcijas failÄ tsconfig.json kontrolÄ, kuri faili tiek iekļauti kompilÄcijas procesÄ:
- files: Failu ceļu masÄ«vs, ko iekļaut kompilÄcijÄ.
- include: Glob paraugu masÄ«vs, kas norÄda failus, ko iekļaut.
- exclude: Glob paraugu masÄ«vs, kas norÄda failus, ko izslÄgt.
Å Ä«s opcijas nodroÅ”ina detalizÄtu kontroli pÄr to, kurus failus apstrÄdÄ TypeScript kompilators. PiemÄram, varat izslÄgt testa failus vai Ä£enerÄto kodu no kompilÄcijas procesa.
PiemÄrs:
{
"compilerOptions": { ... },
"include": ["src/**/*"],
"exclude": ["node_modules", "dist", "**/*.spec.ts"]
}
Å Ä« konfigurÄcija ietver visus failus direktorijÄ src un tÄs apakÅ”direktorijÄs, vienlaikus izslÄdzot failus direktorijÄs node_modules un dist, kÄ arÄ« visus failus ar paplaÅ”inÄjumu .spec.ts (ko parasti izmanto vienÄ«bas testiem).
Kompilatora opcijas specifiskiem scenÄrijiem
DažÄdiem projektiem var bÅ«t nepiecieÅ”ami dažÄdi kompilatora iestatÄ«jumi, lai sasniegtu optimÄlus rezultÄtus. ApskatÄ«sim dažus specifiskus scenÄrijus un katram no tiem ieteicamos kompilatora iestatÄ«jumus.
Web lietojumprogrammu izstrÄde
Web lietojumprogrammu izstrÄdei parasti vÄlÄsities izmantot Å”Ädus kompilatora iestatÄ«jumus:
{
"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"]
}
Å ie iestatÄ«jumi ir piemÄroti modernÄm web lietojumprogrammÄm, kas izmanto React vai citus lÄ«dzÄ«gus ietvarus. Tie ir paredzÄti jaunÄkajÄm ECMAScript funkcijÄm, izmanto ES moduļus un iespÄjo stingru tipu pÄrbaudi.
Node.js aizmugures izstrÄde
Node.js aizmugures izstrÄdei parasti vÄlÄsieties izmantot Å”Ädus kompilatora iestatÄ«jumus:
{
"compilerOptions": {
"target": "ESNext",
"module": "CommonJS",
"esModuleInterop": true,
"strict": true,
"sourceMap": true,
"outDir": "dist",
"resolveJsonModule": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
Å ie iestatÄ«jumi ir piemÄroti Node.js lietojumprogrammÄm, kas izmanto CommonJS moduļu sistÄmu. Tie ir paredzÄti jaunÄkajÄm ECMAScript funkcijÄm, iespÄjo stingru tipu pÄrbaudi un ļauj importÄt JSON failus kÄ moduļus.
BibliotÄku izstrÄde
BibliotÄku izstrÄdei parasti vÄlÄsieties izmantot Å”Ädus kompilatora iestatÄ«jumus:
{
"compilerOptions": {
"target": "ES5",
"module": "UMD",
"declaration": true,
"declarationMap": true,
"sourceMap": true,
"outDir": "dist",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}
Å ie iestatÄ«jumi ir piemÄroti bibliotÄku izveidei, kuras var izmantot gan pÄrlÅ«kprogrammÄ, gan Node.js vidÄs. Tie Ä£enerÄ deklarÄciju failus un avota kartes, lai uzlabotu izstrÄdÄtÄju pieredzi.
LabÄkÄ prakse TSConfig pÄrvaldÄ«bai
Å eit ir daži labÄkÄs prakses principi, kas jÄÅem vÄrÄ, pÄrvaldot savus tsconfig.json failus:
- SÄciet ar pamata konfigurÄciju: Izveidojiet pamata
tsconfig.jsonfailu ar kopÄ«giem iestatÄ«jumiem un pÄc tam paplaÅ”iniet to citos projektos, izmantojot opcijuextends. - Izmantojiet stingru režīmu: IespÄjojiet stingru režīmu, lai atklÄtu iespÄjamÄs kļūdas un nodroÅ”inÄtu labÄko praksi.
- KonfigurÄjiet moduļu atrisinÄÅ”anu: Pareizi konfigurÄjiet moduļu atrisinÄÅ”anu, lai izvairÄ«tos no importa kļūdÄm.
- Izmantojiet projekta atsauces: StrukturÄjiet savu kodu mazÄkos, pÄrvaldÄmÄkos projektos, izmantojot projekta atsauces.
- Uzturiet savu
tsconfig.jsonfailu atjauninÄtu: RegulÄri pÄrskatiet savutsconfig.jsonfailu un atjauniniet to, kad jÅ«su projekts attÄ«stÄs. - Versiju kontrolÄjiet savu
tsconfig.jsonfailu: Iesniedziet savutsconfig.jsonfailu versiju kontrolei kopÄ ar citu pirmkodu. - DokumentÄjiet savu konfigurÄciju: Pievienojiet komentÄrus savam
tsconfig.jsonfailam, lai izskaidrotu katras opcijas mÄrÄ·i.
SecinÄjums: TypeScript konfigurÄcijas apgÅ«Å”ana
tsconfig.json fails ir spÄcÄ«gs rÄ«ks TypeScript kompilatora konfigurÄÅ”anai un bÅ«vÄÅ”anas procesa kontrolei. Izprotot pieejamÄs opcijas un ievÄrojot labÄko praksi, varat precÄ«zi noregulÄt savus TypeScript projektus optimÄlai veiktspÄjai, uzturÄjamÄ«bai un saderÄ«bai. Å is ceļvedis ir sniedzis visaptveroÅ”u pÄrskatu par papildu opcijÄm, kas pieejamas tsconfig.json failÄ, sniedzot jums iespÄju pilnÄ«bÄ kontrolÄt savu TypeScript izstrÄdes darbplÅ«smu. Atcerieties vienmÄr konsultÄties ar oficiÄlo TypeScript dokumentÄciju, lai iegÅ«tu jaunÄko informÄciju un norÄdÄ«jumus. Kad jÅ«su projekti attÄ«stÄs, arÄ« jÅ«su izpratnei un Å”o spÄcÄ«go konfigurÄcijas rÄ«ku izmantoÅ”anai vajadzÄtu attÄ«stÄ«ties. VeiksmÄ«gu kodÄÅ”anu!