M

MLOG

ไทย

เรียนรู้วิธีขยายประเภทข้อมูล TypeScript ของไลบรารีภายนอกด้วย module augmentation เพื่อเพิ่มความปลอดภัยของไทป์และประสบการณ์นักพัฒนาที่ดีขึ้น

การเสริมโมดูลใน TypeScript: การขยายประเภทข้อมูลของไลบรารีภายนอก

จุดแข็งของ TypeScript อยู่ที่ระบบประเภทข้อมูล (type system) ที่แข็งแกร่ง ช่วยให้นักพัฒนาสามารถตรวจจับข้อผิดพลาดได้ตั้งแต่เนิ่นๆ ปรับปรุงความสามารถในการบำรุงรักษาโค้ด และยกระดับประสบการณ์การพัฒนาโดยรวม อย่างไรก็ตาม เมื่อทำงานกับไลบรารีของบุคคลที่สาม คุณอาจพบสถานการณ์ที่การกำหนดประเภทข้อมูล (type definitions) ที่ให้มานั้นไม่สมบูรณ์หรือไม่สอดคล้องกับความต้องการเฉพาะของคุณ นี่คือจุดที่การเสริมโมดูล (module augmentation) เข้ามาช่วย โดยช่วยให้คุณสามารถขยายการกำหนดประเภทข้อมูลที่มีอยู่ได้โดยไม่ต้องแก้ไขโค้ดของไลบรารีต้นฉบับ

Module Augmentation คืออะไร?

Module augmentation เป็นฟีเจอร์ที่ทรงพลังของ TypeScript ที่ช่วยให้คุณสามารถเพิ่มหรือแก้ไขประเภทข้อมูลที่ประกาศไว้ในโมดูลจากไฟล์อื่นได้ ลองนึกภาพว่าเป็นการเพิ่มฟีเจอร์พิเศษหรือการปรับแต่งให้กับคลาสหรืออินเทอร์เฟซที่มีอยู่แล้วในลักษณะที่ปลอดภัยต่อประเภทข้อมูล (type-safe) ซึ่งมีประโยชน์อย่างยิ่งเมื่อคุณต้องการขยายการกำหนดประเภทข้อมูลของไลบรารีภายนอก โดยการเพิ่มคุณสมบัติ (properties) เมธอด (methods) หรือแม้กระทั่งการเขียนทับ (override) สิ่งที่มีอยู่เพื่อให้สอดคล้องกับความต้องการของแอปพลิเคชันของคุณได้ดียิ่งขึ้น

ซึ่งแตกต่างจากการรวมการประกาศ (declaration merging) ซึ่งจะเกิดขึ้นโดยอัตโนมัติเมื่อมีการประกาศสองรายการขึ้นไปที่มีชื่อเดียวกันในขอบเขต (scope) เดียวกัน แต่ module augmentation จะกำหนดเป้าหมายไปยังโมดูลที่เฉพาะเจาะจงอย่างชัดเจนโดยใช้ синтаксис declare module

ทำไมต้องใช้ Module Augmentation?

นี่คือเหตุผลที่ module augmentation เป็นเครื่องมือที่มีค่าในคลังแสง TypeScript ของคุณ:

Module Augmentation ทำงานอย่างไร

แนวคิดหลักจะเกี่ยวข้องกับ синтаксиส declare module นี่คือโครงสร้างทั่วไป:


declare module 'module-name' {
  // การประกาศประเภทข้อมูลเพื่อเสริมโมดูล
  interface ExistingInterface {
    newProperty: string;
  }
}

มาดูส่วนสำคัญต่างๆ กัน:

ตัวอย่างการใช้งานจริง

ตัวอย่างที่ 1: การขยายไลบรารีภายนอก (Moment.js)

สมมติว่าคุณกำลังใช้ไลบรารี Moment.js สำหรับการจัดการวันที่และเวลา และคุณต้องการเพิ่มตัวเลือกการจัดรูปแบบที่กำหนดเองสำหรับภาษาท้องถิ่นที่เฉพาะเจาะจง (เช่น สำหรับการแสดงวันที่ในรูปแบบเฉพาะในญี่ปุ่น) การกำหนดประเภทข้อมูลดั้งเดิมของ Moment.js อาจไม่มีรูปแบบที่กำหนดเองนี้ นี่คือวิธีที่คุณสามารถใช้ module augmentation เพื่อเพิ่มมันเข้าไป:

  1. ติดตั้งการกำหนดประเภทข้อมูลสำหรับ Moment.js: 
    
npm install @types/moment
  2. สร้างไฟล์ TypeScript (เช่น moment.d.ts) เพื่อกำหนดการเสริมของคุณ: 
    
// moment.d.ts
import 'moment'; // นำเข้าโมดูลดั้งเดิมเพื่อให้แน่ใจว่าสามารถใช้งานได้

declare module 'moment' {
  interface Moment {
    formatInJapaneseStyle(): string;
  }
}
  3. เขียนตรรกะการจัดรูปแบบที่กำหนดเอง (ในไฟล์แยกต่างหาก เช่น moment-extensions.ts): 
    
// moment-extensions.ts
import * as moment from 'moment';

moment.fn.formatInJapaneseStyle = function(): string {
  // ตรรกะการจัดรูปแบบที่กำหนดเองสำหรับวันที่ในภาษาญี่ปุ่น
  const year = this.year();
  const month = this.month() + 1; // เดือนเริ่มต้นที่ 0
  const day = this.date();
  return `${year}年${month}月${day}日`;
};
  4. ใช้อ็อบเจกต์ Moment.js ที่เสริมแล้ว: 
    
