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
            

              
                Copy
              
            
          

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"
}
            

              
                Copy
              
            
          

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"
}
            

              
                Copy
              
            
          

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"]
}
            

              
                Copy
              
            
          

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
}
            

              
                Copy
              
            
          

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
}
            

              
                Copy
              
            
          

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"
}
            

              
                Copy
              
            
          

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
}
            

              
                Copy
              
            
          

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
}
            

              
                Copy
              
            
          

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
}
            

              
                Copy
              
            
          

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"
}
            

              
                Copy
              
            
          

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"
}
            

              
                Copy
              
            
          

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"
}
            

              
                Copy
              
            
          

removeComments

See valik eemaldab kompileeritud JavaScripti koodist kommentaarid. See võib aidata vähendada väljundfailide suurust.

Näide:

            "compilerOptions": {
  "removeComments": true
}
            

              
                Copy
              
            
          

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
}
            

              
                Copy
              
            
          

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
}
            

              
                Copy
              
            
          

Range režiimi lubamine on samaväärne järgmiste valikute lubamisega:

• noImplicitAny
• noImplicitThis
• alwaysStrict
• strictNullChecks
• strictFunctionTypes
• strictBindCallApply
• noImplicitReturns
• noFallthroughCasesInSwitch

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
}
            

              
                Copy
              
            
          

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
}
            

              
                Copy
              
            
          

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/*"]
  }
}
            

              
                Copy
              
            
          

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"
}
            

              
                Copy
              
            
          

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" }
  ]
}
            

              
                Copy
              
            
          

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" }
    ]
  }
}
            

              
                Copy
              
            
          

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"]
}
            

              
                Copy
              
            
          

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"]
}
            

              
                Copy
              
            
          

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"]
}
            

              
                Copy
              
            
          

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"]
}
            

              
                Copy
              
            
          

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.json fail ja seejärel laiendage seda teistes projektides, kasutades valikut extends.
• 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.json fail ajakohasena: vaadake oma tsconfig.json fail regulaarselt üle ja värskendage seda, kui teie projekt areneb.
• Versioonikontrollige oma tsconfig.json faili: siduge oma tsconfig.json fail versioonikontrolliga koos muu lähtekoodiga.
• Dokumenteerige oma konfiguratsioon: lisage oma tsconfig.json faili 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!