TypeScript / Declaration файл (.d.ts)

Declaration файл (.d.ts)

npm дээр хэдэн сая JavaScript сан байдаг. Тэдгээрийн зарим нь TypeScript-д бичигдсэн, зарим нь огт TypeScript мэдэхгүй JavaScript-ийн эрин үеийн. TypeScript тэдгээрийг ашиглахдаа яаж төрлийг мэдэх вэ? Хариулт нь declaration файл буюу .d.ts өргөтгөлтэй файл.

Declaration файл гэж юу вэ?

.d.ts файл нь зөвхөн төрлийн мэдэгдэл агуулдаг — ямар нэг хэрэгжилтгүй. JavaScript сангийн "тайлбар хуудас" гэж ойлгож болно:

typescript
// math-utils.js — жирийн JavaScript сан
function нэмэх(а, б) {
  return а + б;
}
function хасах(а, б) {
  return а - б;
}
module.exports = { нэмэх, хасах };
typescript
// math-utils.d.ts — зохих declaration файл
declare function нэмэх(а: number, б: number): number;
declare function хасах(а: number, б: number): number;

export { нэмэх, хасах };

Энэ хоёр файл хажуу хажуудаа байхад TypeScript JavaScript санг бүрэн төрөлжүүлж ойлгодог.

declare түлхүүр үг

.d.ts файлд declare гэсэн түлхүүр үгийг хэрэглэдэг — "энэ зүйл өөр газар тодорхойлогдсон, би зүгээр мэдэгдэж байна" гэсэн утгатай:

typescript
// globals.d.ts — глобал хувьсагч мэдэгдэх
declare const __DEV__: boolean;
declare const __VERSION__: string;

// Глобал функц
declare function лог(мессеж: string): void;

// Глобал объект нэмэх
declare interface Window {
  аналитик: {
    хянах: (үйл_явдал: string) => void;
  };
}

// Хэрэглэх — TypeScript мэднэ
if (__DEV__) {
  лог(`Хувилбар: ${__VERSION__}`);
}
window.аналитик.хянах("хуудас_нээсэн");

Модулийн declaration

Дотоод .js файлд .d.ts нэмэх:

typescript
// lib/formatter.js
function мөнгө_формат(дүн, валют) {
  return `${дүн.toLocaleString()} ${валют}`;
}

function огноо_формат(огноо) {
  return огноо.toLocaleDateString("mn-MN");
}

module.exports = { мөнгө_формат, огноо_формат };
typescript
// lib/formatter.d.ts
export declare function мөнгө_формат(дүн: number, валют: string): string;
export declare function огноо_формат(огноо: Date): string;
typescript
// app.ts — TypeScript бүрэн дэмжлэгтэйгээр ашиглана
import { мөнгө_формат, огноо_формат } from "./lib/formatter";

console.log(мөнгө_формат(1_500_000, "₮")); // "1,500,000 ₮"
console.log(огноо_формат(new Date()));

@types — нийгэмлэгийн declaration

Алдартай JavaScript сангуудын declaration файлуудыг @types scope-д нийтэлдэг. Жишээ нь lodash сан TypeScript мэддэггүй боловч @types/lodash нь бэлэн declaration-г агуулдаг:

bash
npm install lodash          # JavaScript сан
npm install -D @types/lodash # Зохих declaration файл
typescript
// Одоо TypeScript бүрэн дэмждэг
import _ from "lodash";

const тоонууд = [3, 1, 4, 1, 5, 9, 2, 6];
const эрэмбэлэгдсэн = _.sortBy(тоонууд); // number[] гэдгийг TypeScript мэднэ
const нийлбэр = _.sum(тоонууд); // number
const бүлэглэсэн = _.groupBy(["нэг", "хоёр", "нэг"], (x) => x);
// Record<string, string[]>

Өөрийн санд declaration нэмэх

Сан нийтлэхдээ .d.ts файл хамт оруулна:

typescript
// src/index.ts — TypeScript-д бичигдсэн
export interface СонголтТохиргоо {
  анимаци?: boolean;
  хугацаа?: number;
  дуусгах?: () => void;
}

export function харуулах(
  элемент: HTMLElement,
  сонголт?: СонголтТохиргоо,
): void {
  // хэрэгжилт...
}
json
// package.json
{
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc"
  }
}
json
// tsconfig.json
{
  "compilerOptions": {
    "declaration": true, // .d.ts файл автоматаар үүсгэх
    "outDir": "dist"
  }
}

tsc ажиллуулахад dist/index.js ба dist/index.d.ts хоёулаа үүснэ. Хэрэглэгчид npm-с суулгаад TypeScript дэмжлэгтэйгээр шууд ашиглана.

Өнөөдөр npm дээрх дийлэнх алдартай сан @types package-тэй эсвэл дотооддоо TypeScript-д бичигдсэн байдаг. .d.ts файлыг ойлгосноор аль ч сантай аюулгүй ажиллах чадвар эзэмшинэ.

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

Гуравдагч талын төрлүүд (@types) — DefinitelyTyped хэрхэн ажилладаг, @types package суулгах, тохируулах аргыг сурна.

← Өмнөх хичээлМодулиуд ба namespaceДараах хичээл →Гуравдагч талын төрлүүд (@types)