TypeScript Academy · บทเรียน

ชนิดข้อมูลในฐานะภาษาการคำนวณ

ทำความเข้าใจระบบชนิดข้อมูลในฐานะภาษาฟังก์ชันบริสุทธิ์

ชนิดข้อมูลในฐานะภาษาการคำนวณ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ชนิดข้อมูลคือภาษา

TypeScript มีสองภาษาที่ทำงานอยู่เคียงข้างกัน ภาษาหนึ่งคือ JavaScript ระดับค่าที่คุณคุ้นเคยอยู่แล้ว อีกภาษาคือระดับชนิดข้อมูล ซึ่งทำงานทั้งหมดในเวลาคอมไพล์ ในหลักสูตรนี้ คุณจะได้เรียนรู้การเขียนโปรแกรมด้วยภาษาที่สองนี้

ระบบชนิดข้อมูลเป็นภาษาเชิงฟังก์ชันขนาดเล็กและบริสุทธิ์ คุณป้อนชนิดข้อมูลเข้าไป แล้วระบบจะคำนวณชนิดข้อมูลออกมา ไม่มีส่วนใดคงอยู่จนถึงเวลารันจริง

type Greeting = "hello";
type Loud = Uppercase<Greeting>;
// Loud is "HELLO" - computed by the type system

ชนิดข้อมูลเข้า ชนิดข้อมูลออก

ชนิดข้อมูลทั่วไปโดยพื้นฐานแล้วคือฟังก์ชันจากชนิดข้อมูลไปเป็นชนิดข้อมูล พารามิเตอร์ชนิดข้อมูลคืออาร์กิวเมนต์ และเนื้อหาภายในคือค่าที่คืนกลับมา

ด้านล่างนี้ Boxed รับชนิดข้อมูล T และสร้างชนิดข้อมูลอ็อบเจ็กต์ที่ห่อหุ้มชนิดนั้น ให้คิดว่า T เป็นพารามิเตอร์ที่คุณส่งเข้าไป

type Boxed<T> = { value: T };

type A = Boxed<number>; // { value: number }
type B = Boxed<string>; // { value: string }

ชนิดข้อมูลทั่วไปคือฟังก์ชัน

ลองเปรียบเทียบฟังก์ชันระดับค่ากับฟังก์ชันระดับชนิดข้อมูล รูปแบบเกือบเหมือนกันทุกประการ คือรับพารามิเตอร์เข้าและคืนผลลัพธ์เดียวออกมา

ค่า: const id = (x) => x
ชนิดข้อมูล: type Id<T> = T

Id ระดับชนิดข้อมูลเพียงคืนค่าทุกอย่างที่คุณส่งให้

type Id<T> = T;

type X = Id<boolean>; // boolean
type Y = Id<"abc">;  // "abc"

ไม่มีต้นทุนขณะรันจริง

ทุกสิ่งในระดับชนิดข้อมูลจะถูกลบออกก่อนที่โค้ดจะทำงาน ผลลัพธ์ JavaScript จะไม่เหลือร่องรอยของการคำนวณชนิดข้อมูลเลย โปรแกรมที่กำลังทำงานจึงไม่มีต้นทุนด้านประสิทธิภาพ ไม่ว่าชนิดข้อมูลของคุณจะซับซ้อนเพียงใด

นี่คือเหตุผลที่บางครั้งเรียกการเขียนโปรแกรมระดับชนิดข้อมูลว่าไม่มีต้นทุน เพราะมีผลต่อคอมไพเลอร์เท่านั้นและไม่เคยปรากฏในชุดโปรแกรม

type Pair<T> = [T, T];
const p: Pair<number> = [1, 2];
// Compiled JS is just: const p = [1, 2];
console.log(p);

พารามิเตอร์หลายตัว

ฟังก์ชันระดับชนิดข้อมูลรับพารามิเตอร์ได้หลายตัวเช่นเดียวกับฟังก์ชันทั่วไป ในที่นี้ Merge รับชนิดข้อมูลอ็อบเจ็กต์สองชนิดและนำมารวมกัน

อ่านได้ว่า: เมื่อกำหนด A และ B ให้คืนอ็อบเจ็กต์ที่มีคุณสมบัติทั้งหมดของทั้งสองชนิด

type Merge<A, B> = A & B;

type User = { id: number };
type Named = { name: string };
type NamedUser = Merge<User, Named>;
// { id: number; name: string }

ค่าเริ่มต้นสำหรับพารามิเตอร์

พารามิเตอร์ชนิดข้อมูลสามารถมี ค่าเริ่มต้น ได้เช่นเดียวกับอาร์กิวเมนต์ฟังก์ชันที่มีค่าเริ่มต้น หากผู้เรียกละเว้นอาร์กิวเมนต์ ระบบจะใช้ค่าเริ่มต้น

type List<T = string> = T[];

type A = List;        // string[]
type B = List<number>; // number[]

ข้อจำกัดคือเครื่องป้องกัน

ข้อจำกัดที่ใช้ extends จะจำกัดว่าชนิดข้อมูลใดสามารถส่งเข้าไปได้ ซึ่งเทียบเท่ากับการตรวจสอบอาร์กิวเมนต์ของฟังก์ชันในระดับชนิดข้อมูลก่อนนำไปใช้

