สัปดาห์ที่ 6: TypeScript พื้นฐานสำหรับ Angular

เป้าหมายของสัปดาห์

สัปดาห์นี้เชื่อมความรู้ JavaScript ไปสู่ TypeScript และ Angular โดยเรียนเรื่อง asynchronous programming, Fetch API, type system, class, decorator และ module system

Timeline ประวัติ JavaScript/TypeScript

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#458588", "primaryTextColor": "#fbf1c7", "primaryBorderColor": "#fabd2f", "lineColor": "#a89984", "secondaryColor": "#b8bb26", "tertiaryColor": "#d3869b", "background": "#282828", "mainBkg": "#3c3836", "textColor": "#ebdbb2"}}}%%
flowchart LR
  subgraph E1["ยุค Callback / Callback Era"]
    A["1995
JavaScript
Browser scripting"]
    B["2005
AJAX
Async web interaction"]
  end
  subgraph E2["ยุค Promise / Promise Era"]
    C["2015
ES6 Promise
Standard async abstraction"]
    D["2017
async/await
Readable async code"]
  end
  subgraph E3["ยุค Type Safety / TypeScript Era"]
    E["2012
TypeScript
Static typing for JS"]
    F["ปัจจุบัน
Angular + TS
Enterprise web apps"]
  end
  A --> B --> C --> D --> E --> F

ผลลัพธ์การเรียนรู้

• อธิบาย Callback, Promise, และ async/await ได้
• เรียก REST API ด้วย Fetch API และจัดการ HTTP error ได้
• ใช้ TypeScript types, interface, type alias, และ generics ได้
• สร้าง class, inheritance และ access modifier ได้
• เข้าใจ Decorator ในบริบท Angular
• จัดการ import/export และตั้งค่า tsconfig.json ได้

หัวข้อย่อย

สมการเวลารวมของงาน Asynchronous

โดยที่ Tseq คือเวลารวมเมื่อทำงานแบบลำดับ, n คือจำนวนงาน, และ tᵢ คือเวลาของงานลำดับที่ i

กิจกรรมประจำสัปดาห์

• เขียน function เรียก API ด้วย async/await
• สร้าง interface สำหรับข้อมูลผู้ใช้
• สร้าง class และ subclass ด้วย TypeScript
• ทดลอง export/import module อย่างน้อย 2 ไฟล์

กลับรายวิชา