Chapter 15 — Modullar va Deklaratsiya Fayllari

Bu bob — TypeScript kodini modullarga bo'lish, uchinchi tomon JavaScript kutubxonalari bilan ishlash va o'z tip deklaratsiyalaringizni yozishni chuqur yoritadi.

---

15.1 import/export Asoslari

Example

index.ts
TypeScriptNusxalash
01// mathUtils.ts
02export function add(a: number, b: number): number {
03  return a + b;
04}
05 
06export interface Point {
07  x: number;
08  y: number;
09}
10 
11export default class Calculator {
12  add(a: number, b: number) { return a + b; }
13}
14 
15// main.ts
16import Calculator, { add, Point } from "./mathUtils";
17import * as MathUtils from "./mathUtils";
18 
19const point: Point = { x: 1, y: 2 };

15.2 type-only Imports/Exports

Example

index.ts
TypeScriptNusxalash
01// Faqat tur sifatida import qilish (runtime'da hech qanday JS kodi generatsiya qilinmaydi)
02import type { Point } from "./mathUtils";
03 
04// Yoki inline
05import { type Point, add } from "./mathUtils";

💡 Key Idea
import type — agar siz faqat TUR (interfeys, type alias)ni import qilayotgan bo'lsangiz, buni aniq belgilash orqali, build vositalariga (masalan bundler'larga) "bu import faqat compile vaqtida kerak, uni yakuniy JS bundle'ga qo'shmang" deb signal berish mumkin.

15.3 Uchinchi Tomon Kutubxonalari va @types

Simple Explanation

Ko'p mashhur JavaScript kutubxonalari (masalan lodash, express) o'zlari TypeScript bilan yozilmagan. Ular uchun tip deklaratsiyalari alohida @types/ paketlari orqali taqdim etiladi (DefinitelyTyped loyihasi orqali).

Example

terminal.sh
BashNusxalash
01npm install lodash
02npm install -D @types/lodash

index.ts
TypeScriptNusxalash
01import _ from "lodash";
02_.chunk([1, 2, 3, 4], 2); // TypeScript endi 'chunk' funksiyasining turlarini "biladi"

⚠️ Common Mistake
@types/ paketini o'rnatishni unutish — bu holda TypeScript kutubxonani any deb qabul qiladi (agar noImplicitAny yoqilgan bo'lsa, hatto xato ham berishi mumkin), va barcha tip xavfsizligi yo'qoladi.

15.4 O'z Deklaratsiya Faylingizni Yozish (.d.ts)

Example

index.ts
TypeScriptNusxalash
01// types/custom.d.ts
02declare module "some-untyped-library" {
03  export function doSomething(value: string): number;
04}
05 
06// Global obyektni kengaytirish (masalan window)
07declare global {
08  interface Window {
09    myCustomProperty: string;
10  }
11}
12 
13window.myCustomProperty = "salom"; // Endi TypeScript buni tanийdi

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Ikkita faylga (utils.ts, main.ts) bo'lingan kichik loyiha yarating, utils.tsdan bir nechta funksiyani export/import qiling.

🟡 Exercise 2 — Medium

Task: Uchinchi tomon kutubxonasi (masalan date-fns yoki uuid)ni o'rnatib, agar kerak bo'lsa mos @types/ paketini ham qo'shib, uni TypeScript loyihangizda ishlating.

🐛 Debugging Challenge

Stsenariy: Loyihangizga some-old-library kutubxonasini o'rnatdingiz, lekin TypeScript "Could not find a declaration file for module 'some-old-library'" xatosini bermoqda.

Your Task: Bu muammoni hal qilishning ikkita yo'lini toping.

<details> <summary>Solution</summary> 1. `@types/some-old-library` paketini o'rnatishga urinish: `npm install -D @types/some-old-library` (agar mavjud bo'lsa). 2. Agar `@types/` paketi mavjud bo'lmasa, o'zingiz minimal deklaratsiya yozish: loyihangizda `declare module "some-old-library";` (bo'sh deklaratsiya, kutubxonani `any` sifatida "tiplaydi", lekin xatoni yo'qotadi) yoki to'liqroq tip ta'riflarini yozish. </details>

📌 Chapter Summary

import/export — kodni modullarga bo'ladi. import type — faqat tur import qilishni aniq belgilaydi, bundle optimallashtirish uchun foydali. @types/ paketlari — tip ma'lumotiga ega bo'lmagan JavaScript kutubxonalarini "tiplash" imkonini beradi. .d.ts fayllar — faqat tip deklaratsiyalarini o'z ichiga oladi.

🎯 Key Takeaways

• Har bir faylda bitta default export, cheksiz named export
• import type — faqat tur uchun, bundle optimallashtirishga yordam beradi
• @types/paket-nomi — tip ma'lumotiga ega bo'lmagan kutubxonalar uchun
• .d.ts — faqat tip ta'riflari, implementatsiyasiz

⚡ Quick Cheat Sheet

index.ts
TypeScriptNusxalash
01export function f() {}
02export default class C {}
03import C, { f } from "./module";
04import type { MyType } from "./types";
05declare module "untyped-lib" { export function fn(): void; }

---