M

MLOG

Lietuvių

Sužinokite, kaip išplėsti trečiųjų šalių TypeScript tipus naudojant modulių papildymą, užtikrinant tipų saugumą ir geresnę programuotojo patirtį.

TypeScript modulių papildymas: trečiųjų šalių tipų išplėtimas

TypeScript stiprybė slypi tvirtoje tipų sistemoje. Ji suteikia programuotojams galimybę anksti aptikti klaidas, pagerinti kodo palaikymą ir patobulinti bendrą kūrimo patirtį. Tačiau dirbant su trečiųjų šalių bibliotekomis, galite susidurti su situacijomis, kai pateikti tipų apibrėžimai yra nepilni arba nevisiškai atitinka jūsų specifinius poreikius. Būtent čia į pagalbą ateina modulių papildymas, leidžiantis išplėsti esamus tipų apibrėžimus nekeičiant originalaus bibliotekos kodo.

Kas yra modulių papildymas?

Modulių papildymas yra galinga TypeScript funkcija, kuri leidžia pridėti ar modifikuoti modulyje deklaruotus tipus iš kito failo. Įsivaizduokite tai kaip papildomų funkcijų ar pritaikymų pridėjimą prie esamos klasės ar sąsajos tipų saugiu būdu. Tai ypač naudinga, kai reikia išplėsti trečiųjų šalių bibliotekų tipų apibrėžimus, pridedant naujų savybių, metodų ar net perrašant esamus, kad jie geriau atspindėtų jūsų programos reikalavimus.

Skirtingai nuo deklaracijų suliejimo, kuris įvyksta automatiškai, kai toje pačioje aprėptyje aptinkamos dvi ar daugiau deklaracijų su tuo pačiu pavadinimu, modulių papildymas aiškiai nukreiptas į konkretų modulį, naudojant declare module sintaksę.

Kodėl verta naudoti modulių papildymą?

Štai kodėl modulių papildymas yra vertingas įrankis jūsų TypeScript arsenale:

Kaip veikia modulių papildymas

Pagrindinė koncepcija sukasi aplink declare module sintaksę. Štai bendra struktūra:


declare module 'module-name' {
  // Type declarations to augment the module
  interface ExistingInterface {
    newProperty: string;
  }
}

Išnagrinėkime pagrindines dalis:

Praktiniai pavyzdžiai

1 pavyzdys: trečiosios šalies bibliotekos (Moment.js) išplėtimas

Tarkime, naudojate Moment.js biblioteką datoms ir laikui valdyti, ir norite pridėti pasirinktinę formatavimo parinktį konkrečiai lokalizacijai (pvz., datų rodymui tam tikru formatu Japonijoje). Originalūs Moment.js tipų apibrėžimai gali neįtraukti šio pasirinktinio formato. Štai kaip galite jį pridėti naudodami modulių papildymą:

  1. Įdiekite Moment.js tipų apibrėžimus: 
    
npm install @types/moment
  2. Sukurkite TypeScript failą (pvz., moment.d.ts), kad apibrėžtumėte savo papildymą: 
    
// moment.d.ts
import 'moment'; // Import the original module to ensure it's available

declare module 'moment' {
  interface Moment {
    formatInJapaneseStyle(): string;
  }
}
  3. Įgyvendinkite pasirinktinę formatavimo logiką (atskirame faile, pvz., moment-extensions.ts): 
    
// moment-extensions.ts
import * as moment from 'moment';

moment.fn.formatInJapaneseStyle = function(): string {
  // Custom formatting logic for Japanese dates
  const year = this.year();
  const month = this.month() + 1; // Month is 0-indexed
  const day = this.date();
  return `${year}年${month}月${day}日`;
};
  4. Naudokite papildytą Moment.js objektą: 
    
// app.ts
import * as moment from 'moment';
import './moment-extensions'; // Import the implementation

const now = moment();
const japaneseFormattedDate = now.formatInJapaneseStyle();
console.log(japaneseFormattedDate); // Output: e.g., 2024年1月26日

Paaiškinimas:

2 pavyzdys: savybių pridėjimas prie užklausos objekto (Express.js)

Tarkime, naudojate Express.js ir norite pridėti pasirinktinę savybę prie Request objekto, pavyzdžiui, userId, kurią užpildo tarpinė programinė įranga. Štai kaip tai galite pasiekti naudojant modulių papildymą:

  1. Įdiekite Express.js tipų apibrėžimus: 
    
npm install @types/express
  2. Sukurkite TypeScript failą (pvz., express.d.ts), kad apibrėžtumėte savo papildymą: 
    
// express.d.ts
import 'express'; // Import the original module

declare module 'express' {
  interface Request {
    userId?: string;
  }
}
  3. Naudokite papildytą Request objektą savo tarpinėje programinėje įrangoje: 
    
// middleware.ts
import { Request, Response, NextFunction } from 'express';

export function authenticateUser(req: Request, res: Response, next: NextFunction) {
  // Authentication logic (e.g., verifying a JWT)
  const userId = 'user123'; // Example: Retrieve user ID from token
  req.userId = userId; // Assign the user ID to the Request object
  next();
}
  4. Pasiekite userId savybę savo maršrutų apdorojimo funkcijose: 
    
// 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');
  }

  // Retrieve user profile from database based on userId
  const userProfile = { id: userId, name: 'John Doe' }; // Example
  res.json(userProfile);
}

Paaiškinimas:

3 pavyzdys: pasirinktinių atributų pridėjimas prie HTML elementų

Dirbant su bibliotekomis, tokiomis kaip React ar Vue.js, galbūt norėsite pridėti pasirinktinių atributų prie HTML elementų. Modulių papildymas gali padėti apibrėžti šių pasirinktinių atributų tipus, užtikrinant tipų saugumą jūsų šablonuose ar JSX kode.

Tarkime, naudojate React ir norite pridėti pasirinktinį atributą pavadinimu data-custom-id prie HTML elementų.

  1. Sukurkite TypeScript failą (pvz., react.d.ts), kad apibrėžtumėte savo papildymą: 
    
// react.d.ts
import 'react'; // Import the original module

declare module 'react' {
  interface HTMLAttributes extends AriaAttributes, DOMAttributes {
    "data-custom-id"?: string;
  }
}
  2. Naudokite pasirinktinį atributą savo React komponentuose: 
    
// MyComponent.tsx
import React from 'react';

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

export default MyComponent;

Paaiškinimas:

Geriausios modulių papildymo praktikos

Dažniausios klaidos ir kaip jų išvengti

Modulių papildymo naudojimo privalumai

Modulių papildymo naudojimas TypeScript suteikia keletą pagrindinių privalumų:

Išvada

TypeScript modulių papildymas yra galinga technika, skirta išplėsti ir pritaikyti tipų apibrėžimus iš trečiųjų šalių bibliotekų. Naudodami modulių papildymą, galite užtikrinti, kad jūsų kodas išliks tipų saugus, pagerinti programuotojo patirtį ir išvengti kodo dubliavimo. Laikydamiesi šiame vadove aptartų geriausių praktikų ir vengdami dažniausių klaidų, galite efektyviai panaudoti modulių papildymą kurdami tvirtesnes ir lengviau palaikomas TypeScript programas. Pasinaudokite šia funkcija ir atskleiskite visą TypeScript tipų sistemos potencialą!