TypeScript — type · interface · function · map/filter/reduce แผ่นเดียวจบ

tsc      Version 7.0.2      # จาก tsc -v
node     v24.14.0           # จาก node --version
go       go1.26.5 darwin/arm64   # ใช้เฉพาะหัวข้อ 12 ที่เทียบกับ Go

สารบัญ

1. คำสั่งที่ใช้จริงทุกวัน
2. type พื้นฐาน + วิธีเขียน
3. interface vs type
4. any vs unknown
5. as (type assertion)
6. ใส่ type ให้ฟังก์ชัน
7. method แปลงข้อมูล 6 ตัว
8. reduce — สามกับดักที่ต้องรู้
9. slice vs splice
10. ใครแตะของเดิมบ้าง
11. ตารางแปล error ของ tsc
12. เทียบกับ Go สั้น ๆ
13. ตารางกับดักรวมทั้งกลุ่ม
14. อ้างอิง

1 · คำสั่งที่ใช้จริงทุกวัน

$ 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 · type พื้นฐาน + วิธีเขียน

$ 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'.

บรรทัดที่สอง — GLfloat เป็นของ WebGL ไม่ใช่ชนิดตัวเลขของภาษา · ข้อความ “Did you mean…” เดาจากการสะกดที่คล้ายกัน ไม่ใช่จากความหมาย ให้เชื่อบรรทัด TS2304 ที่บอกว่า “ไม่มีชื่อนี้”

// ไฟล์ .ts ที่เขียน
const message: string = "Hello World";
type Score = { name: string; score: number };
function total(list: Array<number>): number {

// ไฟล์ .js ที่ได้
const message = "Hello World";
(บรรทัด type Score หายไปทั้งบรรทัด)
function total(list) {

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

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

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

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

3 · interface vs type — อะไรทำได้/ไม่ได้ ฝั่งไหน

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

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

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

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

$ # interface ที่ชื่อซ้ำถูกรวมเป็นก้อนเดียว → ต้องใส่ครบทั้งสองช่อง
a4-merge-miss.ts(8,7): error TS2741: Property 'ts' is missing in type
'{ title: string; }' but required in type 'Config'.

$ # interface ทำ union ไม่ได้ — สอง error นี้คือหลักฐาน
error TS1005: '{' expected.                    ← interface IStudentId = number | string;

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.

4 · any vs unknown — อันไหนปล่อยผ่านอะไร

ไฟล์สองไฟล์ที่เหมือนกันทุกตัวอักษร ต่างแค่คำเดียว (const data: any กับ const data: unknown) แล้วสั่ง tsc --noEmit --strict:

$ # ฝั่ง 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'.

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

function loadConfig(): any {
	return { retry: "3" };        // ← เป็น string นะ ไม่ใช่เลข
}
const cfg = loadConfig();
const retry: number = cfg.retry;   // เขียนไว้ชัดว่าเป็น number

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

# node e1-spread.js
retry = 3
retry + 1 = 31                     ← ไม่ใช่ 4 เพราะค่าจริงคือ "3" แล้ว "3" + 1 คือการต่อข้อความ
TypeError: retry.toFixed is not a function

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

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

EXIT_TSC=0
ผ่านด่านแล้ว name = Ann
ข้อมูลไม่ตรงรูปที่คาดไว้ ไม่แตะมัน       # เคส JSON.parse('123') ที่ได้เลข ไม่ใช่ object
EXIT_NODE=0

5 · as (type assertion) — ทำอะไรได้ ทำอะไรไม่ได้

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

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

# node a6-assert.js
compile ผ่านแล้ว initGame = { round: 'ROUND 1', score: 0 }   ← ไม่มี streak อยู่จริง ๆ
streak = undefined                                            ← undefined เงียบ ๆ
streak + 1 = NaN                                              ← ยังไม่ crash · ค่าเน่าไหลต่อได้อีกไกล
TypeError: Cannot read properties of undefined (reading 'toFixed')  ← ถึงจะพัง

error TS2352: Conversion of type 'number' to type 'string' may be a mistake
because neither type sufficiently overlaps with the other. If this was intentional,
convert the expression to 'unknown' first.

6 · ใส่ type ให้ฟังก์ชัน

function sum(num1: number, num2: number): number {
	return num1 + num2;
}
//        ↑ ชนิดของ    ↑ ชนิดของ     ↑ ชนิดของของที่คายออกมา

const sum = (num1: number, num2: number): number => {
	return num1 + num2;
};

ความสามารถเท่ากันเป๊ะ ต่างแค่รูปประโยค · สองก้อนนี้อยู่ไฟล์เดียวกันไม่ได้ เพราะชื่อ sum ซ้ำ → error TS2300: Duplicate identifier 'sum'.

$ # ลำดับ parameter ผิด — สองข้อนี้เป็นเรื่องเดียวกัน คือ argument ระบุด้วยตำแหน่ง
order.ts(2,31): error TS1016: A required parameter cannot follow an optional parameter.
order.ts(6,16): error TS1014: A rest parameter must be last in a parameter list.

$ # ใส่ทั้ง ? และ = ที่ช่องเดียวกัน
both.ts(1,28): error TS1015: Parameter cannot have question mark and initializer.

callsite.ts(6,1):  error TS2554: Expected 2 arguments, but got 1.     ← sum(2)
callsite.ts(7,11): error TS2554: Expected 2 arguments, but got 3.     ← sum(2, 3, 4)
callsite.ts(8,8):  error TS2345: Argument of type 'string' is not assignable
                                 to parameter of type 'number'.       ← sum(2, "3")

noparam.ts(2,16): error TS7006: Parameter 'name' implicitly has an 'any' type.
voidret.ts(4,3):  error TS2322: Type 'number' is not assignable to type 'void'.

const sum = (num1: number = 0, num2?: number): number => {
	return num1 + num2
}

slide28a.ts(3,17): error TS18048: 'num2' is possibly 'undefined'.

=== A (ไม่เขียน return type) ===
infer-a.ts(6,7): error TS2322: Type 'string' is not assignable to type 'number'.
                              ← บรรทัด 6 คือบรรทัดที่ "คนเรียกใช้"

=== B (เขียน return type) ===
infer-b.ts(3,3): error TS2322: Type 'string' is not assignable to type 'number'.
                              ← บรรทัด 3 คือบรรทัด return ที่พิมพ์ผิดจริง

7 · method แปลงข้อมูล 6 ตัว

ผลรันจริงของ join · split ที่ต้องจำ

$ node a-join.js
1) Alice, Bob        // ["Alice","Bob"].join(", ")
2) string            // typeof — คืน string เสมอ
3) Alice,Bob         // join() เปล่า ๆ = คอมมา ไม่ใช่ "ไม่มีตัวคั่น"
4) AliceBob          // join("") ต่างหากคือไม่มีอะไรคั่น
5) a---b             // ["a",null,undefined,"b"].join("-") — null/undefined กลายเป็นข้อความว่าง
6)                   // [].join(", ") ได้ข้อความว่าง ไม่ใช่ error
8) 2026-8-27         // [2026,8,27].join("-") — array ของเลขก็ join ได้

