interface กับ type ต่างกันตรงไหน และ any ที่ฆ่า type safety

# npx tsc --version
Version 7.0.2

# node --version
v24.14.0

1 · interface — บอกว่า object ต้องมีหน้าตายังไง

ในบทที่แล้ว เวลาเราติดป้าย type ให้ตัวแปร เราเขียนว่า const name: string = "Ann" — ป้ายคือคำเดียวสั้น ๆ
แต่พอค่าที่จะติดป้ายเป็น object ที่มีหลายช่อง เราต้องบอก compiler ให้ครบว่ามีช่องอะไรบ้าง ช่องละ type อะไร

interface คือการตั้งชื่อให้รูปร่างของ object หนึ่งแบบ แล้วเอาชื่อนั้นไปใช้ซ้ำได้ทั้งโปรเจกต์ · นี่คือโค้ดจากสไลด์หน้า 14 ตรง ๆ:

interface IStudent {
  firstName: string;
  lastName: string;
  grade: "GRADE 1" | "GRADE 2" | "GRADE 3" | "GRADE 4" | "GRADE 5" | "GRADE 6";
}

const sampleStudent: IStudent = {
  firstName: "John",
  lastName: "Doe",
  grade: "GRADE 1",
};

# npx tsc --noEmit --strict a1-basic.ts
# (ไม่มี output เลย = ผ่าน) EXIT=0

สังเกตบรรทัด grade — มันไม่ใช่ string เฉย ๆ แต่เป็นรายชื่อค่าที่อนุญาต คั่นด้วย |
แปลว่า grade: "GRADE 7" จะไม่ผ่าน ทั้งที่มันก็เป็น string เหมือนกัน — เดี๋ยวเราจะได้เห็น error ตัวจริงของกรณีนี้ในหัวข้อ 7 (ภารกิจ)

2 · type — ตั้งชื่อเล่นให้ "type อะไรก็ได้" ไม่ใช่แค่ object

type ทำงานคนละมุมกับ interface นิดหน่อย
interface ถูกออกแบบมาเพื่อบรรยายรูปร่างของ object ส่วน type คือการตั้งชื่อเล่นให้ type อะไรก็ได้ — จะเป็น object, จะเป็นรายการค่าที่เลือกได้, จะเป็น array ที่ล็อกจำนวนช่อง ก็ได้หมด

โค้ดจากสไลด์หน้า 15 ตรง ๆ:

type PairTuple = [number, boolean, string];
type StudentIdType = number | string;
type ClassroomType = {
  name: string;
  capability: number;
};

บรรทัดที่ 3–6 (ClassroomType) คือสิ่งที่ interface ทำได้เหมือนกันเป๊ะ
แต่สองบรรทัดแรกทำไม่ได้ด้วย interface — ลองแล้วได้แบบนี้:

type StudentId = number | string;

interface IStudentId = number | string;

error TS1005: '{' expected.

error TS1005 อ่านแล้วงงมากสำหรับมือใหม่ — มันไม่ได้บอกว่า "interface ทำ union ไม่ได้" มันบอกแค่ว่า "ตรงนี้ควรจะเป็น {"
เพราะในสายตาของ parser คำว่า interface แปลว่า "ต่อไปนี้จะมีปีกกาเปิดแล้วนะ" การเจอ = จึงเป็นเรื่องผิดไวยากรณ์ตั้งแต่ยังไม่ทันคิดเรื่อง type

ลองอีกทางที่ดูมีเหตุผลกว่า — ใช้ extends ต่อจาก union ที่ตั้งชื่อไว้แล้ว:

type StudentId = number | string;

interface IStudentId extends StudentId {}

e3-iface-extends-union.ts(3,30): error TS2312: An interface can only extend an
object type or intersection of object types with statically known members.

อันนี้ตรงประเด็นกว่ามาก — "interface ต่อยอดได้จาก object type เท่านั้น"
เหตุผลก็คือชื่อของมันเลย: interface แปลว่า "หน้าตาที่ยื่นออกมาให้คนอื่นใช้" ซึ่งเป็นคำที่ใช้กับ object · ส่วน "เลข หรือ ข้อความ" ไม่มีหน้าตาให้บรรยาย มันคือทางเลือกสองทาง

3 · ต่างกันจริง ๆ ตรงไหน — interface เปิดเพิ่ม property ทีหลังได้

สไลด์หน้า 16 พูดประโยคเดียวจบเลย: "the key distinction is that a type cannot be re-opened to add new properties"
แปลตรง ๆ คือ ประกาศ interface ชื่อเดิมซ้ำได้ TypeScript จะรวมให้เอง แต่ type ชื่อเดิมซ้ำไม่ได้

