TypeScript Academy · Oppitunti

Vain tyyppien importit ja exportit

Käyttäkää import type -syntaksia ajonaikaisen kuormituksen välttämiseksi

Oppitunti 3/413 vaihetta

Vain tyyppien importit ja exportit on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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

Vain tyyppiä koskevat importit ja exportit (`import type` / `export type`) otettiin käyttöön TypeScript 3.8:ssa, jotta kehittäjät voivat hallita tarkasti, mikä on ajonaikainen riippuvuus ja mikä koskee vain tyyppiä.

Vain tyyppiä koskevien importtien merkitys

Tavalliset importit voivat sisältää ajonaikaista koodia. Jos tarvitset vain tyypin, import voidaan poistaa kokonaan käännetystä tulosteesta.

import { User } from './models'; // includes runtime binding
import type { User } from './models'; // compile-time only, erased

import type -syntaksi

Sijoita `type` `import`-avainsanan jälkeen. Tuotua nimeä ei voi käyttää arvona.

import type { ApiResponse } from './api-types';

function handleResponse(res: ApiResponse<User>): void {
  // ApiResponse used as type annotation only
}

export type -syntaksi

Käytä `export type` -syntaksia merkitsemään exportit nimenomaisesti vain tyyppiä koskeviksi.

// user.types.ts
export type UserId = string;
export type { User, UserRole };

Sisäinen tyyppi-import

TypeScript 4.5 ja uudemmat versiot sallivat yksittäisten importtien merkitsemisen vain tyyppiä koskeviksi tavallisessa import-lauseessa.

import { type User, createUser } from './user';
// User is type-only, createUser is a runtime value

Ympyräriippuvuuksien ratkaiseminen

Vain tyyppiä koskevat importit voivat ratkaista ympyräriippuvuusongelmia, koska ne eivät muodosta ajonaikaisia sidoksia.

verbatimModuleSyntax

TypeScript 5.0 toi käyttöön `verbatimModuleSyntax`-asetuksen. Kun se on käytössä, tyyppiä koskevissa importeissa TÄYTYY käyttää `import type` -syntaksia bundlerin sekaannusten estämiseksi.

// tsconfig.json
{ "compilerOptions": { "verbatimModuleSyntax": true } }

importsNotUsedAsValues

Kääntäjäasetus `importsNotUsedAsValues`, jonka verbatimModuleSyntax on korvannut, määrittää, miten TypeScript käsittelee käyttämättömiä arvojen importteja.

Hyödyt bundlereissa

Vite- ja esbuild-tyyppiset bundlerit käyttävät `import type` -merkintöjä ohittaakseen tyyppi-importtien käsittelyn ja nopeuttaakseen koontia.

Vain tyyppien uudelleenviennit

Vie tyyppejä uudelleen ilman niiden ajonaikaisen moduulin sisällyttämistä.

// public-api.ts
export type { User, UserRole } from './internal-user';
export { createUser } from './internal-user'; // runtime

Virhe: import type -tuontia ei voi käyttää arvona

Vain tyyppiä koskevan importin käyttäminen ajonaikaisena arvona aiheuttaa käännösaikaisen virheen.

import type { User } from './user';
// const u = new User(); // Error — User was imported as type-only

Pikatarkistus

Milloin `import type` -syntaksia kannattaa käyttää tavallisen `import`-syntaksin sijaan?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Käytä `import type`- ja `export type` -syntakseja vain tyyppiä koskeviin importteihin ja exportteihin. Ne poistetaan käännösaikana, estävät ajonaikaiset riippuvuudet tyyppitiedostoihin ja ovat pakollisia, kun verbatimModuleSyntax on käytössä.

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 ”Vain tyyppien importit ja exportit” ilmainen?

Kyllä – oppitunnin ”Vain tyyppien importit ja exportit” 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 ”Vain tyyppien importit ja exportit”?

Käyttäkää import type -syntaksia ajonaikaisen kuormituksen välttämiseksi 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 3/4.

Kuinka kauan ”Vain tyyppien importit ja exportit”-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