$ node b-split.js
3)  [ 'Hello', 'World' ]                       // "Hello World".split(" ")
6)  [ 'Hello World' ]                          // split(",") หา delimiter ไม่เจอ → ยาว 1 ไม่ใช่ว่าง!
7)  [ 'Alice', ' Bob', ' Carol' ]              // split(",")  ← เคาะติดหน้าชื่อ
8)  [ 'Alice', 'Bob', 'Carol' ]                // split(", ") ← ต่างกันแค่เคาะเดียว
9)  [ '', 'a', 'b', '' ]                       // ",a,b,".split(",") — ได้ชิ้นว่างหัวท้าย
10) [ '' ]                                     // "".split(",")  → ยาว 1
11) []                                         // "".split("")   → ยาว 0
12) [ 'a', 'b' ]                               // "a-b-c-d".split("-", 2) — ตัวที่สองคือ limit

13) [ 'ก', 'ิ', 'น' ]     // "กิน".split("") → คนเห็น 2 ตัว แต่ได้ 3 (สระอิแยกต่างหาก)
14) 8                     // "👨‍👩‍👧".split("").length → emoji ตัวเดียว ได้ 8
15) 5                     // [..."👨‍👩‍👧"].length → ยังไม่ใช่ 1 อยู่ดี

$ # join() เว้นว่างได้ แต่ split() เว้นว่างไม่ได้ — tsc จับให้
b2-split-noarg.ts(7,26): error TS2554: Expected 1-2 arguments, but got 0.

$ # ลืมว่า join คืน string ไม่ใช่ array
g-typeerr.ts(3,7): error TS2322: Type 'string' is not assignable to type 'string[]'.

กติกาการนับของ slice

ตำแหน่ง:  0   1   2   3   4   5     6   7   8   9   10
ตัวอักษร: H   e   l   l   o  (เคาะ)  W   o   r   l   d
                  ↑                   ↑
              เริ่มที่ 2          จบก่อนถึง 6