ผมรันทั้งสองฝั่งด้วยไฟล์ที่หน้าตาเหมือนกันเป๊ะ ต่างแค่คำแรกของบรรทัด:

interface Window2 {
  title: string;
}
interface Window2 {
  ts: number;
}

const w: Window2 = { title: "หน้าแรก", ts: 1 };

# ไม่มี output
EXIT=0

type Window3 = {
  title: string;
};
type Window3 = {
  ts: number;
};

(1,6): error TS2300: Duplicate
identifier 'Window3'.
(4,6): error TS2300: Duplicate
identifier 'Window3'.
EXIT=1

สังเกตว่าฝั่ง type ฟ้อง สองบรรทัด ไม่ใช่บรรทัดเดียว — compiler ไม่รู้ว่าอันไหน "ตัวจริง" มันเลยชี้ทั้งคู่แล้วบอกว่าชนกัน

interface Config {
  title: string;
}
interface Config {
  ts: number;
}

const c: Config = { title: "หน้าแรก" };   // ใส่แค่ title

a4-merge-miss.ts(8,7): error TS2741: Property 'ts' is missing in type
'{ title: string; }' but required in type 'Config'.
EXIT=1

แล้วเรื่อง "ต่อยอด" ล่ะ? interface ใช้ extends ส่วน type ใช้ & — สไลด์หน้า 16 วางสองอันนี้ไว้คู่กัน ผมลองรันแล้วสลับใช้แทนกันดู:

interface ITwentyFourGame extends IGameSession {
  streak: number;
  hasTimer: boolean;
}

type TwentyFourGame = {
  streak: number;
  hasTimer: boolean;
} & GameSession;

const a: ITwentyFourGame = { round: "R1", score: 0, streak: 2, hasTimer: true };
const b: TwentyFourGame  = { round: "R1", score: 0, streak: 2, hasTimer: true };

const c: ITwentyFourGame = b;   // เอาของฝั่ง type ไปใส่ตัวแปรฝั่ง interface
const d: TwentyFourGame  = a;   // และสลับกลับ

# npx tsc --noEmit --strict f1-extends.ts
EXIT=0   # ผ่านหมด ไม่มี error สักบรรทัด

สองบรรทัดล่างคือหัวใจ — เอาค่าที่ประกาศด้วย type ไปใส่ตัวแปรที่ประกาศด้วย interface ได้ และสลับกลับก็ได้
เพราะ TypeScript ตัดสินว่า "ใส่ได้ไหม" จากรูปร่างของค่า ไม่ได้ดูว่าใครประกาศด้วยคำสั่งอะไร

4 · สรุปตารางเลือก — ใช้อันไหนดี

5 · as (type assertion) — ปุ่มปิดปาก compiler ปุ่มที่หนึ่ง

บางครั้งคุณรู้เรื่องของค่านั้นมากกว่า compiler จริง ๆ เช่นคุณเพิ่งอ่านค่ามาจากที่ที่ TypeScript มองไม่เห็น
สไลด์หน้า 17 เขียนไว้ว่า "Have some information about the type of a value but can't know about"
คำสั่ง as คือวิธีบอก compiler ว่า "เชื่อฉันเถอะ ค่านี้เป็น type นี้"

แล้วสไลด์ก็ใส่กล่อง ⚠️ Warning: Asserting a sub-type that doesn't fit ไว้ข้าง ๆ พร้อมโค้ดตัวอย่าง — แต่ไม่ได้บอกว่ามันพังยังไง
ผมเลยเอาโค้ดชุดนั้นมารันจริง ทั้ง tsc และ node:

type GameSession = { round: string; score: number };
type TwentyFourGame = { streak: number; hasTimer: boolean } & GameSession;

const initGame = {
  round: "ROUND 1",
  score: 0,
} as TwentyFourGame;      // ← ขาด streak กับ hasTimer

console.log("compile ผ่านแล้ว initGame =", initGame);
console.log("streak =", initGame.streak);
console.log("streak + 1 =", initGame.streak + 1);
console.log("streak.toFixed(1) =", initGame.streak.toFixed(1));

# npx tsc --noEmit --strict a6-assert.ts
EXIT_TSC=0        # ← ผ่านฉลุย ไม่มีคำเตือนแม้แต่ตัวเดียว

# node a6-assert.js
compile ผ่านแล้ว initGame = { round: 'ROUND 1', score: 0 }
streak = undefined
streak + 1 = NaN
TypeError: Cannot read properties of undefined (reading 'toFixed')

