M

MLOG

O'zbek

Uchinchi tomon TypeScript turlarini modul kengaytmasi yordamida kengaytirishni o'rganing, bu esa turlarning xavfsizligini va dasturchi tajribasini yaxshilaydi.

TypeScript Modullarini Kengaytirish: Uchinchi Tomon Turlarini Kengaytirish

TypeScript'ning kuchi uning mustahkam turlar tizimida yotadi. U dasturchilarga xatolarni erta aniqlash, kodning saqlanuvchanligini yaxshilash va umumiy dasturlash tajribasini oshirish imkonini beradi. Biroq, uchinchi tomon kutubxonalari bilan ishlaganda, taqdim etilgan tur ta'riflari to'liq bo'lmagan yoki sizning maxsus ehtiyojlaringizga to'liq mos kelmaydigan holatlarga duch kelishingiz mumkin. Aynan shu yerda modulni kengaytirish yordamga keladi, bu sizga asl kutubxona kodini o'zgartirmasdan mavjud tur ta'riflarini kengaytirish imkonini beradi.

Modulni Kengaytirish nima?

Modulni kengaytirish — bu TypeScript'ning kuchli xususiyati bo'lib, u boshqa fayldan modul ichida e'lon qilingan turlarni qo'shish yoki o'zgartirish imkonini beradi. Buni mavjud sinf yoki interfeysga turlar xavfsizligini ta'minlagan holda qo'shimcha xususiyatlar yoki sozlamalar qo'shish deb tasavvur qiling. Bu, ayniqsa, uchinchi tomon kutubxonalarining tur ta'riflarini kengaytirish, ilovangiz talablariga yaxshiroq mos kelishi uchun yangi xususiyatlar, metodlar qo'shish yoki hatto mavjudlarini bekor qilish zarur bo'lganda juda foydalidir.

Bir xil nomga ega bo'lgan ikki yoki undan ortiq e'lon bir xil doirada duch kelganda avtomatik ravishda yuz beradigan e'lonlarni birlashtirishdan farqli o'laroq, modulni kengaytirish declare module sintaksisidan foydalanib, aniq bir modulni nishonga oladi.

Nima uchun Modulni Kengaytirishdan Foydalanish Kerak?

Quyida modulni kengaytirishning TypeScript arsenalingizdagi qimmatli vosita ekanligining sabablari keltirilgan:

Modulni Kengaytirish Qanday Ishlaydi?

Asosiy konsepsiya declare module sintaksisi atrofida aylanadi. Bu yerda umumiy tuzilma keltirilgan:


declare module 'module-name' {
  // Modulni kengaytirish uchun tur e'lonlari
  interface ExistingInterface {
    newProperty: string;
  }
}

Keling, asosiy qismlarni ko'rib chiqamiz:

Amaliy Misollar

1-misol: Uchinchi tomon kutubxonasini kengaytirish (Moment.js)

Aytaylik, siz sana va vaqt bilan ishlash uchun Moment.js kutubxonasidan foydalanmoqdasiz va ma'lum bir hudud uchun maxsus formatlash opsiyasini qo'shmoqchisiz (masalan, Yaponiyada sanalarni ma'lum bir formatda ko'rsatish uchun). Asl Moment.js tur ta'riflari bu maxsus formatni o'z ichiga olmasligi mumkin. Buni modulni kengaytirish yordamida qanday qo'shish mumkinligi quyida keltirilgan:

  1. Moment.js uchun tur ta'riflarini o'rnating: 
    
npm install @types/moment
  2. Kengaytirishni aniqlash uchun TypeScript faylini yarating (masalan, moment.d.ts): 
    
// moment.d.ts
import 'moment'; // Mavjudligini ta'minlash uchun asl modulni import qiling

declare module 'moment' {
  interface Moment {
    formatInJapaneseStyle(): string;
  }
}
  3. Maxsus formatlash mantig'ini amalga oshiring (alohida faylda, masalan, moment-extensions.ts): 
    
// moment-extensions.ts
import * as moment from 'moment';

moment.fn.formatInJapaneseStyle = function(): string {
  // Yapon sanalari uchun maxsus formatlash mantig'i
  const year = this.year();
  const month = this.month() + 1; // Oy 0 dan boshlanadi
  const day = this.date();
  return `${year}年${month}月${day}日`;
};
  4. Kengaytirilgan Moment.js obyektidan foydalaning: 
    