"Hello World".slice(2, 6)   → "llo "      ความยาว = เลขหลัง − เลขหน้า = 4
"Hello World".slice(2)      → "llo World"
"Hello World".slice(-5)     → "World"     เอา 5 ตัวสุดท้าย
"Hello World".slice(-5, -1) → "Worl"      5 ตัวสุดท้าย ตัดตัวท้ายทิ้ง
"Hello World".slice(6, 2)   → ""          เลขหน้ามากกว่าเลขหลัง = ว่าง ไม่กลับด้านให้
"Hello World".slice(2, 100) → ยาว 9       เลขหลังเกินขอบ หยุดที่ปลายให้เอง

ต่อกันใช้จริง — split → map → filter → slice → join

const raw: string = "Alice, Bob ,Carol,  Dave";

const cleaned: string[] = raw.split(",").map((n) => n.trim());
const firstThree: string[] = cleaned.slice(0, 3);
const label: string = firstThree.join(" · ");

$ node f-pipeline.js
1) [ 'Alice', ' Bob ', 'Carol', '  Dave' ]     ← split เฉย ๆ ยังมีเคาะติด
2) [ 'Alice', 'Bob', 'Carol', 'Dave' ]         ← หลัง .trim()
3) [ 'Alice', 'Bob', 'Carol' ]
4) Alice · Bob · Carol
5) ของเดิมยังอยู่: Alice, Bob ,Carol,  Dave    ← ผ่านมาสี่ขั้น raw ยังเหมือนเดิมเป๊ะ

const totalPaid = orders
	.filter((o) => o.status === "paid")
	.map((o) => o.amount)
	.reduce((sum, amount) => sum + amount, 0);

ของที่มีเป็น object ไม่ใช่ array

Object.keys(config)     → [ 'host', 'port' ]
Object.values(config)   → [ 'localhost', 3000 ]
Object.entries(config)  → [ [ 'host', 'localhost' ], [ 'port', 3000 ] ]

// พอเป็น array แล้ว ทุกอย่างในหัวข้อนี้ใช้ได้ทันที
Object.entries(stock).filter(([, count]) => count > 0).map(([name]) => name)
// → [ 'apple', 'cherry' ]

8 · reduce — สามกับดักที่ต้องรู้

const prices: number[] = [];
const total = prices.reduce((sum, p) => sum + p);

$ tsc --noEmit --strict     # exit code 0 · ไม่มี error สักบรรทัด

$ node t1-reduce-empty.js
TypeError: Reduce of empty array with no initial value
    at Array.reduce (<anonymous>)
Node.js v24.14.0

const prices = [15, 3, 40];
const total = prices.reduce((sum, price) => sum + price, "");   // พิมพ์ "" แทน 0

$ tsc --noEmit --strict     # exit code 0 · ไม่มี error
$ node
15340 string                # console.log(total, typeof total)

t3c-init-num.ts(3,44): error TS2769: No overload matches this call.
  The last overload gave the following error.
    Type 'string' is not assignable to type 'number'.

t3b-empty-obj.ts(5,3): error TS7053: Element implicitly has an 'any' type because
  expression of type 'string' can't be used to index type '{}'.
  No index signature with a parameter of type 'string' was found on type '{}'.

// ถูก
acc[e.role] = (acc[e.role] ?? 0) + e.dailyRate * e.workDays;
// → { developer: 92400, designer: 39600, manager: 55000 }

// ลบ ?? 0 ออก — tsc --strict ผ่านฉลุย exit=0 แต่รันจริงได้
acc[e.role] = acc[e.role] + e.dailyRate * e.workDays;
// → { developer: NaN, designer: NaN, manager: NaN }

9 · slice vs splice — ต่างกันตัว p ตัวเดียว

const a: string[] = ["Alice", "Bob", "Carol", "Dave"];
const x = a.slice(1, 3);

const b: string[] = ["Alice", "Bob", "Carol", "Dave"];
const y = b.splice(1, 3);

$ node p2.js
x = [ 'Bob', 'Carol' ]           | a เหลือ 4 ตัว
y = [ 'Bob', 'Carol', 'Dave' ]   | b เหลือ 1 ตัว

$ # tsc จับให้ พร้อมเดาให้ด้วยว่าน่าจะหมายถึงอะไร
d2-string-splice.ts(3,27): error TS2551: Property 'splice' does not exist on type 'string'. Did you mean 'slice'?

const removed = e.splice(2, 0, "Carol");   // ที่ตำแหน่ง 2 ลบ 0 ชิ้น แล้วยัด "Carol" เข้าไป

7) splice คืน: []
8) ของเดิม  : [ 'Alice', 'Bob', 'Carol', 'Dave' ]

10 · ใครแตะของเดิมบ้าง

