TypeScript Academy · Oppitunti

Uudelleenviennit ja barrel-tiedostot

Luokaa index-tiedostoja import-polkujen yksinkertaistamiseksi

Oppitunti 2/413 vaihetta

Uudelleenviennit ja barrel-tiedostot on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Barrel-tiedostot (index.ts) kokoavat moduulien sisällön ja vievät sen uudelleen. Näin hakemistolle muodostuu yksinkertainen julkinen API ja kuluttajille selkeämmät import-polut.

Mikä on barrel-tiedosto

Barrel on index.ts-tiedosto, joka vie uudelleen kaiken saman hakemiston sisällön. Kuluttajat tuovat sisällön hakemistosta yksittäisten tiedostojen sijaan.

// src/models/index.ts (barrel)
export { User } from './user';
export { Product } from './product';
export { Order } from './order';

Barrel-tiedoston käyttäminen

Tuo sisältö barrel-tiedostosta yksittäisten tiedostojen sijaan, jotta polut pysyvät selkeämpinä.

// Before barrel:
import { User } from '../models/user';
import { Product } from '../models/product';

// After barrel:
import { User, Product } from '../models';

export * -uudelleenvienti

Vie moduulin kaikki nimetyt exportit uudelleen komennolla `export *`.

// index.ts
export * from './utils';
export * from './helpers';
export * from './validators';

Uudelleennimeäminen uudelleenviennin yhteydessä

Voit nimetä exportit uudelleen samalla, kun viet ne uudelleen.

export { default as MyButton } from './Button';
export { Button as Btn } from './Button';

Vain tyyppien uudelleenviennit

Vie tyyppejä uudelleen ilman ajonaikaisia vaikutuksia.

export type { User, UserRole } from './user.types';

Ominaisuusmoduulin barrel-tiedosto

Suurten sovellusten ominaisuushakemistoissa on usein barrel-tiedosto, joka tarjoaa vain julkisen rajapinnan.

// features/auth/index.ts
export { AuthProvider } from './AuthProvider';
export { useAuth } from './useAuth';
export type { AuthUser } from './types';

Ympyräriippuvuuksien riski

Barrel-tiedostot voivat aiheuttaa ympyräriippuvuuksia, jos saman barrel-tiedoston tiedostot tuovat toisensa epäsuorasti index-tiedoston kautta. Ota tämä huomioon.

Tree shaking ja barrel-tiedostot

Nykyaikaiset bundlerit, kuten Webpack, Rollup ja Vite, poistavat barrel-uudelleenvienneistä käyttämättömän sisällön tree shaking -tekniikalla. Vain tosiasiassa käytetyt exportit sisällytetään pakettiin.

Syvät ja pinnalliset barrel-tiedostot

Käytä sisäkkäisiä barrel-tiedostoja: jokaisella alihakemistolla on oma index.ts-tiedostonsa, ja ylemmän tason barrel vie uudelleen alihakemistojen barrel-tiedostoista.

// src/index.ts
export * from './models';
export * from './services';
export * from './utils';

Barrel-tiedostot ja TypeScriptin suorituskyky

Syvästi sisäkkäiset barrel-tiedostot voivat hidastaa TypeScriptin käännöstä. Suurissa projekteissa harkitse rakenteen litistämistä tai paths-aliasten käyttämistä.

Pikatarkistus

Mikä on barrel-tiedoston (index.ts) käytön tärkein hyöty?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Barrel-tiedostot (index.ts) vievät sisältöä uudelleen hakemistosta ja muodostavat selkeät import-polut. Käytä `export *` -syntaksia laajoihin uudelleenvienteihin ja `export type` -syntaksia vain tyypeille. Huomioi myös suurten projektien ympyräriippuvuuksien riskit.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Uudelleenviennit ja barrel-tiedostot” ilmainen?

Kyllä – oppitunnin ”Uudelleenviennit ja barrel-tiedostot” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Uudelleenviennit ja barrel-tiedostot”?

Luokaa index-tiedostoja import-polkujen yksinkertaistamiseksi Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Uudelleenviennit ja barrel-tiedostot”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

ES-moduulisyntaksi: import ja export
Uudelleenviennit ja barrel-tiedostot
Vain tyyppien importit ja exportit
Namespace-määrittelyt vai moduulit: nykyinen käyttötapa

← Takaisin: TypeScript Academy