M

MLOG

Lietuvių

Išnagrinėkite TypeScript „import type“ sintaksę, skirtą optimizuoti kompiliavimo laiką ir išvengti vykdymo klaidų. Sužinokite, kaip naudoti tik tipų importavimą ir jo privalumus.

TypeScript „import type“: Išsami analizė apie tik tipų importavimo deklaracijas

TypeScript, būdamas JavaScript viršaibiu, įneša statinį tipizavimą į dinamišką interneto programavimo pasaulį. Viena iš pagrindinių jo savybių yra galimybė importuoti tipus iš kitų modulių. Tačiau, importuojant tipus, kurie naudojami tik tipų tikrinimui, galutiniame JavaScript pakete gali atsirasti nereikalingo kodo. Siekiant išspręsti šią problemą, TypeScript pristatė import type sintaksę. Šiame tinklaraščio įraše išsamiai nagrinėsime import type, paaiškindami jo paskirtį, naudojimą, privalumus ir galimus trūkumus.

Kas yra import type?

import type yra specifinė TypeScript sintaksė, leidžianti importuoti tik tipų apibrėžimus iš modulio, neimportuojant jokių modulio vykdymo laiko (angl. runtime) reikšmių. Tai ypač naudinga, kai reikia naudoti tipą iš kito modulio tipų anotacijoms ar tipų tikrinimui, bet nereikia pasiekti jokių jo reikšmių vykdymo metu. Tai tiesiogiai prisideda prie mažesnio paketo dydžio, nes JavaScript kompiliatorius praleidžia importuotą modulį kompiliavimo metu, jei jis naudojamas išskirtinai tik tipų informacijai.

Kodėl naudoti import type?

Yra keletas svarių priežasčių naudoti import type:

Kaip naudoti import type

import type sintaksė yra paprasta. Užuot naudoję standartinį import sakinį, naudojate import type, po kurio nurodote tipą, kurį norite importuoti. Štai paprastas pavyzdys:

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

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

Šiame pavyzdyje importuojame User tipą iš ./user modulio. Mes naudojame User tipą tik tipo anotacijai greetUser funkcijoje. User modulio reikšmės nėra pasiekiamos vykdymo metu.

import type derinimas su įprastais importavimais

Taip pat galite derinti import type su įprastais importavimais tame pačiame sakinyje, naudodami raktinį žodį type:

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

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

console.log(someValue);

Šiuo atveju someValue yra importuojama kaip įprasta reikšmė, o User ir Product yra importuojami tik kaip tipai. Tai leidžia jums vienu sakiniu importuoti ir reikšmes, ir tipus iš to paties modulio.

Visko importavimas kaip tipų

Jei jums reikia importuoti visus tipus iš modulio, neimportuojant jokių reikšmių, galite naudoti vardų srities importavimo sintaksę su import type:

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

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

Čia mes importuojame visus tipus iš ./types modulio į Types vardų sritį. Tada galime pasiekti tipus naudodami Types. priešdėlį.

Pavyzdžiai įvairių tipų projektuose

„import type“ privalumai taikomi įvairių tipų projektams. Štai keletas pavyzdžių:

1 pavyzdys: React komponentas

Apsvarstykite React komponentą, kuris gauna rekvizitus (angl. props) su specifiniais tipais:

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;

Šiame React pavyzdyje `import type { User } from './user';` užtikrina, kad importuojamas tik `User` tipo apibrėžimas, optimizuojant paketo dydį. Mes tiesiogiai nenaudojame 'user' modulio reikšmių; mes naudojame tik 'User' *tipą*, apibrėžtą tame modulyje.

2 pavyzdys: Node.js serverinė dalis (angl. backend)

Node.js serverinėje programoje galite apibrėžti duomenų bazės modelius kaip tipus:

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

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

Čia `import type { User } from './models';` leidžia išvengti viso `models` modulio įtraukimo į paketą, jei `User` tipas reikalingas tik tipų tikrinimui. `createUser` funkcija *yra* importuojama, nes ji reikalinga *vykdymo metu*.

3 pavyzdys: Angular servisas

Angular servise galite įšvirkšti (angl. inject) servisą, kuris naudoja tipą:

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 tipas naudojamas apibrėžti duomenų struktūrą, kurią grąžina productService.getProducts() metodas. Naudojant `import type { Product } from './product.model';` užtikrinama, kad importuojama tik tipų informacija, pagerinant Angular programos našumą. `ProductService` *yra* vykdymo laiko priklausomybė.

import type naudojimo privalumai skirtingose kūrimo aplinkose

import type taikymo privalumai apima įvairias kūrimo aplinkas:

Galimi trūkumai

Nors import type paprastai yra naudingas, reikia žinoti apie keletą galimų trūkumų:

Geriausios praktikos naudojant import type

Norėdami efektyviai naudoti import type, apsvarstykite šias geriausias praktikas:

Internacionalizacijos (i18n) ir lokalizacijos (l10n) aspektai

Dirbant su projektais, kuriems reikalinga internacionalizacija (i18n) ir lokalizacija (l10n), svarbu apsvarstyti, kaip import type gali paveikti jūsų kodą. Štai keletas dalykų, kuriuos reikia turėti omenyje:

Pavyzdžiai iš įvairių šalių

Štai keletas pavyzdžių, iliustruojančių, kaip import type gali būti naudojamas įvairiuose scenarijuose skirtingose šalyse:

Išvada

import type yra galinga TypeScript funkcija, leidžianti optimizuoti jūsų kodą, importuojant tik tipų apibrėžimus iš modulio, neimportuojant jokių jo vykdymo laiko reikšmių. Tai gali lemti mažesnius paketų dydžius, sumažinti ciklinių priklausomybių skaičių, pagerinti našumą ir padidinti kodo aiškumą. Laikydamiesi šiame tinklaraščio įraše pateiktų geriausių praktikų, galite efektyviai naudoti import type rašydami efektyvesnį ir lengviau palaikomą TypeScript kodą. TypeScript toliau tobulėjant, tokių funkcijų kaip import type pritaikymas yra labai svarbus kuriant mastelį išlaikančias ir našias programas.