M

MLOG

Suomi

Tutustu TypeScriptin `import type` -syntaksiin, jolla optimoidaan käännösaikoja ja estetään ajonaikaisia virheitä. Opi käyttämään tyyppituonteja ja niiden etuja.

TypeScriptin Import Type: Syväsukellus vain tyyppejä koskeviin tuontimäärityksiin

TypeScript, JavaScriptin supersetti, tuo staattisen tyypityksen web-kehityksen dynaamiseen maailmaan. Yksi sen keskeisistä ominaisuuksista on kyky tuoda tyyppejä muista moduuleista. Kuitenkin sellaisten tyyppien tuominen, joita käytetään vain tyyppitarkistukseen, voi johtaa tarpeettomaan koodiin lopullisessa JavaScript-paketissa. Tämän ratkaisemiseksi TypeScript esitteli import type -syntaksin. Tämä blogikirjoitus tutkii import type -syntaksia yksityiskohtaisesti, selittäen sen tarkoituksen, käytön, hyödyt ja mahdolliset varoitukset.

Mitä on import type?

import type on TypeScript-kohtainen syntaksi, jonka avulla voit tuoda moduulista ainoastaan tyyppimääritykset tuomatta mitään moduulin ajonaikaisia arvoja. Tämä on erityisen hyödyllistä, kun sinun täytyy käyttää tyyppiä toisesta moduulista tyyppiannotaatioihin tai tyyppitarkistukseen, mutta sinun ei tarvitse käyttää mitään sen arvoista ajon aikana. Tämä vaikuttaa suoraan pienempään pakettikokoon, koska JavaScript-kääntäjä jättää tuodun moduulin pois käännöksen aikana, jos sitä käytetään yksinomaan tyyppitietoihin.

Miksi käyttää import type -syntaksia?

On useita painavia syitä käyttää import type -syntaksia:

Kuinka käyttää import type -syntaksia

Syntaksi import type -komennolle on suoraviivainen. Sen sijaan, että käyttäisit standardia import-lausetta, käytät import type -lausetta, jota seuraa tyyppi, jonka haluat tuoda. Tässä on perusesimerkki:

import type { User } from './user';

function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}

Tässä esimerkissä tuomme User-tyypin ./user-moduulista. Käytämme User-tyyppiä ainoastaan tyyppiannotaationa greetUser-funktiossa. User-moduulin arvoja ei voi käyttää ajon aikana.

import type -tuonnin yhdistäminen tavallisiin tuonteihin

Voit myös yhdistää import type -tuonnin tavallisiin tuonteihin samassa lauseessa käyttämällä type-avainsanaa:

import { someValue, type User, type Product } from './module';

function processUser(user: User): void {
  // ...
}

console.log(someValue);

Tässä tapauksessa someValue tuodaan tavallisena arvona, kun taas User ja Product tuodaan ainoastaan tyyppeinä. Tämä mahdollistaa sekä arvojen että tyyppien tuomisen samasta moduulista yhdellä lauseella.

Kaiken tuominen tyyppeinä

Jos sinun täytyy tuoda kaikki tyypit moduulista tuomatta lainkaan arvoja, voit käyttää nimiavaruuden tuontisyntaksia import type -komennon kanssa:

import type * as Types from './types';

function processData(data: Types.Data): void {
  // ...
}

Tässä tuomme kaikki tyypit ./types-moduulista Types-nimiavaruuteen. Voimme sitten käyttää tyyppejä Types.-etuliitteellä.

Esimerkkejä eri projektityypeissä

import type -syntaksin hyödyt pätevät monenlaisiin projektityyppeihin. Tässä on joitakin esimerkkejä:

Esimerkki 1: React-komponentti

Tarkastellaan React-komponenttia, joka vastaanottaa propseja tietyillä tyypeillä:

import React from 'react';
import type { User } from './user';

interface Props {
  user: User;
}

const UserProfile: React.FC<Props> = ({ user }) => {
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserProfile;

Tässä React-esimerkissä import type { User } from './user'; varmistaa, että ainoastaan User-tyypin määritys tuodaan, mikä optimoi pakettikokoa. Emme käytä suoraan 'user'-moduulin arvoja; käytämme vain 'User'-tyyppiä sellaisena kuin se on määritelty kyseisessä moduulissa.

Esimerkki 2: Node.js-taustajärjestelmä

Node.js-taustajärjestelmäsovelluksessa saatat määrittää tietokantamalleja tyyppeinä:

import type { User } from './models';
import { createUser } from './db';

async function registerUser(userData: User): Promise<void> {
  await createUser(userData);
}

Tässä import type { User } from './models'; välttää koko models-moduulin sisällyttämisen pakettiin, jos vain User-tyyppiä tarvitaan tyyppitarkistukseen. createUser-funktio tuodaan, koska sitä tarvitaan ajonaikaiseen käyttöön.

Esimerkki 3: Angular-palvelu

Angular-palvelussa saatat injektoida palvelun, joka käyttää tyyppiä:

import { Injectable } from '@angular/core';
import type { Product } from './product.model';
import { ProductService } from './product.service';

@Injectable({
  providedIn: 'root',
})
export class OrderService {
  constructor(private productService: ProductService) {}

  getFeaturedProducts(): Product[] {
    return this.productService.getProducts().filter(p => p.isFeatured);
  }
}

Product-tyyppiä käytetään määrittelemään productService.getProducts()-metodin palauttaman datan rakenne. Käyttämällä import type { Product } from './product.model'; varmistetaan, että vain tyyppitiedot tuodaan, mikä parantaa Angular-sovelluksen suorituskykyä. ProductService on ajonaikainen riippuvuus.

import type -syntaksin käytön hyödyt eri kehitysympäristöissä

import type -syntaksin käytön edut ulottuvat erilaisiin kehitysympäristöihin:

Mahdolliset varoitukset

Vaikka import type on yleisesti hyödyllinen, on muutamia seikkoja, joista on syytä olla tietoinen:

Parhaat käytännöt import type -syntaksin käyttöön

Jotta voit käyttää import type -syntaksia tehokkaasti, harkitse seuraavia parhaita käytäntöjä:

Kansainvälistämisen (i18n) ja lokalisoinnin (l10n) huomioiminen

Työskennellessäsi projekteissa, jotka vaativat kansainvälistämistä (i18n) ja lokalisointia (l10n), on olennaista pohtia, miten import type voi vaikuttaa koodiisi. Tässä on muutamia huomioon otettavia seikkoja:

Esimerkkejä eri maista

Tässä on joitakin esimerkkejä, jotka havainnollistavat, miten import type -syntaksia voidaan käyttää erilaisissa skenaarioissa eri maissa:

Yhteenveto

import type on voimakas ominaisuus TypeScriptissä, jonka avulla voit optimoida koodiasi tuomalla vain tyyppimääritykset moduulista ilman sen ajonaikaisia arvoja. Tämä voi johtaa pienempiin pakettikokoihin, vähentyneisiin riippuvuuskehiin, parempaan suorituskykyyn ja selkeämpään koodiin. Noudattamalla tässä blogikirjoituksessa esitettyjä parhaita käytäntöjä voit tehokkaasti käyttää import type -syntaksia kirjoittaaksesi tehokkaampaa ja ylläpidettävämpää TypeScript-koodia. Kun TypeScript jatkaa kehittymistään, ominaisuuksien, kuten import type, omaksuminen on ratkaisevan tärkeää skaalautuvien ja suorituskykyisten sovellusten rakentamisessa.