M

MLOG

Latviešu

Uzziniet, kā paplašināt trešo pušu TypeScript tipus, izmantojot moduļu papildināšanu, nodrošinot tipu drošību un uzlabojot izstrādātāja pieredzi.

TypeScript Moduļu Papildināšana: Trešo Pušu Tipu Paplašināšana

TypeScript spēks slēpjas tā robustajā tipu sistēmā. Tā dod iespēju izstrādātājiem agri pamanīt kļūdas, uzlabot koda uzturējamību un pilnveidot kopējo izstrādes pieredzi. Tomēr, strādājot ar trešo pušu bibliotēkām, jūs varat saskarties ar scenārijiem, kur sniegtās tipu definīcijas ir nepilnīgas vai pilnībā neatbilst jūsu specifiskajām vajadzībām. Tieši šeit palīgā nāk moduļu papildināšana, ļaujot jums paplašināt esošās tipu definīcijas, nemainot oriģinālās bibliotēkas kodu.

Kas ir Moduļu Papildināšana?

Moduļu papildināšana ir jaudīga TypeScript funkcija, kas ļauj pievienot vai modificēt moduļa ietvaros deklarētos tipus no cita faila. Uztveriet to kā papildu funkciju vai pielāgojumu pievienošanu esošai klasei vai interfeisam tipu drošā veidā. Tas ir īpaši noderīgi, kad nepieciešams paplašināt trešo pušu bibliotēku tipu definīcijas, pievienojot jaunas īpašības, metodes vai pat pārrakstot esošās, lai labāk atspoguļotu jūsu lietojumprogrammas prasības.

Atšķirībā no deklarāciju apvienošanas, kas notiek automātiski, kad vienā tvērumā tiek sastaptas divas vai vairākas deklarācijas ar vienādu nosaukumu, moduļu papildināšana nepārprotami vēršas pie konkrēta moduļa, izmantojot declare module sintaksi.

Kāpēc Izmantot Moduļu Papildināšanu?

Lūk, kāpēc moduļu papildināšana ir vērtīgs rīks jūsu TypeScript arsenālā:

Kā Darbojas Moduļu Papildināšana

Pamatkoncepcija griežas ap declare module sintaksi. Šeit ir vispārīgā struktūra:


declare module 'module-name' {
  // Tipu deklarācijas moduļa papildināšanai
  interface ExistingInterface {
    newProperty: string;
  }
}

Apskatīsim galvenās daļas:

Praktiski Piemēri

1. piemērs: Trešās puses bibliotēkas paplašināšana (Moment.js)

Pieņemsim, ka jūs izmantojat Moment.js bibliotēku datuma un laika manipulācijām, un vēlaties pievienot pielāgotu formatēšanas opciju konkrētai lokalizācijai (piemēram, lai parādītu datumus noteiktā formātā Japānā). Oriģinālās Moment.js tipu definīcijas varētu neietvert šo pielāgoto formātu. Lūk, kā jūs varat izmantot moduļu papildināšanu, lai to pievienotu:

  1. Instalējiet Moment.js tipu definīcijas: 
    
npm install @types/moment
  2. Izveidojiet TypeScript failu (piem., moment.d.ts), lai definētu savu papildinājumu: 
    
// moment.d.ts
import 'moment'; // Importējiet oriģinālo moduli, lai nodrošinātu tā pieejamību

declare module 'moment' {
  interface Moment {
    formatInJapaneseStyle(): string;
  }
}
  3. Implementējiet pielāgoto formatēšanas loģiku (atsevišķā failā, piem., moment-extensions.ts): 
    
// moment-extensions.ts
import * as moment from 'moment';

moment.fn.formatInJapaneseStyle = function(): string {
  // Pielāgota formatēšanas loģika japāņu datumiem
  const year = this.year();
  const month = this.month() + 1; // Mēnesis ir indeksēts no 0
  const day = this.date();
  return `${year}年${month}月${day}日`;
};
  4. Izmantojiet papildināto Moment.js objektu: 
    