แล้วถ้าไม่ใส่ as ล่ะ — เขียนตรง ๆ ว่าตัวแปรนี้เป็น TwentyFourGame:

const initGame = {
  round: "ROUND 1",
  score: 0,
} as TwentyFourGame;

// EXIT=0 · พังตอน runtime

const initGame: TwentyFourGame = {
  round: "ROUND 1",
  score: 0,
};

// EXIT=1 · TS2322

a7-noassert.ts(11,7): error TS2322: Type '{ round: string; score: number; }' is not
assignable to type 'TwentyFourGame'.
  Type '{ round: string; score: number; }' is missing the following properties
  from type '{ streak: number; hasTimer: boolean; }': streak, hasTimer

โค้ดสองฝั่งนี้ต่างกันแค่ตำแหน่งที่เขียนชื่อ type — ฝั่งซ้ายเขียนไว้ท้ายค่าด้วยคำว่า as ฝั่งขวาเขียนไว้หลังชื่อตัวแปรด้วย :
แต่ผลต่างกันคนละโลก: ฝั่งขวา compiler บอกชื่อช่องที่ขาดให้เลย (streak, hasTimer) ตั้งแต่ก่อนโปรแกรมได้เริ่มทำงาน

6 · any ฆ่า type safety — พิสูจน์ด้วยตัวเลข

สไลด์หน้า 18 มีข้อความอยู่กลางหน้าประโยคเดียว:
"any" Kills type safety entirely — should be use "unknown" for uncertain types
คำว่า entirely (ทั้งหมด) ฟังดูแรงมาก ผมเลยเอาไปวัดจริง ๆ ด้วยวิธีง่ายที่สุด: เขียนไฟล์สองไฟล์ที่เหมือนกันทุกตัวอักษร ยกเว้นคำเดียว แล้วนับ error ที่ได้

const data: any =
  JSON.parse('{"name":"Ann"}');

console.log(data.name);
console.log(data.profile.email);
console.log(data.toUpperCase());
data();
const n: number = data;
const s: string = data;

const data: unknown =
  JSON.parse('{"name":"Ann"}');

console.log(data.name);
console.log(data.profile.email);
console.log(data.toUpperCase());
data();
const n: number = data;
const s: string = data;

ผลรัน npx tsc --noEmit --strict ทีละไฟล์:

# ไฟล์ที่ 1 (any)
EXIT_ANY=0            # ← ศูนย์ error

# ไฟล์ที่ 2 (unknown)
b2-unknown.ts(3,13): error TS18046: 'data' is of type 'unknown'.
b2-unknown.ts(4,13): error TS18046: 'data' is of type 'unknown'.
b2-unknown.ts(5,13): error TS18046: 'data' is of type 'unknown'.
b2-unknown.ts(6,1):  error TS18046: 'data' is of type 'unknown'.
b2-unknown.ts(7,7):  error TS2322: Type 'unknown' is not assignable to type 'number'.
b2-unknown.ts(8,7):  error TS2322: Type 'unknown' is not assignable to type 'string'.
EXIT_UNKNOWN=1        # ← หก error

หกต่อศูนย์ · คำว่า entirely ในสไลด์ไม่ได้พูดเกินจริงเลย
สังเกตว่ามันไม่ใช่ "any ตรวจน้อยลง" — มันไม่ตรวจอะไรเลยสักบรรทัด แม้แต่บรรทัดที่เรียก object เหมือนเป็นฟังก์ชัน ซึ่งผิดชัด ๆ ด้วยตาเปล่า

แล้วไฟล์ที่ 1 ที่ compile ผ่าน 100% นั้น เอาไปรันจริงได้ไหม — ลองแค่สองบรรทัดแรกพอ:

# node b3-any-run.js
บรรทัด 1  data.name          = Ann
TypeError: Cannot read properties of undefined (reading 'email')

function loadConfig(): any {
  return { retry: "3" };      // ← เป็น string นะ ไม่ใช่เลข
}

const cfg = loadConfig();
const retry: number = cfg.retry;   // เขียนไว้ชัดว่าเป็น number

console.log("retry =", retry);
console.log("retry + 1 =", retry + 1);
console.log("retry.toFixed(0) =", retry.toFixed(0));

# npx tsc --noEmit --strict e1-spread.ts
EXIT_TSC=0

# node e1-spread.js
retry = 3
retry + 1 = 31
TypeError: retry.toFixed is not a function

แล้วใช้ unknown ยังไงให้ทำงานได้จริง

