TypeScript / Гуравдагч талын төрлүүд (@types)

Гуравдагч талын төрлүүд (@types)

TypeScript маш сайн боловч бүх JavaScript library TypeScript-ийн төрлийг дотроо агуулдаггүй. Жишээ нь lodash, express, moment гэх мэт алдартай library-нууд анхнаасаа JavaScript-ээр бичигдсэн. Эдгээрийг TypeScript дотор хэрэглэхэд @types package-ууд хэрэг болдог.

Товчоор хэлбэл: @types бол гуравдагч талын library-ийн TypeScript тайлбар (type definition) юм.

@types гэж юу вэ?

JavaScript library-г TypeScript дотор импортлоход хөрвүүлэгч тухайн функц, объектийн төрлийг мэдэхгүй тул алдаа гаргадаг. @types package нь тухайн library-ийн бүх функцийн төрлийг тодорхойлсон .d.ts файлуудын цуглуулга юм.

bash
# Жишээ: lodash library болон түүний @types суулгах
npm install lodash
npm install --save-dev @types/lodash

# express болон түүний @types суулгах
npm install express
npm install --save-dev @types/express

--save-dev флаг хэрэглэдэг шалтгаан нь @types package-ууд зөвхөн хөгжүүлэлтийн үед хэрэгтэй, эцсийн build-д ордоггүй.

@types хэрхэн ажилладаг вэ?

@types/lodash суулгасны дараа TypeScript шууд lodash-ийн бүх функцийг мэдэх болдог:

typescript
import _ from "lodash";

// Алдаагүй — TypeScript _.chunk-ийн төрлийг мэддэг
const chunks = _.chunk([1, 2, 3, 4, 5], 2);
// chunks: number[][]   гэж автоматаар мэдэгдэнэ

// Буруу хэрэглэвэл хөрвүүлэгч шууд хэлнэ
const result = _.chunk("мөр", 2); // Алдаа: string биш array дамжуулна

IDE дотор ч гэсэн _. гэж бичмэгц бүх функцийн жагсаалт, тус бүрийн тайлбар гарч ирдэг — яг TypeScript-ийн өөрийн code шиг.

@types олдохгүй бол яах вэ?

Заримдаа ашиглах гэсэн library-д @types package байхгүй байж болно. Ийм тохиолдолд дараах аргуудыг хэрэглэнэ:

1. Өөрөө тунхаглах (manual declaration)

typescript
// types/lodash-extra.d.ts гэсэн файл үүсгэж:
declare module "тухайн-library-нэр" {
  export function myFunction(param: string): number;
  export const version: string;
}

2. Түр зуур any хэрэглэх

typescript
// tsconfig.json дотор
{
  "compilerOptions": {
    "noImplicitAny": false  // зөвхөн яаралтай тохиолдолд
  }
}

// Эсвэл тухайн файлд:
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const unknownLib = require("no-types-library") as any;

Хоёрдахь аргыг зөвхөн яаралтай тохиолдолд хэрэглэ — any нь TypeScript-ийн давуу талыг устгадаг.

TypeScript-тэй дотроо ирдэг library-нууд

Зарим шинэ library-нуудад @types тусдаа суулгах шаардлагагүй — TypeScript тодорхойлолт нь package дотроо орсон байдаг:

bash
# Эдгээрт @types тусдаа хэрэггүй:
npm install axios      # axios/index.d.ts дотроо байдаг
npm install zod        # zod нь TypeScript-ээр бичигдсэн
npm install date-fns   # дотроо type байдаг

Package суулгахдаа package.json дотор "types" эсвэл "typings" талбар байгаа эсэхийг шалгавал дотроо төрөл байгааг мэдэж болно.

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

API-аас өгөгдөл авахад TypeScript хэрхэн ашиглах, хариуны бүтцийг хэрхэн тодорхойлох тухай сурна.