// app.ts
import * as moment from 'moment';
import './moment-extensions'; // Importējiet implementāciju

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

Paskaidrojums:

2. piemērs: Īpašību pievienošana Request objektam (Express.js)

Pieņemsim, ka jūs izmantojat Express.js un vēlaties pievienot pielāgotu īpašību Request objektam, piemēram, userId, ko aizpilda starpprogrammatūra (middleware). Lūk, kā to var panākt ar moduļu papildināšanu:

  1. Instalējiet Express.js tipu definīcijas: 
    
npm install @types/express
  2. Izveidojiet TypeScript failu (piem., express.d.ts), lai definētu savu papildinājumu: 
    
// express.d.ts
import 'express'; // Importējiet oriģinālo moduli

declare module 'express' {
  interface Request {
    userId?: string;
  }
}
  3. Izmantojiet papildināto Request objektu savā starpprogrammatūrā: 
    
// middleware.ts
import { Request, Response, NextFunction } from 'express';

export function authenticateUser(req: Request, res: Response, next: NextFunction) {
  // Autentifikācijas loģika (piem., JWT pārbaude)
  const userId = 'user123'; // Piemērs: Iegūstiet lietotāja ID no marķiera
  req.userId = userId; // Piešķiriet lietotāja ID Request objektam
  next();
}
  4. Piekļūstiet userId īpašībai savos maršrutu apstrādātājos: 
    
// 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');
  }

  // Iegūstiet lietotāja profilu no datu bāzes, pamatojoties uz userId
  const userProfile = { id: userId, name: 'John Doe' }; // Piemērs
  res.json(userProfile);
}

Paskaidrojums:

3. piemērs: Pielāgotu atribūtu pievienošana HTML elementiem

Strādājot ar bibliotēkām, piemēram, React vai Vue.js, jūs varētu vēlēties pievienot pielāgotus atribūtus HTML elementiem. Moduļu papildināšana var palīdzēt definēt šo pielāgoto atribūtu tipus, nodrošinot tipu drošību jūsu veidnēs vai JSX kodā.

Pieņemsim, ka jūs izmantojat React un vēlaties pievienot pielāgotu atribūtu ar nosaukumu data-custom-id HTML elementiem.

  1. Izveidojiet TypeScript failu (piem., react.d.ts), lai definētu savu papildinājumu: 
    
// react.d.ts
import 'react'; // Importējiet oriģinālo moduli

declare module 'react' {
  interface HTMLAttributes extends AriaAttributes, DOMAttributes {
    "data-custom-id"?: string;
  }
}
  2. Izmantojiet pielāgoto atribūtu savos React komponentos: 
    
// MyComponent.tsx
import React from 'react';

function MyComponent() {
  return (
    
     
      Šis ir mans komponents.
    
    
  );
}

export default MyComponent;

Paskaidrojums:

Labākās Prakses Moduļu Papildināšanai

Biežākās Kļūdas un Kā no Tām Izvairīties

Moduļu Papildināšanas Priekšrocības

Moduļu papildināšanas izmantošana TypeScript sniedz vairākas galvenās priekšrocības:

Noslēgums

TypeScript moduļu papildināšana ir jaudīgs paņēmiens tipu definīciju paplašināšanai un pielāgošanai no trešo pušu bibliotēkām. Izmantojot moduļu papildināšanu, jūs varat nodrošināt, ka jūsu kods paliek tipu drošs, uzlabot izstrādātāja pieredzi un izvairīties no koda dublēšanas. Sekojot šajā rokasgrāmatā apskatītajām labākajām praksēm un izvairoties no biežākajām kļūdām, jūs varat efektīvi izmantot moduļu papildināšanu, lai izveidotu robustākas un uzturējamākas TypeScript lietojumprogrammas. Izmantojiet šo funkciju un atraisiet pilnu TypeScript tipu sistēmas potenciālu!