// app.ts
import * as moment from 'moment';
import './moment-extensions'; // นำเข้าส่วนการใช้งาน

const now = moment();
const japaneseFormattedDate = now.formatInJapaneseStyle();
console.log(japaneseFormattedDate); // ผลลัพธ์: เช่น 2024年1月26日

คำอธิบาย:

ตัวอย่างที่ 2: การเพิ่มคุณสมบัติให้กับอ็อบเจกต์ Request (Express.js)

สมมติว่าคุณกำลังใช้ Express.js และต้องการเพิ่มคุณสมบัติที่กำหนดเองลงในอ็อบเจกต์ Request เช่น userId ที่ถูกกำหนดค่าโดย middleware นี่คือวิธีที่คุณสามารถทำได้ด้วย module augmentation:

  1. ติดตั้งการกำหนดประเภทข้อมูลสำหรับ Express.js: 
    
npm install @types/express
  2. สร้างไฟล์ TypeScript (เช่น express.d.ts) เพื่อกำหนดการเสริมของคุณ: 
    
// express.d.ts
import 'express'; // นำเข้าโมดูลดั้งเดิม

declare module 'express' {
  interface Request {
    userId?: string;
  }
}
  3. ใช้อ็อบเจกต์ Request ที่เสริมแล้วใน middleware ของคุณ: 
    
// middleware.ts
import { Request, Response, NextFunction } from 'express';

export function authenticateUser(req: Request, res: Response, next: NextFunction) {
  // ตรรกะการยืนยันตัวตน (เช่น การตรวจสอบ JWT)
  const userId = 'user123'; // ตัวอย่าง: ดึง ID ผู้ใช้จาก token
  req.userId = userId; // กำหนด ID ผู้ใช้ให้กับอ็อบเจกต์ Request
  next();
}
  4. เข้าถึงคุณสมบัติ userId ใน route handlers ของคุณ: 
    
// routes.ts
import { Request, Response } from 'express';

export function getUserProfile(req: Request, res: Response) {
  const userId = req.userId;
  if (!userId) {
    return res.status(401).send('Unauthorized');
  }

  // ดึงข้อมูลโปรไฟล์ผู้ใช้จากฐานข้อมูลตาม userId
  const userProfile = { id: userId, name: 'John Doe' }; // ตัวอย่าง
  res.json(userProfile);
}

คำอธิบาย:

ตัวอย่างที่ 3: การเพิ่มแอตทริบิวต์ที่กำหนดเองให้กับองค์ประกอบ HTML

เมื่อทำงานกับไลบรารีอย่าง React หรือ Vue.js คุณอาจต้องการเพิ่มแอตทริบิวต์ที่กำหนดเองลงในองค์ประกอบ HTML การเสริมโมดูลสามารถช่วยคุณกำหนดประเภทข้อมูลสำหรับแอตทริบิวต์ที่กำหนดเองเหล่านี้ได้ ทำให้มั่นใจได้ถึงความปลอดภัยของประเภทข้อมูลในเทมเพลตหรือโค้ด JSX ของคุณ

สมมติว่าคุณกำลังใช้ React และต้องการเพิ่มแอตทริบิวต์ที่กำหนดเองชื่อ data-custom-id ลงในองค์ประกอบ HTML

  1. สร้างไฟล์ TypeScript (เช่น react.d.ts) เพื่อกำหนดการเสริมของคุณ: 
    
// react.d.ts
import 'react'; // นำเข้าโมดูลดั้งเดิม

declare module 'react' {
  interface HTMLAttributes extends AriaAttributes, DOMAttributes {
    "data-custom-id"?: string;
  }
}
  2. ใช้แอตทริบิวต์ที่กำหนดเองในคอมโพเนนต์ React ของคุณ: 
    
// MyComponent.tsx
import React from 'react';

function MyComponent() {
  return (
    
     
      This is my component.
    
    
  );
}

export default MyComponent;

คำอธิบาย:

แนวทางปฏิบัติที่ดีที่สุดสำหรับ Module Augmentation

ข้อผิดพลาดที่พบบ่อยและวิธีหลีกเลี่ยง

ประโยชน์ของการใช้ Module Augmentation

การใช้ module augmentation ใน TypeScript ให้ประโยชน์ที่สำคัญหลายประการ:

สรุป

Module augmentation ของ TypeScript เป็นเทคนิคที่ทรงพลังสำหรับการขยายและปรับแต่งการกำหนดประเภทข้อมูลจากไลบรารีภายนอก โดยการใช้ module augmentation คุณสามารถมั่นใจได้ว่าโค้ดของคุณยังคงปลอดภัยต่อประเภทข้อมูล ปรับปรุงประสบการณ์ของนักพัฒนา และหลีกเลี่ยงการทำซ้ำของโค้ด โดยการปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดและหลีกเลี่ยงข้อผิดพลาดที่พบบ่อยที่กล่าวถึงในคู่มือนี้ คุณจะสามารถใช้ประโยชน์จาก module augmentation ได้อย่างมีประสิทธิภาพเพื่อสร้างแอปพลิเคชัน TypeScript ที่แข็งแกร่งและบำรุงรักษาง่ายขึ้น จงใช้ฟีเจอร์นี้และปลดล็อกศักยภาพสูงสุดของระบบประเภทข้อมูลของ TypeScript!