M

MLOG

Eesti

Uurige TypeScripti `import type` süntaksit ehitusaegade optimeerimiseks ja vaikimisi vigade vältimiseks. Õppige kasutama ainult tüüpide imporditud andmeid ja nende eeliseid.

TypeScript Import Type: põhjalik ülevaade ainult tüüpide importimise deklaratsioonidest

TypeScript, JavaScripti ülikomplekt, toob staatilise tüübisüsteemi dünaamilisse veebiarenduse maailma. Üks selle peamistest funktsioonidest on võime importida tüüpe teistest moodulitest. Kuid tüüpide importimine, mida kasutatakse ainult tüüpide kontrollimiseks, võib viia ebavajaliku koodini lõplikus JavaScripti paketis. Selle proble probleemi lahendamiseks tutvustas TypeScript import type süntaksit. See blogipostitus uurib import type üksikasjalikult, selgitades selle eesmärki, kasutusviisi, eeliseid ja potentsiaalseid hoiatusi.

Mis on import type?

import type on TypeScripti spetsiifiline süntaks, mis võimaldab teil importida moodulist ainult tüübimääratlusi, ilma et impordiksite ühtegi mooduli käitusaja väärtustest. See on eriti kasulik, kui peate kasutama tüüpi teisest moodulist tüübimääratluste või tüüpide kontrollimiseks, kuid ei pea selle käitusajal ligi pääsema ühtegi selle väärtustest. See aitab otseselt kaasa väiksemale paketisuurusele, kuna JavaScripti kompilaator jätab imporditud mooduli kompilaatoriprotsessi ajal välja, kui seda kasutatakse ainult tüübiteabe jaoks.

Miks kasutada import type?

import type kasutamiseks on mitu veenvat põhjust:

Kuidas kasutada import type

import type süntaks on lihtne. Standardse import avalduse asemel kasutate import type, millele järgneb imporditav tüüp. Siin on põhimõtteline näide:

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

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

Selles näites impordime User tüübi ./user moodulist. Kasutame ainult User tüüpi tüübimääranguks funktsioonis greetUser. User mooduli väärtused pole käitusajal ligipääsetavad.

import type kombineerimine tavaliste importidega

Samuti saate kombineerida import type tavaliste importidega samas avalduses, kasutades type võtit:

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

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

console.log(someValue);

Sel juhul imporditakse someValue tavalise väärtusena, samas kui User ja Product imporditakse ainult tüüpidena. See võimaldab teil importida nii väärtusi kui ka tüüpe samast moodulist ühe avaldusega.

Kõikide impordimine tüüpidena

Kui teil on vaja importida kõik tüübid moodulist ilma ühtegi väärtust importimata, saate kasutada nimeruumi importimise süntaksit koos import type:

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

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

Siin impordime kõik tüübid ./types moodulist Types nimeruumi. Seejärel saame tüüpidele ligi Types. prefiksiga.

Näited erinevate projektitüüpide kohta

import type eelised kehtivad erinevate projektitüüpide puhul. Siin on mõned näited:

Näide 1: Reacti komponent

Kaaluge Reacti komponenti, mis saab kindlate tüüpidega propsi:

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;

Selles Reacti näites tagab import type { User } from './user';, et imporditakse ainult User tüübi määratlus, optimeerides paketisuurust. Me ei kasuta otse 'user' mooduli väärtusi; me lihtsalt kasutame seda 'User' *tüüpi*, nagu on määratletud selles moodulis.

Näide 2: Node.jsi taustaprogramm

Node.jsi taustaprogrammi rakenduses võite andmebaasimudeleid tüüpidena defineerida:

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

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

Siin väldib import type { User } from './models'; kogu models mooduli lisamist paketti, kui ainult User tüüp on vajalik tüüpide kontrollimiseks. Funktsioon createUser *on* imporditud, kuna seda vajatakse *käitusajal* kasutamiseks.

Näide 3: Angulari teenus

Angulari teenuses võite süstida teenuse, mis kasutab tüüpi:

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 tüüpi kasutatakse productService.getProducts() meetodi tagastatava andmete struktuuri defineerimiseks. Kasutades import type { Product } from './product.model'; tagatakse, et imporditakse ainult tüübiteave, parandades Angulari rakenduse jõudlust. ProductService *on* käitusaja sõltuvus.

import type kasutamise eelised erinevates arenduskeskkondades

import type rakendamise eelised laienevad erinevatele arendusseadistustele:

Potentsiaalsed hoiatused

Kuigi import type on üldiselt kasulik, on mõned hoiatused, millest teadlik olla:

Parimad tavad import type kasutamiseks

import type tõhusaks kasutamiseks kaaluge järgmisi parimaid tavasid:

Rahvusvahelise (i18n) ja lokaliseerimise (l10n) kaalutlused

Projektidega töötades, mis nõuavad rahvusvahelistamist (i18n) ja lokaliseerimist (l10n), on oluline kaaluda, kuidas import type teie koodi võib mõjutada. Siin on mõned punktid, mida meeles pidada:

Näited erinevatest riikidest

Siin on mõned näited, mis illustreerivad, kuidas import type saab kasutada erinevates stsenaariumides üle maailma:

Järeldus

import type on TypeScripti võimas funktsioon, mis võimaldab teil oma koodi optimeerida, importides moodulist ainult tüübimääratlusi, ilma et impordiksite ühtegi selle käitusaja väärtust. See võib parandada paketisuurusi, vähendada tsükilisi sõltuvusi, parandada jõudlust ja suurendada koodi selgust. Järgides selles blogipostituses esitatud parimaid tavasid, saate tõhusalt kasutada import type, et kirjutada tõhusamat ja hooldatavamat TypeScripti koodi. Kuna TypeScript areneb pidevalt, on selliste funktsioonide nagu import type omaksvõtmine skaalautuvate ja jõudlusrikaste rakenduste loomisel ülioluline.