M

MLOG

Eesti

Õppige, kuidas laiendada kolmandate osapoolte TypeScripti tüüpe moodulite laiendamise abil, tagades tüübiohutuse ja parema arendajakogemuse.

TypeScript-i moodulite laiendamine: kolmandate osapoolte tüüpide laiendamine

TypeScripti tugevus seisneb selle robustses tüübisüsteemis. See võimaldab arendajatel vigu varakult avastada, koodi hooldatavust parandada ja üldist arenduskogemust täiustada. Kolmandate osapoolte teekidega töötades võite aga sattuda olukordadesse, kus pakutavad tüübimääratlused on puudulikud või ei vasta täielikult teie konkreetsetele vajadustele. Siin tulebki appi moodulite laiendamine, mis võimaldab teil olemasolevaid tüübimääratlusi laiendada ilma algset teegi koodi muutmata.

Mis on moodulite laiendamine?

Moodulite laiendamine on võimas TypeScripti funktsioon, mis võimaldab teil lisada või muuta moodulis deklareeritud tüüpe teisest failist. Mõelge sellele kui olemasolevale klassile või liidesele lisafunktsioonide või kohanduste lisamisele tüübiohutul viisil. See on eriti kasulik, kui teil on vaja laiendada kolmandate osapoolte teekide tüübimääratlusi, lisades uusi omadusi, meetodeid või isegi kirjutades üle olemasolevaid, et need vastaksid paremini teie rakenduse nõuetele.

Erinevalt deklaratsioonide ühendamisest (declaration merging), mis toimub automaatselt, kui samas skoobis esineb kaks või enam sama nimega deklaratsiooni, sihib moodulite laiendamine selgesõnaliselt konkreetset moodulit, kasutades declare module süntaksit.

Miks kasutada moodulite laiendamist?

Siin on, miks moodulite laiendamine on väärtuslik tööriist teie TypeScripti arsenalis:

Kuidas moodulite laiendamine töötab

Põhikontseptsioon keerleb declare module süntaksi ümber. Siin on üldine struktuur:


declare module 'module-name' {
  // Tüübideklaratsioonid mooduli laiendamiseks
  interface ExistingInterface {
    newProperty: string;
  }
}

Vaatame peamised osad üle:

Praktilised näited

Näide 1: Kolmanda osapoole teegi laiendamine (Moment.js)

Oletame, et kasutate kuupäevade ja kellaaegade manipuleerimiseks Moment.js teeki ning soovite lisada kohandatud vormindamisvaliku konkreetse lokaadi jaoks (nt kuupäevade kuvamiseks kindlas vormingus Jaapanis). Algne Moment.js tüübimääratlus ei pruugi seda kohandatud vormingut sisaldada. Siin on, kuidas saate selle lisamiseks kasutada moodulite laiendamist:

  1. Paigaldage Moment.js tüübimääratlused: 
    
npm install @types/moment
  2. Looge TypeScript-fail (nt moment.d.ts) oma laienduse määratlemiseks: 
    
// moment.d.ts
import 'moment'; // Importige algne moodul, et tagada selle kättesaadavus

declare module 'moment' {
  interface Moment {
    formatInJapaneseStyle(): string;
  }
}
  3. Implementeerige kohandatud vormindamisloogika (eraldi failis, nt moment-extensions.ts): 
    
// moment-extensions.ts
import * as moment from 'moment';

moment.fn.formatInJapaneseStyle = function(): string {
  // Kohandatud vormindamisloogika Jaapani kuupäevade jaoks
  const year = this.year();
  const month = this.month() + 1; // Kuu on 0-indekseeritud
  const day = this.date();
  return `${year}年${month}月${day}日`;
};
  4. Kasutage laiendatud Moment.js objekti: 
    
// app.ts
import * as moment from 'moment';
import './moment-extensions'; // Importige implementatsioon

const now = moment();
const japaneseFormattedDate = now.formatInJapaneseStyle();
console.log(japaneseFormattedDate); // Väljund: nt 2024年1月26日

Selgitus:

Näide 2: Omaduste lisamine päringuobjektile (Express.js)

Oletame, et kasutate Express.js-i ja soovite lisada Request objektile kohandatud omaduse, näiteks userId, mille täidab vahevara (middleware). Siin on, kuidas saate seda saavutada moodulite laiendamisega:

  1. Paigaldage Express.js tüübimääratlused: 
    
npm install @types/express
  2. Looge TypeScript-fail (nt express.d.ts) oma laienduse määratlemiseks: 
    
// express.d.ts
import 'express'; // Importige algne moodul

declare module 'express' {
  interface Request {
    userId?: string;
  }
}
  3. Kasutage laiendatud Request objekti oma vahevaras: 
    
// middleware.ts
import { Request, Response, NextFunction } from 'express';

export function authenticateUser(req: Request, res: Response, next: NextFunction) {
  // Autentimisloogika (nt JWT kontrollimine)
  const userId = 'user123'; // Näide: Kasutaja ID hankimine tokenist
  req.userId = userId; // Määrake kasutaja ID Request objektile
  next();
}
  4. Juurdepääs userId omadusele oma marsruudi käsitlejates (route handlers): 
    
// routes.ts
import { Request, Response } from 'express';

export function getUserProfile(req: Request, res: Response) {
  const userId = req.userId;
  if (!userId) {
    return res.status(401).send('Unauthorized');
  }

  // Kasutajaprofiili hankimine andmebaasist userId alusel
  const userProfile = { id: userId, name: 'John Doe' }; // Näide
  res.json(userProfile);
}

Selgitus:

Näide 3: Kohandatud atribuutide lisamine HTML elementidele

Töötades teekidega nagu React või Vue.js, võite soovida lisada HTML-elementidele kohandatud atribuute. Moodulite laiendamine aitab teil määratleda nende kohandatud atribuutide tüübid, tagades tüübiohutuse teie mallides või JSX-koodis.

Oletame, et kasutate Reacti ja soovite lisada HTML-elementidele kohandatud atribuudi nimega data-custom-id.

  1. Looge TypeScript-fail (nt react.d.ts) oma laienduse määratlemiseks: 
    
// react.d.ts
import 'react'; // Importige algne moodul

declare module 'react' {
  interface HTMLAttributes extends AriaAttributes, DOMAttributes {
    "data-custom-id"?: string;
  }
}
  2. Kasutage kohandatud atribuuti oma Reacti komponentides: 
    
// MyComponent.tsx
import React from 'react';

function MyComponent() {
  return (
    
     
      This is my component.
    
    
  );
}

export default MyComponent;

Selgitus:

Moodulite laiendamise parimad praktikad

Levinud lõksud ja kuidas neid vältida

Moodulite laiendamise kasutamise eelised

Moodulite laiendamise kasutamine TypeScriptis pakub mitmeid olulisi eeliseid:

Kokkuvõte

TypeScripti moodulite laiendamine on võimas tehnika kolmandate osapoolte teekide tüübimääratluste laiendamiseks ja kohandamiseks. Moodulite laiendamist kasutades saate tagada, et teie kood jääb tüübiohutuks, parandada arendajakogemust ja vältida koodi dubleerimist. Järgides selles juhendis käsitletud parimaid praktikaid ja vältides levinud lõkse, saate tõhusalt kasutada moodulite laiendamist, et luua robustsemaid ja hooldatavamaid TypeScripti rakendusi. Võtke see funktsioon omaks ja avage TypeScripti tüübisüsteemi kogu potentsiaal!