ถ้า unknown ห้ามแตะทุกอย่าง มันก็ดูไร้ประโยชน์ — แต่ประเด็นคือ มันบังคับให้คุณ "พิสูจน์ก่อนใช้" ไม่ใช่ห้ามใช้

const data: unknown = JSON.parse('{"name":"Ann"}');

if (typeof data === "object" && data !== null && "name" in data) {
  console.log("ผ่านด่านแล้ว name =", data.name);
} else {
  console.log("ข้อมูลไม่ตรงรูปที่คาดไว้ ไม่แตะมัน");
}

const bad: unknown = JSON.parse('123');   // คราวนี้ได้เลข ไม่ใช่ object

if (typeof bad === "object" && bad !== null && "name" in bad) {
  console.log("ผ่านด่านแล้ว name =", bad.name);
} else {
  console.log("ข้อมูลไม่ตรงรูปที่คาดไว้ ไม่แตะมัน");
}

# npx tsc --noEmit --strict b4-unknown-ok.ts
EXIT_TSC=0

# node b4-unknown-ok.js
ผ่านด่านแล้ว name = Ann
ข้อมูลไม่ตรงรูปที่คาดไว้ ไม่แตะมัน
EXIT_NODE=0

7 · ภารกิจ — สองเวิร์กช็อปจากสไลด์

type AddressLabel = "home" | "work" | "other";

interface ShippingAddress {
  label: AddressLabel;
  recipientName: string;
  street: string;
  city: string;
  province: string;
  postalCode: string;
  country: string;
  isDefault: boolean;
}

interface UserProfile {
  userId: string;
  fullName: string;
  email: string;
  phone?: string;
  addresses: ShippingAddress[];
}

# npx tsc --noEmit --strict c1-workshop.ts
EXIT=0

# node c1-workshop.js  (console.log สองบรรทัด)
undefined
home

// ข้อ 1
interface Product {
  id: string;
  discount?: number;
}
function show(p: Product) {
  return p.discount.toFixed(2);
}

// ข้อ 2
type Status = "draft" | "published";
type Status = "draft" | "published" | "archived";

// ข้อ 3
interface Cart {
  items: string[];
}
interface Cart {
  coupon: string;
}
const c: Cart = { items: [], coupon: "NEW10" };

// ข้อ 4
type Role = "admin" | "member";
const r: Role = "owner";

# npx tsc --noEmit --strict d1-spot.ts
d1-spot.ts(7,10):  error TS18048: 'p.discount' is possibly 'undefined'.
d1-spot.ts(11,6):  error TS2300: Duplicate identifier 'Status'.
d1-spot.ts(12,6):  error TS2300: Duplicate identifier 'Status'.
d1-spot.ts(25,7):  error TS2322: Type '"owner"' is not assignable to type 'Role'.
EXIT=1

ทดสอบความเข้าใจ

อ้างอิง

• TypeScript Handbook — Differences Between Type Aliases and Interfaces — อ่านตารางเทียบสองคอลัมน์ให้จบ แล้วเลื่อนลงไปอ่านย่อหน้าใต้ตาราง ที่บอกว่าคู่มือทางการเองแนะนำให้ “ใช้ interface ไปก่อนจนกว่าจะต้องใช้ความสามารถของ type”
• TypeScript Handbook — Type Assertions — อ่านสองย่อหน้าสุดท้ายของหัวข้อ ซึ่งอธิบายว่าทำไม TypeScript อนุญาตแค่ assert ไป type ที่ “กว้างกว่าหรือแคบกว่า” และทำไม as unknown as ถึงลอดผ่านได้ — ตรงกับ TS2352 ที่บทนี้รันให้ดู
• TypeScript Handbook — any — สั้นมากอ่านไม่ถึงนาที · สนใจคอมเมนต์ในโค้ดตัวอย่างที่เขียนว่า “Using any disables all further type checking” ซึ่งคือสิ่งที่ตารางหกแถวในหัวข้อ 6 วัดออกมาเป็นตัวเลขให้แล้ว
• TypeScript Handbook — Narrowing — อ่านหัวข้อย่อย typeof type guards และ The in operator narrowing สองอันนี้คือเครื่องมือที่ใช้ปลด unknown ในตัวอย่างท้ายหัวข้อ 6
• TypeScript Handbook — Declaration Merging — อ่านแค่หัวข้อ Merging Interfaces พอ ส่วนที่เหลือเป็นเรื่อง namespace ซึ่งยังไม่ต้องใช้ · อ่านเพื่อยืนยันว่าฟีเจอร์นี้มีไว้ต่อเติม type ของ library เป็นหลัก ไม่ใช่ท่ามาตรฐานในโค้ดของตัวเอง