// app.ts
import * as moment from 'moment';
import './moment-extensions'; // Amalga oshirishni import qiling

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

Tushuntirish:

2-misol: So'rov Obyektiga Xususiyatlar Qo'shish (Express.js)

Aytaylik, siz Express.js dan foydalanmoqdasiz va Request obyektiga maxsus xususiyat, masalan, middleware tomonidan to'ldiriladigan userId qo'shmoqchisiz. Bunga modulni kengaytirish orqali qanday erishish mumkinligi quyida keltirilgan:

  1. Express.js uchun tur ta'riflarini o'rnating: 
    
npm install @types/express
  2. Kengaytirishni aniqlash uchun TypeScript faylini yarating (masalan, express.d.ts): 
    
// express.d.ts
import 'express'; // Asl modulni import qiling

declare module 'express' {
  interface Request {
    userId?: string;
  }
}
  3. Kengaytirilgan Request obyektidan middleware'da foydalaning: 
    
// middleware.ts
import { Request, Response, NextFunction } from 'express';

export function authenticateUser(req: Request, res: Response, next: NextFunction) {
  // Autentifikatsiya mantig'i (masalan, JWTni tekshirish)
  const userId = 'user123'; // Misol: Tokendan foydalanuvchi ID'sini olish
  req.userId = userId; // Foydalanuvchi ID'sini Request obyektiga tayinlash
  next();
}
  4. Marshrut ishlovchilarida userId xususiyatiga murojaat qiling: 
    
// 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');
  }

  // userId asosida ma'lumotlar bazasidan foydalanuvchi profilini olish
  const userProfile = { id: userId, name: 'John Doe' }; // Misol
  res.json(userProfile);
}

Tushuntirish:

3-misol: HTML Elementlariga Maxsus Atributlar Qo'shish

React yoki Vue.js kabi kutubxonalar bilan ishlaganda, siz HTML elementlariga maxsus atributlar qo'shishni xohlashingiz mumkin. Modulni kengaytirish sizga bu maxsus atributlar uchun turlarni aniqlashda yordam beradi va shablonlaringiz yoki JSX kodingizda turlar xavfsizligini ta'minlaydi.

Aytaylik, siz React'dan foydalanmoqdasiz va HTML elementlariga data-custom-id deb nomlangan maxsus atribut qo'shmoqchisiz.

  1. Kengaytirishni aniqlash uchun TypeScript faylini yarating (masalan, react.d.ts): 
    
// react.d.ts
import 'react'; // Asl modulni import qiling

declare module 'react' {
  interface HTMLAttributes extends AriaAttributes, DOMAttributes {
    "data-custom-id"?: string;
  }
}
  2. Maxsus atributdan React komponentlaringizda foydalaning: 
    
// MyComponent.tsx
import React from 'react';

function MyComponent() {
  return (
    
     
      Bu mening komponentim.
    
    
  );
}

export default MyComponent;

Tushuntirish:

Modulni Kengaytirish uchun Eng Yaxshi Amaliyotlar

Umumiy Xatolar va Ulardan Qanday Qochish Mumkin

Modulni Kengaytirishdan Foydalanishning Afzalliklari

TypeScript'da modulni kengaytirishdan foydalanish bir nechta asosiy afzalliklarni taqdim etadi:

Xulosa

TypeScript modulini kengaytirish uchinchi tomon kutubxonalaridagi tur ta'riflarini kengaytirish va sozlash uchun kuchli usuldir. Modulni kengaytirishdan foydalanib, kodingizning turlar xavfsizligini ta'minlashingiz, dasturchi tajribasini yaxshilashingiz va kod takrorlanishidan qochishingiz mumkin. Ushbu qo'llanmada muhokama qilingan eng yaxshi amaliyotlarga rioya qilish va umumiy xatolardan qochish orqali siz yanada mustahkam va saqlanuvchan TypeScript ilovalarini yaratish uchun modulni kengaytirishdan samarali foydalanishingiz mumkin. Ushbu xususiyatni qabul qiling va TypeScript'ning turlar tizimining to'liq salohiyatini oching!