Declaration files — .d.ts yaratish, @types, module augmentation

~20 daq · TypeScript · Modullar, Sozlash va Amaliy

Eski JavaScript kutubxona ishlatmoqchisiz — TypeScript turlari yo'q. Yoki o'zingizning JS funksiyangizga tur qo'shmoqchisiz. Declaration file (.d.ts) — JavaScript kodi bo'lmagan, faqat tur ma'lumotlari saqlanadigan fayl.

.d.ts nima?

.d.ts — declaration (e'lon) fayl. TypeScript buni JavaScript faylning tur tavsifi sifatida o'qiydi. Unda faqat tur, interfaclar, funksiya imzolari — hech qanday runtime kod yo'q.

// math.d.ts
export function qoshish(a: number, b: number): number;
export function ayirish(a: number, b: number): number;
export const PI: number;

@types — DefinitelyTyped

Ko'pchilik mashhur JS kutubxonalarining turlari @types/... paketi sifatida mavjud:

npm install --save-dev @types/lodash
npm install --save-dev @types/express
npm install --save-dev @types/node

TypeScript bu paketlarni avtomatik topib, tur tekshiruvini qo'llab-quvvatlaydi.

import _ from "lodash"; // @types/lodash o'rnatilgan
_.chunk([1, 2, 3, 4], 2); // ✅ — tur ma'lum

Eski JS kutubxona uchun .d.ts

Turi yo'q JS kutubxona:

// my-lib.js (old JavaScript)
function formatDate(date, format) { ... }
module.exports = { formatDate };

Declaration fayl:

// my-lib.d.ts
export function formatDate(date: Date, format: string): string;

Global declaration

Brauzerda global o'zgaruvchi bo'lsa:

// global.d.ts
declare const __APP_VERSION__: string;
declare const __DEV__: boolean;

// Ishlatish
console.log(__APP_VERSION__); // ✅ TypeScript biladi

Module augmentation — mavjud modulni kengaytirish

Kutubxona turlariga xususiyat qo'shish — manba kodini o'zgartirmay:

// express-extension.d.ts
import "express";

declare module "express" {
  interface Request {
    user?: {
      id:    number;
      email: string;
    };
  }
}

// Endi route larda
app.get("/profil", (req, res) => {
  req.user?.id; // ✅ TypeScript biladi
});

O'z kutubxonangizga .d.ts yaratish

# tsconfig.json da
"declaration": true
"declarationDir": "./types"

# Build qilganda .d.ts avtomatik yaratiladi
tsc

Xulosa

.d.ts          — tur e'lon fayli, runtime kod yo'q
@types/...     — DefinitelyTyped, mashhur JS kutubxonalar uchun

// Global
declare const X: string;
declare function fn(): void;
declare module "modul-nomi" { ... }

// Module augmentation
import "express";
declare module "express" {
  interface Request { user?: User; }
}

// tsconfig.json
"declaration": true  — .d.ts avtomatik yaratish

Keyingi dars

59-dars: tsconfig.json to'liq — target, lib, paths, project references