reveal.js

# Module System import/export และการตั้งค่า tsconfig

Lesson 6 - TypeScript พื้นฐานสำหรับ Angular

---

## คำจำกัดความ

**Module System** คือวิธีแยกโค้ดเป็นหลายไฟล์แล้วนำกลับมาใช้ร่วมกันด้วย `import` และ `export` ส่วน **tsconfig.json** คือไฟล์กำหนดค่าการ compile TypeScript

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#458588", "primaryTextColor": "#fbf1c7", "primaryBorderColor": "#fabd2f", "lineColor": "#a89984", "secondaryColor": "#b8bb26", "tertiaryColor": "#d3869b", "background": "#282828", "mainBkg": "#3c3836", "textColor": "#ebdbb2"}}}%%
flowchart LR
 A["module-a.ts export"] --> C["app.ts import"]
 B["module-b.ts default export"] --> C
 C --> D["tsc TypeScript Compiler"]
 D --> E["dist JavaScript Output"]
</pre>

---

## Named Export

```ts
// math.ts
export const add = (a: number, b: number): number => {
  // คืนค่าผลบวก
  return a + b;
};

export const multiply = (a: number, b: number): number => {
  return a * b;
};
```

```ts
// app.ts
import { add, multiply } from "./math";

console.log(add(2, 3));
console.log(multiply(4, 5));
```

---

## Default Export

```ts
// Course.ts
export default class Course {
  constructor(public title: string) {}
}
```

```ts
// app.ts
import Course from "./Course";

const course = new Course("Web Programming");
console.log(course.title);
```

---

## Re-export

```ts
// index.ts
export { add, multiply } from "./math";
export { default as Course } from "./Course";
```

---

## tsconfig.json

```json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "rootDir": "src",
    "outDir": "dist"
  }
}
```

| Option | ความหมาย |
|---|---|
| `target` | เวอร์ชัน JavaScript ที่ compile ออกมา |
| `module` | รูปแบบ module |
| `strict` | เปิดชุดตรวจ type เข้มงวด |
| `rootDir` | โฟลเดอร์ source |
| `outDir` | โฟลเดอร์ output |

---

## strict mode

**strict mode** ช่วยให้ TypeScript ตรวจเข้มขึ้น เช่น

- `strictNullChecks`
- `noImplicitAny`
- `strictFunctionTypes`

แนะนำเปิด `strict: true` สำหรับ project ใหม่

---

## Path Alias

```json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@/services/*": ["services/*"]
    }
  }
}
```

ตัวอย่าง import:

```ts
import { UserService } from "@/services/UserService";
```

---

## สมการจำนวน Import ที่ลดลงด้วย Barrel File

<math display="block">
 <mrow>
 <mi>saved</mi>
 <mo>=</mo>
 <mi>directImports</mi>
 <mo>-</mo>
 <mi>barrelImports</mi>
 </mrow>
</math>

โดยที่ **saved** คือจำนวน import path ที่ลดลง, **directImports** คือจำนวน import โดยตรงหลายไฟล์, และ **barrelImports** คือจำนวน import ผ่านไฟล์รวม เช่น `index.ts`

---

## แบบทดสอบหลังเรียน

1. Named Export และ Default Export ต่างกันอย่างไร
2. Re-export ใช้ทำอะไร
3. `target` ใน tsconfig กำหนดอะไร
4. `strictNullChecks` ช่วยป้องกันปัญหาใด
5. Path Alias มีประโยชน์อย่างไร

---

## End

<a href="/web-programming/06-typescript/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>