TypeScript / Модулиуд ба namespace

Модулиуд ба namespace

Жижиг төсөлд бүх кодыг нэг файлд бичиж болно. Гэвч төсөл томорч эхлэхэд кодыг логик хэсгүүдэд хуваах хэрэгтэй болдог. TypeScript-д үүний тулд модуль систем ба namespace хэрэглэдэг.

Модуль гэж юу вэ?

TypeScript-д import эсвэл export агуулсан дурын файл нь модуль болдог. Тэдгүйгээр бол глобал скрипт болдог — тэдгээрийн хувьсагчид бүх файлд харагддаг тул нэрийн мөргөлдөөн үүсэх аюултай.

typescript
// math.ts — энэ файл модуль
export function нэмэх(а: number, б: number): number {
  return а + б;
}

export function хасах(а: number, б: number): number {
  return а - б;
}

export const ПИ = 3.14159;

// Анхны утгаар экспортлох
export default function үржих(а: number, б: number): number {
  return а * б;
}
typescript
// main.ts — импортлох
import үржих, { нэмэх, хасах, ПИ } from "./math";

console.log(нэмэх(5, 3)); // 8
console.log(хасах(10, 4)); // 6
console.log(ПИ); // 3.14159
console.log(үржих(3, 4)); // 12

export-ийн хэлбэрүүд

typescript
// types.ts
// 1. Зарлахын хамт экспортлох
export interface Хэрэглэгч {
  id: number;
  нэр: string;
  имэйл: string;
}

export type Үүрэг = "admin" | "хэрэглэгч" | "зочин";

// 2. Тусад нь экспортлох
interface Нийтлэл {
  id: number;
  гарчиг: string;
  агуулга: string;
}

export { Нийтлэл };

// 3. Нэр өөрчлөн экспортлох
interface ДотоодТохиргоо {
  хост: string;
  порт: number;
}

export { ДотоодТохиргоо as Тохиргоо };
typescript
// app.ts — импортлох хэлбэрүүд
import { Хэрэглэгч, Үүрэг } from "./types";
import { Нийтлэл } from "./types";
import { Тохиргоо } from "./types";

// Нэр өөрчлөн импортлох
import { Хэрэглэгч as ХэрэглэгчТөрөл } from "./types";

// Бүгдийг нэг объект болгон импортлох
import * as Төрлүүд from "./types";
const хэрэглэгч: Төрлүүд.Хэрэглэгч = { id: 1, нэр: "Болд", имэйл: "b@b.com" };

Индекс файл ашиглан re-export

Том модулийг нэг цонхоор экспортлохдоо index.ts файл ашиглана:

typescript
// components/Button.tsx
export const Button = () => {
  /* ... */
};

// components/Input.tsx
export const Input = () => {
  /* ... */
};

// components/Modal.tsx
export const Modal = () => {
  /* ... */
};

// components/index.ts — бүгдийг нэгтгэн экспортлох
export { Button } from "./Button";
export { Input } from "./Input";
export { Modal } from "./Modal";
typescript
// app.ts — нэг замаас бүгдийг авна
import { Button, Input, Modal } from "./components";
// "./components/Button", "./components/Input" гэж тус тусад нь бичихгүй

namespace — нэрийн орон зай

namespace нь холбоотой зүйлсийг нэг нэрийн доор бүлэглэдэг. Одоогийн ихэнх кодонд модуль дээр суурилсан import/export нь хангалттай боловч namespace нь нэрийн мөргөлдөөнөөс хамгаалах нэмэлт давхарга болдог:

typescript
// validation.ts
namespace Шалгалт {
  export interface Дүрэм {
    шаардлагатай?: boolean;
    хамгийн_бага?: number;
    хамгийн_их?: number;
    загвар?: RegExp;
  }

  export function мөр_шалгах(утга: string, дүрэм: Дүрэм): boolean {
    if (дүрэм.шаардлагатай && утга.length === 0) return false;
    if (дүрэм.хамгийн_бага && утга.length < дүрэм.хамгийн_бага) return false;
    if (дүрэм.хамгийн_их && утга.length > дүрэм.хамгийн_их) return false;
    if (дүрэм.загвар && !дүрэм.загвар.test(утга)) return false;
    return true;
  }

  export function тоо_шалгах(утга: number, дүрэм: Дүрэм): boolean {
    if (дүрэм.хамгийн_бага !== undefined && утга < дүрэм.хамгийн_бага)
      return false;
    if (дүрэм.хамгийн_их !== undefined && утга > дүрэм.хамгийн_их) return false;
    return true;
  }
}

// Хэрэглэх
const зөв = Шалгалт.мөр_шалгах("Болд", { шаардлагатай: true, хамгийн_бага: 2 });
const утас_зөв = Шалгалт.мөр_шалгах("99119911", { загвар: /^\d{8}$/ });

tsconfig.json — модулийн тохиргоо

TypeScript модулийн систем tsconfig.json-д тохируулагддаг:

json
{
  "compilerOptions": {
    "module": "ESNext", // ES модуль систем ашиглах
    "moduleResolution": "bundler", // Next.js, Vite-тэй ажиллах
    "baseUrl": ".", // Харьцангуй замын суурь
    "paths": {
      "@/*": ["./*"], // @ гэж бичвэл төслийн үндэснээс хайна
      "@components/*": ["components/*"],
      "@lib/*": ["lib/*"]
    }
  }
}
typescript
// paths тохируулсны дараа
import { Button } from "@components/Button"; // "./../../components/Button" биш
import { апи_дуудах } from "@lib/api";

Модуль систем сайн ойлгосноор том төслийн кодыг цэвэр, эмх цэгцтэй зохион байгуулах боломжтой болно.

Дараагийн хичээлд:

Declaration файл (.d.ts) — TypeScript-д байхгүй JavaScript сангуудад яаж төрлийн мэдэгдэл нэмэх, .d.ts файл хэрхэн бичихийг сурна.

← Өмнөх хичээлinfer түлхүүр үгДараах хичээл →Declaration файл (.d.ts)