TypeScript คืออะไร และ type พื้นฐานที่ต้องรู้

tsc -v        → Version 7.0.2
node --version  → v24.14.0
# ตรวจ type:  tsc --noEmit --strict ไฟล์.ts
# คอมไพล์แล้วรัน: tsc --target es2022 --module nodenext --moduleResolution nodenext ไฟล์.ts && node ไฟล์.js

1 · TypeScript คืออะไร พูดแบบไม่ใช้ศัพท์

เว็บเบราว์เซอร์ทุกตัวในโลกรู้จักภาษาเดียวคือ JavaScript
JavaScript ไม่มีการประกาศ type เลย ตัวแปรตัวหนึ่งเก็บตัวเลขวันนี้ พรุ่งนี้เก็บข้อความก็ได้ ไม่มีใครห้าม ซึ่งสบายมากตอนเขียนไฟล์ 20 บรรทัด และเป็นนรกตอนโปรเจกต์มี 20,000 บรรทัด

TypeScript คือ JavaScript ที่ถูกเติม "ชั้นสำหรับเขียนบอกชนิดข้อมูล" เข้าไป
คุณเขียนไฟล์ .ts · มีเครื่องมือชื่อ tsc คอยอ่านไฟล์นั้นแล้วบ่นถ้าคุณใช้ข้อมูลผิดชนิด
แล้ว tsc จะแปลงไฟล์ .ts ของคุณเป็นไฟล์ .js ธรรมดา เพื่อเอาไปรันจริง

สไลด์หน้า 7 สรุปประโยชน์ไว้ 3 ข้อ ซึ่งตรงกับที่เจอจริง:

ตัวอย่างในสไลด์หน้า 6 คือโค้ดสี่บรรทัดที่มีจุดแดงอยู่ใต้คำว่า name — ผมเอามารันจริงเพื่อดูว่า tsc พูดว่าอะไรออกมาแน่:

const user = {
  firstName: "Angela",
  lastName: "Davis",
  role: "Professor",
};

console.log(user.name);

$ tsc --noEmit --strict 02-username.ts
02-username.ts(7,18): error TS2339: Property 'name' does not exist on type
'{ firstName: string; lastName: string; role: string; }'.

สังเกตสิ่งที่ tsc ทำได้โดยที่เราไม่ได้พิมพ์ type ให้มันเลยสักตัว — มันอ่านค่าที่เราใส่ แล้วสรุปเองว่าก้อนนี้มีสามช่อง ทุกช่องเป็น string
พอเราขอช่องที่สี่ที่ไม่มีอยู่จริง มันเลยฟ้อง
ใน JavaScript ล้วน ๆ บรรทัดนี้ไม่ error มันจะพิมพ์คำว่า undefined ออกมาเฉย ๆ แล้วคุณจะไปเจอตอนลูกค้าโทรมาถามว่าทำไมหน้าเว็บขึ้นคำว่า undefined

$ tsc --target es2022 --module nodenext --moduleResolution nodenext 02-username.ts
02-username.ts(7,18): error TS2339: Property 'name' does not exist on type
'{ firstName: string; lastName: string; role: string; }'.
$ echo $?
2
$ ls 02-username.js
02-username.js          # ← ไฟล์ถูกสร้างขึ้นมาแล้ว ทั้งที่ยังมี error
$ node 02-username.js
undefined

2 · จุดที่ชนกับ Go แรงที่สุด — type หายไปตอนรัน

ใน Go type อยู่กับข้อมูลไปตลอดชีวิตของโปรแกรม ตอนรันอยู่คุณยังถามได้ว่า ตัวแปรนี้เป็นชนิดอะไร (reflect.TypeOf · type switch · type assertion)
ใน TypeScript ไม่มีอะไรแบบนั้นเหลืออยู่เลย เพราะ type ถูกลบทิ้งตอนแปลงเป็น .js

ไม่ต้องเชื่อผม ผมเขียนไฟล์นี้ขึ้นมาจริง ๆ:

const message: string = "Hello World";
const numeric: number = 1000;
const isEnabled: boolean = true;

type Score = { name: string; score: number };

const scoreList: Array<number> = [40, 45, 50, 43, 50];

const johnDoeScore: Score = { name: "John Doe", score: 40 };

function total(list: Array<number>): number {
  return list.reduce((a: number, b: number) => a + b, 0);
}

console.log(message, numeric, isEnabled);
console.log(total(scoreList), johnDoeScore.name);

สั่งคอมไพล์ แล้วเปิดไฟล์ .js ที่มันสร้างให้ ออกมาหน้าตาแบบนี้เป๊ะ ๆ:

$ tsc --target es2022 --module nodenext --moduleResolution nodenext 01-erase.ts
$ cat 01-erase.js
const message = "Hello World";
const numeric = 1000;
const isEnabled = true;
const scoreList = [40, 45, 50, 43, 50];
const johnDoeScore = { name: "John Doe", score: 40 };
function total(list) {
    return list.reduce((a, b) => a + b, 0);
}
console.log(message, numeric, isEnabled);
console.log(total(scoreList), johnDoeScore.name);
export {};

วางสองไฟล์เทียบกันแล้วไล่ดูว่าอะไรหายไปบ้าง:

const message: string = "Hello World";
type Score = { name: string; score: number };
const scoreList: Array<number> = [40, ...];
function total(list: Array<number>): number {

const message = "Hello World";
(บรรทัด type Score หายไปทั้งบรรทัด)
const scoreList = [40, ...];
function total(list) {

ผลรันของไฟล์ .js คือ Hello World 1000 true แล้วบรรทัดถัดมา 228 John Doe
เหมือนกันเป๊ะกับตอนที่ยังมี type อยู่ เพราะ type ไม่เคยมีส่วนร่วมกับการคำนวณอะไรเลย

แล้วถ้าลองถามหา type ตอนรันล่ะ ก็จะเจอแบบนี้:

type Score = { name: string; score: number };
const johnDoeScore: Score = { name: "John Doe", score: 40 };

console.log(typeof johnDoeScore);
console.log(johnDoeScore instanceof Score);

$ tsc --noEmit --strict 07-runtime.ts
07-runtime.ts(5,37): error TS2693: 'Score' only refers to a type, but is being used as a value here.

ประโยค "'Score' only refers to a type" คือคำอธิบายที่ตรงที่สุดของทั้งบทนี้ — Score ไม่ใช่ "ของ" ที่มีตัวตนในโปรแกรม มันเป็นแค่หมายเหตุที่คุณเขียนให้ tsc อ่าน
ส่วนบรรทัดบน typeof johnDoeScore ตอนรันจริงได้คำว่า object เฉย ๆ ไม่ใช่ Score เพราะนั่นคือ typeof ของ JavaScript ซึ่งรู้จักแค่ string · number · boolean · object · และอีกไม่กี่คำ

แล้วถ้าดันทุรังคอมไพล์ไฟล์นี้แล้วรันเลยล่ะ — tsc ก็ยังส่งไฟล์ .js ออกมาให้เหมือนเดิม (ตามที่เตือนไว้ในหัวข้อ 1) แล้ว node ก็เจอของจริงเข้าไปเต็ม ๆ:

$ tsc --target es2022 --module nodenext --moduleResolution nodenext 07-runtime.ts
07-runtime.ts(5,37): error TS2693: 'Score' only refers to a type, but is being used as a value here.
$ node 07-runtime.js
object
console.log(johnDoeScore instanceof Score);
                                    ^

ReferenceError: Score is not defined
    (stack trace ที่เหลือตัดออก)

บรรทัดแรกพิมพ์ object ออกมาได้ตามปกติ แล้วบรรทัดที่สองพังทันที
เปิดไฟล์ .js ดูจะเข้าใจเลยว่าทำไม — type Score ถูกลบทิ้งไปแล้ว เหลือแต่คำว่า Score ลอย ๆ ที่ไม่มีตัวตนอะไรรองรับ ตอน node อ่านถึง
นี่คือเหตุผลที่ tsc ห้ามไว้ตั้งแต่ตอนตรวจ: มันรู้ล่วงหน้าว่าโค้ดบรรทัดนี้จะไม่มีทางรันผ่าน

function addTen(n: number): number {
  return n + 10;
}

const fromOutside: any = "5";   // สมมติว่าค่านี้มาจาก API ข้างนอก

const answer: number = addTen(fromOutside);

console.log(answer);
console.log(typeof answer);

$ tsc --noEmit --strict 09-lie2.ts
(ไม่มีอะไรออกมา — exit code 0)

$ node 09-lie2.js
510
string

3 · primitive สามตัว — และช่องว่างตรงที่เคยมี int

สไลด์หน้า 10 ให้มาสามบรรทัด ผมรันแล้วผ่านทั้งหมด:

const message: string = "Hello World";
const numeric: number = 1000;
const isEnabled: boolean = true;

ประโยคที่ต้องอ่านช้า ๆ อยู่ในสไลด์หน้าเดียวกัน: "Number represents for number like 100 or 100.5, no equivalent int or float. Everything is number."

ผมลองพิมพ์ int กับ float ลงไปตรง ๆ ดูว่าเกิดอะไรขึ้น:

const age: int = 30;
const price: float = 19.99;
const qty: number = "10";

$ tsc --noEmit --strict 04-noint.ts
04-noint.ts(1,12): error TS2304: Cannot find name 'int'.
04-noint.ts(2,14): error TS2552: Cannot find name 'float'. Did you mean 'GLfloat'?
04-noint.ts(3,7): error TS2322: Type 'string' is not assignable to type 'number'.

ทีนี้ประเด็นสำคัญ: ถ้ามี number ตัวเดียว แล้วจำนวนเต็มกับทศนิยมอยู่ด้วยกันยังไง
คำตอบคือ ทุกตัวเลขใน JavaScript คือทศนิยม 64 บิตแบบเดียวกันหมด เลข 1000 ที่คุณเขียน จริง ๆ แล้วเก็บอยู่ในรูปแบบเดียวกับ 100.5 เป๊ะ ๆ
ผลที่ตามมาซึ่งคน Go ต้องรู้ ผมรันให้ดูสามบรรทัด:

const a: number = 10;
const b: number = 3;

console.log(a / b);
console.log(0.1 + 0.2);
console.log(typeof a);

$ node 03-number.js
3.3333333333333335
0.30000000000000004
number

fmt.Println(0.1 + 0.2)   // → 0.3

a := 0.1
b := 0.2
fmt.Println(a + b)       // → 0.30000000000000004

4 · array — ล็อกไว้ว่ากล่องนี้ใส่อะไรได้

สไลด์หน้า 11 ให้มาสองบรรทัด:

const scoreList: Array<number> = [40, 45, 50, 43, 50];
const students: Array<string> = [
  'John Doe',
  'Frederic Castro',
  'Josie Watson',
  'Claude Cole',
  'Dominik James'
];

Array<number> อ่านว่า "array ที่ข้างในเป็น number" — ส่วน <…> คือช่องให้ใส่ว่าข้างในเป็นอะไร
เขียนอีกแบบที่เจอบ่อยกว่าในโค้ดจริงคือ number[] ซึ่งเหมือนกันทุกประการ ต่างกันแค่รูปแบบการพิมพ์

ลองใส่ของผิดชนิดลงไปดูว่าเจออะไร:

const scoreList: Array<number> = [40, 45, 50, 43, 50];
scoreList.push(60);
scoreList.push("70");

const mixed: Array<number> = [40, "45", 50];

$ tsc --noEmit --strict 05-array.ts
05-array.ts(3,16): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
05-array.ts(5,35): error TS2322: Type 'string' is not assignable to type 'number'.

สังเกตว่าสองบรรทัดนี้ผิดเรื่องเดียวกันแต่ได้เลข error คนละตัว — TS2345 ใช้เมื่อส่งค่าผิดเข้าฟังก์ชัน (คำว่า parameter ในข้อความบอกไว้) ส่วน TS2322 ใช้เมื่อยัดค่าผิดลงตัวแปร (คำว่า assignable)
รู้ความต่างนี้ไว้ช่วยเวลาค้นหา error ตอนดึก ๆ ได้จริง

5 · object type — และกฎที่คน Go ต้องเลิกเชื่อหนึ่งข้อ

สไลด์หน้า 12 บรรยายก้อนข้อมูลของนักเรียนสามคน แล้วเก็บรวมไว้ใน array ก้อนเดียว:

const johnDoeScore = {
  name: "John Doe",
  score: 40,
};

const scores: Array<{ name: string; score: number }> = [
  johnDoeScore,
  { name: "Frederic Castro", score: 45 },
  { name: "Josie Watson", score: 50 },
];

ก้อน { name: string; score: number } คือ object type — คำอธิบายรูปร่างของก้อนข้อมูล ว่ามีช่องอะไร ช่องละชนิดไหน
คั่นแต่ละช่องด้วย เซมิโคลอน (ในตัวอธิบาย type) ส่วนตอนใส่ค่าจริงคั่นด้วย จุลภาค — จุดนี้พิมพ์สลับกันบ่อยมากตอนเริ่มต้น

เติมเครื่องหมาย ? ท้ายชื่อช่อง แปลว่า "ช่องนี้จะมีหรือไม่มีก็ได้" ตามที่สไลด์เขียนว่า Use optional properties
(ก้อน scores ใช้ตัวเดิมจากบล็อกบน ผมตัดออกให้อ่านง่าย):

const johnDoeScore: { name: string; score: number; note?: string } = {
  name: "John Doe",
  score: 40,
};

console.log(scores.length, johnDoeScore.note);
console.log(scores.map((s) => s.score).join(","));

$ tsc --noEmit --strict 11-objtype.ts   (ผ่าน 0 error)
$ node 11-objtype.js
3 undefined
40,45,50

ช่อง note ที่ไม่ได้ใส่ค่า อ่านออกมาได้ undefined ตอนรัน — ไม่ใช่สตริงว่าง
นี่ต่างจาก Go ที่ field ของ struct ซึ่งไม่ได้กำหนดค่าจะได้ zero value ("" สำหรับ string) ใน TypeScript ช่องที่ไม่มีคือไม่มีจริง ๆ ไม่ได้ถูกเติมค่าให้

กฎที่ต้องเลิกเชื่อ: ชื่อ type ไม่ได้เป็นตัวกำหนดว่าเข้ากันได้

ใน Go ถ้าคุณประกาศ type Score struct{…} กับ type Player struct{…} ที่มี field เหมือนกันเป๊ะ คุณก็ยังเอาตัวหนึ่งไปใส่ที่ของอีกตัวไม่ได้ ถ้าไม่แปลงชนิดก่อน เพราะ Go ดูที่ชื่อ
TypeScript ดูที่รูปร่าง ผมรันพิสูจน์:

type Score = { name: string; score: number };
type Player = { name: string; score: number };

const s: Score = { name: "John Doe", score: 40 };
const p: Player = s;      // ← Go ไม่ยอม แต่ TypeScript ยอม

type Point = { x: number; y: number };
const notAPoint: Point = { x: 1 };

$ tsc --noEmit --strict 06-structural.ts
06-structural.ts(8,7): error TS2741: Property 'y' is missing in type '{ x: number; }' but required in type 'Point'.

มี error แค่ข้อเดียว และไม่ใช่บรรทัด const p: Player = s;
TypeScript ถือว่า Score กับ Player เป็นสิ่งเดียวกัน เพราะรูปร่างตรงกันทุกช่อง ชื่อไม่มีความหมายอะไรเลย
ส่วน Point ที่ขาดช่อง y ถึงจะโดนฟ้อง เพราะรูปร่างไม่ตรงจริง ๆ

แต่มีข้อยกเว้นหนึ่งที่ทำให้คนงงบ่อยมาก ผมรันเทียบสองท่าที่ดูเหมือนกัน:

type Score = { name: string; score: number };

// ท่าที่ 1 — ใส่ก้อนตรง ๆ ตอนประกาศ
const direct: Score = { name: "John Doe", score: 40, grade: "A" };

// ท่าที่ 2 — พักไว้ในตัวแปรก่อน แล้วค่อยยัดเข้า Score
const box = { name: "Josie Watson", score: 50, grade: "A" };
const viaVariable: Score = box;

$ tsc --noEmit --strict 10-excess.ts
10-excess.ts(4,54): error TS2353: Object literal may only specify known properties,
and 'grade' does not exist in type 'Score'.

6 · ภารกิจ — พิสูจน์ด้วยมือตัวเองว่า type หายไปจริง

function addTen(n: number): number { return n + 10; }
const fromOutside: any = "5";
const answer: number = addTen(fromOutside);
console.log(answer, typeof answer);

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

อ้างอิง

• TypeScript Handbook — The Basics — อ่านหัวข้อ Static type-checking กับ Erased Types สองหัวข้อนี้พูดเรื่องเดียวกับหัวข้อ 2 ของบทนี้ และมีประโยคที่ว่า type ถูกลบทิ้งก่อนรันเขียนไว้ตรง ๆ
• TypeScript Handbook — Everyday Types — อ่านตั้งแต่ The primitives ถึง Optional Properties ครอบคลุม string · number · boolean · array · object type ทั้งหมดของบทนี้ พร้อมประโยคที่ยืนยันว่าไม่มี int และ float
• TypeScript Handbook — Type Compatibility — อ่านย่อหน้าแรกอย่างเดียวก็พอ มันบอกว่า TypeScript ใช้ structural typing และเทียบให้ดูกับภาษาที่ใช้ nominal typing — ตรงกับที่หัวข้อ 5 พิสูจน์ให้ดู
• TypeScript Playground (สไลด์หน้า 8) — วางโค้ดฝั่งซ้าย แล้วกดแท็บ .JS ฝั่งขวา จะเห็น type หายไปแบบเรียลไทม์โดยไม่ต้องลง tsc ในเครื่อง เหมาะกับทดลองเร็ว ๆ
• MDN — Number — อ่านย่อหน้า double-precision 64-bit binary format คือคำอธิบายว่าทำไม 0.1 + 0.2 ถึงไม่เท่ากับ 0.3 และทำไมถึงไม่มี int ให้เลือก

ติดตรงไหนถามได้เลยครับ โดยเฉพาะคำถามที่ขึ้นต้นว่า "แล้วถ้าใน Go มันทำแบบนี้ ใน TypeScript ทำยังไง" — คำถามแบบนั้นดีที่สุดสำหรับบทนี้ เพราะสิ่งที่ยากไม่ใช่ syntax ใหม่ แต่คือการเลิกคาดหวังพฤติกรรมเดิม