HasId ยอมรับเฉพาะชนิดข้อมูลที่มีพร็อพเพอร์ตี id อยู่แล้ว ดังนั้นภายในส่วนเนื้อหาจึงอ่านค่าได้อย่างปลอดภัย

type GetId<T extends { id: number }> = T["id"];

type A = GetId<{ id: number; name: string }>; // number
// GetId<{ name: string }> would be a compile error

การคำนวณ ไม่ใช่แค่การใส่คำอธิบาย

ผู้เริ่มต้นใช้ชนิดข้อมูลเพียงเพื่อ ระบุป้ายกำกับ ให้ค่า การเขียนโปรแกรมระดับชนิดข้อมูลใช้ชนิดข้อมูลเพื่อ คำนวณ คำตอบ ตัวช่วยในตัวอย่าง ReturnType จะตรวจสอบชนิดของฟังก์ชันแล้วแยกชนิดของผลลัพธ์ออกมา

type Fn = (a: number) => string;
type R = ReturnType<Fn>; // string

type Fn2 = () => boolean;
type R2 = ReturnType<Fn2>; // boolean

การแมปผ่านพร็อพเพอร์ตี

ชนิดข้อมูลแบบแมปช่วยให้คุณแปลงทุกพร็อพเพอร์ตีของชนิดข้อมูลอ็อบเจ็กต์ได้ นี่คือลูปในภาษาชนิดข้อมูล Stringify เปลี่ยนชนิดของค่าทุกค่าให้เป็น string

type Stringify<T> = { [K in keyof T]: string };

type Input = { a: number; b: boolean };
type Out = Stringify<Input>; // { a: string; b: string }

บริสุทธิ์และให้ผลแน่นอน

ภาษาชนิดข้อมูลมีความ บริสุทธิ์: อินพุตเดิมจะให้ชนิดเอาต์พุตเดิมเสมอ โดยไม่มีผลข้างเคียง ไม่มีการเปลี่ยนแปลง ไม่มี IO และไม่มีเรื่องเวลา ความบริสุทธิ์นี้ทำให้โปรแกรมระดับชนิดข้อมูลคาดเดาได้และนำมาประกอบร่วมกันได้

ด้วยเหตุที่บริสุทธิ์ คุณจึงให้เหตุผลเกี่ยวกับชนิดข้อมูลได้เช่นเดียวกับการให้เหตุผลทางคณิตศาสตร์ นั่นคือใช้การแทนค่า

type Square<T extends { area: number }> = T["area"];
// Always the same result for the same input shape

เหตุผลที่เรื่องนี้สำคัญ

การเชี่ยวชาญภาษาที่สองนี้ช่วยให้คุณเข้ารหัสกฎที่คอมไพเลอร์บังคับใช้ให้โดยไม่ต้องเสียค่าใช้จ่ายเพิ่มเติม เช่น เส้นทางที่ถูกต้อง สวิตช์ที่ครอบคลุมทุกกรณี การจัดการสตริงอย่างปลอดภัย และส่วนเชื่อมต่อโปรแกรมที่ไม่สามารถใช้ผิดวิธีได้ ส่วนที่เหลือของหลักสูตรนี้จะสร้างชุดเครื่องมือดังกล่าว

แนวคิดสำคัญ: ชนิดข้อมูลคือค่าในภาษาชนิดข้อมูล และชนิดข้อมูลทั่วไปคือฟังก์ชัน

type NonEmpty<T extends unknown[]> =
  T extends [unknown, ...unknown[]] ? T : never;
// Encodes a rule: the tuple must have at least one element

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจของคุณเกี่ยวกับชนิดข้อมูลในฐานะภาษาสำหรับการคำนวณ

ทบทวน

คุณได้เรียนรู้ว่าชนิดข้อมูลของ TypeScript รวมกันเป็น ภาษาฟังก์ชันบริสุทธิ์ ที่ทำงานในเวลาคอมไพล์

ชนิดข้อมูลทั่วไปคือฟังก์ชัน: รับชนิดข้อมูลเข้าและส่งชนิดข้อมูลออก
พารามิเตอร์รองรับค่าเริ่มต้นและข้อจำกัด extends
ชนิดข้อมูลแบบแมปจะวนผ่านพร็อพเพอร์ตี
ทุกอย่างถูกลบออก ดังนั้นจึง ไม่มีต้นทุนขณะทำงาน

ถัดไป คุณจะเพิ่ม คำสั่งเงื่อนไข ให้ภาษานี้: ชนิดข้อมูลแบบมีเงื่อนไข

คำถามที่พบบ่อย

บทเรียน “ชนิดข้อมูลในฐานะภาษาการคำนวณ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ชนิดข้อมูลในฐานะภาษาการคำนวณ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ชนิดข้อมูลในฐานะภาษาการคำนวณ”

ทำความเข้าใจระบบชนิดข้อมูลในฐานะภาษาฟังก์ชันบริสุทธิ์ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “ชนิดข้อมูลในฐานะภาษาการคำนวณ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ TypeScript Academy