const best = movies.sort((a, b) => b.rating - a.rating).slice(0, 3);
console.log(movies.map((m) => m.title));   // ← ยังไม่ได้แตะ movies เลยสักที

[ 'Inception', 'Interstellar', 'Parasite' ]
[
  'Inception',
  'Interstellar',
  'Parasite',
  'John Wick',
  'Avengers',
  'The Room'          ← movies ถูกเรียงใหม่ไปแล้ว ทั้งที่โค้ดไม่มีตรงไหนสั่งให้เปลี่ยน
]

function topRated(list: Movie[], n: number): Movie[] {
	return [...list]                          // ← ก็อปกองใหม่ก่อน
		.sort((a, b) => b.rating - a.rating)   // b − a = มากไปน้อย
		.slice(0, n);
}
// → [ 'Inception 8.8', 'Interstellar 8.6', 'Parasite 8.5' ] · movies ลำดับเดิมครบ

3) part    = [ { name: 'ALICE' }, { name: 'Bob' } ]
4) teamObj = [ { name: 'ALICE' }, { name: 'Bob' }, { name: 'Carol' } ]
5) เป็นก้อนเดียวกันไหม: true

11 · ตารางแปล error ของ tsc ที่เจอบ่อย

เลขอื่นที่เจอในบท 63–68

12 · เทียบกับ Go สั้น ๆ

13 · ตารางกับดักรวมทั้งกลุ่ม

14 · อ้างอิง

• TypeScript Handbook — The Basics — อ่านหัวข้อ Static type-checking กับ Erased Types · เป็นที่ที่เขียนตรง ๆ ว่า type ถูกลบทิ้งก่อนรัน
• TypeScript Handbook — Everyday Types — อ่านตั้งแต่ The primitives ถึง Optional Properties · ครอบคลุมหัวข้อ 2 ทั้งหมด และยืนยันว่าไม่มี int/float
• TypeScript Handbook — Type Compatibility — อ่านย่อหน้าแรกอย่างเดียวพอ · เป็นที่มาของ structural typing ในหัวข้อ 12
• TypeScript Handbook — Differences Between Type Aliases and Interfaces — อ่านตารางเทียบสองคอลัมน์ แล้วอ่านย่อหน้าใต้ตารางต่อ · คู่กับหัวข้อ 3
• TypeScript Handbook — Type Assertions — อ่านสองย่อหน้าสุดท้าย ที่อธิบายว่าทำไม as unknown as ถึงลอดผ่านได้ · ตรงกับ TS2352 ในหัวข้อ 5
• TypeScript Handbook — Narrowing — อ่านหัวข้อย่อย typeof type guards และ The in operator narrowing · คือเครื่องมือที่ใช้ปลด unknown ในหัวข้อ 4
• TypeScript Handbook — More on Functions — อ่าน Optional Parameters กับ Rest Parameters · ที่เหลือ (overload, generic) ยังไม่ต้องอ่านตอนนี้
• tsconfig — strict · noUncheckedIndexedAccess — ตัวที่เกี่ยวกับหน้านี้โดยตรงคือ strictNullChecks (TS18048) · noImplicitAny (TS7006) · noImplicitThis (TS2683)
• MDN — Array.prototype.slice() · splice() — อ่าน Parameters ของ slice (เรื่องเลขติดลบ + shallow copy) และ Return value ของ splice สองบรรทัด
• MDN — String.prototype.split() · Array.prototype.join() — อ่าน Description เรื่อง empty string และเรื่อง null/undefined กลายเป็นข้อความว่าง
• MDN — Array.prototype.reduce() — อ่านหัวข้อ Exceptions ที่เขียนตรง ๆ ว่า TypeError จะถูกโยนเมื่อ array ว่างและไม่มีค่าเริ่มต้น
• MDN — Array.prototype.sort() · toSorted() — อ่านประโยคแรกของ Description ที่บอกว่ามันเรียง in place · เป็นที่มาของกับดักใหญ่ที่สุดในหัวข้อ 10
• MDN — Number · NaN — อ่านย่อหน้า double-precision 64-bit binary format และหัวข้อ Testing against NaN (NaN === NaN เป็น false ต้องใช้ Number.isNaN())
• Go Blog — Go Slices: usage and internals — อ่านหัวข้อ Slice internals ย่อหน้าเดียว เพื่อยืนยันว่า slice ของ Go ชี้ไป array ก้อนเดิม — คนละเรื่องกับ TypeScript
• TypeScript Playground — วางโค้ดฝั่งซ้าย แล้วกดแท็บ .JS ฝั่งขวา จะเห็น type หายไปแบบเรียลไทม์โดยไม่ต้องลง tsc