TypeScript Refactoring (การปรับปรุงโค้ด TypeScript)

เทคนิคการปรับปรุงโค้ด TypeScript ให้ดีขึ้นโดยรักษาความปลอดภัยของประเภทข้อมูล

1. Basic Refactoring (พื้นฐาน)

Renaming (การเปลี่ยนชื่อ)

// ก่อน
function calc(a: number, b: number) { ... }

// หลัง
function calculateSum(x: number, y: number) { ... }

Extracting Functions (การแยกฟังก์ชัน)

// ก่อน
function processOrder(order: Order) {
  // ...โค้ดยาว...
  const tax = order.total * 0.07;
  // ...โค้ดยาว...
}

// หลัง
function calculateTax(amount: number): number {
  return amount * 0.07;
}

function processOrder(order: Order) {
  // ...
  const tax = calculateTax(order.total);
  // ...
}

2. Type Improvements (การปรับปรุงประเภท)

Replacing any (แทนที่ any)

// ก่อน
function parseData(data: any) { ... }

// หลัง
function parseData<T>(data: T): ParsedData<T> { ... }

Using Union Types (ใช้ Union Types)

// ก่อน
let status: string; // 'active', 'inactive', 'pending'

// หลัง
type Status = "active" | "inactive" | "pending";
let status: Status;

3. Advanced Techniques (เทคนิคขั้นสูง)

Introducing Generics (ใช้ Generics)

// ก่อน
function getFirst(items: any[]): any { ... }

// หลัง
function getFirst<T>(items: T[]): T | undefined { ... }

Using Utility Types (ใช้ Utility Types)

// ก่อน
interface User {
  id: string;
  name: string;
  email: string;
}

interface UserUpdate {
  name?: string;
  email?: string;
}

// หลัง
type UserUpdate = Partial<Pick<User, "name" | "email">>;

4. Code Organization (การจัดระเบียบโค้ด)

Modularizing (แบ่งเป็นโมดูล)

// ก่อน: ไฟล์ใหญ่ไฟล์เดียว
// user.ts
interface User { ... }
function createUser() { ... }
function updateUser() { ... }
// ...อีกหลายฟังก์ชัน...

// หลัง: แยกเป็นหลายไฟล์
// user/
//   types.ts
//   create.ts
//   update.ts
//   queries.ts

5. Common Patterns (รูปแบบที่พบบ่อย)

Null Checks (ตรวจสอบ null)

// ก่อน
function getName(user: User | null) {
  return user ? user.name : "Guest";
}

// หลัง
function getName(user: User | null) {
  return user?.name ?? "Guest";
}

Async Refactoring (โค้ดแบบ Async)

// ก่อน
function fetchData() {
  return fetch(url).then(r => r.json());
}

// หลัง
async function fetchData(): Promise<Data> {
  const response = await fetch(url);
  return response.json();
}