ประเภทข้อมูล ในภาษา TypeScript

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

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

• Boolean
• Number
• String
• BigInt
• Symbol
• Undefined
• Null
• ประเภทข้อมูลอื่น
• อาเรย์
• ออบเจ็ค
• Function

ประเภทข้อมูล

ภาษา TypeScript เป็นภาษาที่มีประเภทข้อมูลเป็นแบบคงที่ (Static typing) ซึ่งตรงกันข้ามกับภาษา JavaScript ที่มีรูปแบบประเภทข้อมูลเป็นไดนามิกส์ (Dynamic typing) ดังนั้นในการประกาศตัวแปรในภาษา TypeScript เราจะต้องกำหนดประเภทข้อมูลให้กับตัวแปรด้วยเสมอ นี่สามารถช่วยลดความผิดพลาดในการใช้งานข้อมูลผิดประเภทในระหว่างที่พัฒนาโปรแกรมได้

นอกจากนี้ ภาษา TypeScript ยังมีระบบประเภทข้อมูล (Type systems) เป็นของมันเอง ซึ่งนี่สนับสนุนประเภทข้อมูลพื้นฐานต่างๆ ในภาษา JavaScript เช่น ตัวเลข String หรือ Boolean และยังมีรูปแบบประเภทข้อมูลที่เพิ่มเติมเข้ามาสำหรับสนับสนุนการเขียนโปรแกรม เช่น Enum Union type Function และ Interface เป็นต้น

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

Boolean

Boolean คือประเภทข้อมูลที่ใช้สำหรับเก็บค่าความจริงที่มีค่าเป็นไปได้เพียงสองค่านั่นคือ true และ false และมีชื่อของประเภทข้อมูลคือ boolean โดยปกติแล้ว Boolean มักจะใช้เพื่อเก็บข้อมูลที่มีสองสถานะ หรือค่าที่เป็นไปได้เพียงสองค่า ยกตัวอย่างเช่น เปิดหรือปิด ขาวหรือดำ สำเร็จหรือล้มเหลว ใช่หรือไม่ เป็นต้น

นี่เป็นตัวอย่างของโปรแกรมที่ถามว่างานของคุณเสร็จหรือยัง และเรากำหนดคำตอบไว้ในตัวแปร Boolean

let done: boolean = true;

if (done) {
    console.log("My work is done.");
} else {
    console.log("Not done yet."); 
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

My work is done.

ในตัวอย่าง เป็นการประกาศตัวแปรประเภท Boolean เพื่อเก็บสถานะว่างานของคุณเสร็จหรือยัง ถ้าหากเสร็จแล้วเราเก็บค่าเป็น true และ false หากไม่ใช่ และจะเห็นว่า Boolean นั้นสามารถใช้เป็น Expression ของคำสั่งควบคุม เช่น if for while หรือ do while ได้โดยตรง และโปรแกรมทำงานในบล็อคของคำสั่ง if เนื่องจากค่าในตัวแปร done เป็น true

มาดูอีกตัวอย่างในการใช้งาน Boolean ในตัวอย่างนี้ เราประกาศตัวแปร Boolean เพื่อเก็บสถานะของหลอดไฟว่ามันเปิดหรือปิดอยู่ และในโค้ดได้กำหนดค่าให้เป็น false ซึ่งหมายถึงไฟถูกปิดอยู่ นี่เป็นตัวอย่างของโปรแกรม

let lightOn: boolean = false;
console.log("The light is on: " + lightOn);

console.log("Turn on the light");
lightOn = true;
console.log("The light is on: " + lightOn);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

The light is on: false
Turn on the light
The light is on: true

ในตัวอย่างนี้ เราได้กำหนดค่าของตัวแปรเริ่มต้นเป็น false และแสดงค่าในตัวแปรออกทางหน้าจอ จากนั้นเปลี่ยนค่าของตัวแปรเป็น true เพื่อทำการเปิดไฟ และแสดงค่าในตัวแปรอีกครั้ง

เนื่องจาก Boolean มีค่าที่เป็นไปได้เพียงสองค่านั่นคือ true และ false นั่นทำให้เราสามารถใช้ตัวดำเนินการ Not (!) ที่หน้าตัวแปรในการสลับค่าของ Boolean ให้เป็นค่าที่ตรงกันข้ามได้ ยกตัวอย่างเช่น

lightOn = !lightOn;

ในคำสั่งนี้ถ้าหากค่าในตัวแปร lightOn เป็น true มันจะถูกเปลี่ยนให้เป็น false และถ้าหากค่าในตัวแปร lightOn เป็น false มันจะถูกเปลี่ยนให้เป็น true และนี่เป็นวิธีการใช้งาน Boolean ในเบื้องต้น

Number

Number หรือตัวเลข เป็นประเภทข้อมูลที่ใช้เก็บค่าที่สามารถนับหรือสามารถแสดงได้ในเชิงปริมาณและมีชื่อของประเภทข้อมูลคือ number ค่าของตัวเลขสามารถเป็นได้ทั้งจำนวนเต็มและทศนิยม ซึ่งในภาษา TypeScript นั้นตัวเลขจะไม่มีการแบ่งแยกระหว่าง Integer กับ Float เหมือนในบางภาษา เช่น ภาษา C# หรือ Java โดยทั้งหมดถือว่าเป็นข้อมูลในประเภท number

เมื่อข้อมูลของคุณเป็นตัวเลขที่สามารถนับได้ คุณสามารถเก็บมันในตัวแปรได้ในรูปแบบของจำนวนเต๋็ม ในตัวอย่างนี้ เราประกาศสองตัวแปรสำหรับเก็บจำนวนของผลไม้ที่มี นั่นคือแอปเปิ้ลและกล้วย

let apple: number = 2;
let banana: number = 3;

หรือเก็บข้อมูลในรูปแบบของทศนิยมสำหรับตัวเลขที่เป็นเศษส่วน เช่น ตัวเลขที่ใช้ในการคำนวณทางวิทยาศาสตร์ ระยะทาง หรือจำนวนเงิน เป็นต้น

let money: number = 37.5;
let distance: number = 1.6;

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

let apple: number = 2;
let banana: number = 3;
let sum: number = apple + banana;

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

let celsius = -10;
console.log(`Temperature outside is ${celsius} Celsius`);

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

let price: number = 18000;
let discount: number = 20; // percent
let reduced = discount / price * 100;
let actualCost: number = price - reduced;

console.log(`Computer price is ${price} THB`);
console.log(`Buy now get ${discount}% discount`);
console.log(`Actual cost for this computer is ${actualCost}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Computer price is 18000 THB
Buy now get 20% discount
Actual cost for this computer is 17999.89

ในตัวอย่างจะเห็นว่า ทุกข้อมูลที่เรามีเป็นตัวเลข ซึ่งตัวเลขนั้นสามารถนำมาคำนวณร่วมกับตัวดำเนินการเพื่อให้ได้รับค่าใหม่ได้ ในกรณีนี้สิ่งที่เราต้องการหาก็คือราคาที่ลดลงไป 20% จากนั้นนำมาลบออกจากราคาเต็มของคอมพิวเตอร์ก็จะได้คำตอบที่ต้องการ

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

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

let planckLength: number = -1.616255e-35;
let sunMass: number = 1.989e30;

console.log(`Length of the Planck: ${planckLength} Meters`);
console.log(`Mass of the sun: ${sunMass} Kilograms`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Length of the Planck: -1.616255e-35 Meters
Mass of the sun: 1.989e+30 Kilograms

ในตัวอย่างนี้ ค่าของตัวเลขที่เรากำหนดในตัวแปรนั้นมีค่าเท่ากับการเขียนในรูปแบบสัญญากรวิทยาศาสตร์โดยที่ e{n} หมายถึง การคูณด้วย 10 ยกกำลัง n ซึ่งมีผลลัพธ์ดังนี้

• ความยาวของพลังค์: -1.616255 x 10 ^ -35
• มวลของดวงอาทิตย์: 1.989 x 10 ^ 35

ในตัวอย่างที่ผ่านมาทั้งหมด การกำหนดค่าของตัวเลขให้กับตัวแปรถูกทำในฐาน 10 นอกจากนี้ ในภาษา TypeScript นั้นยังสนับสนุนการกำหนดค่าของตัวเลขในรูปแบบเลขฐาน 2 ฐาน 8 และฐาน 16 ได้ ยกตัวอย่างเช่น

let dec: number = 1534;
let bin: number = 0b10111111110;
let oct: number = 0o2776;
let hex: number = 0x5fe;

console.log(`dec: ${dec}`);
console.log(`bin: ${bin}`);
console.log(`oct: ${oct}`);
console.log(`hex: ${hex}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

dec: 1534
bin: 1534
oct: 1534
hex: 1534

นี่เป็นการกำหนดค่าให้กับตัวแปรในรูปแบบของเลขฐาน 2 ฐาน 8 ฐาน 16 และฐาน 10 ตามลำดับ ซึ่งทั้งหมดนี้มีค่าเท่ากับ 1534 ในเลขฐาน 10 และแต่ละเลขฐานจะขึ้นต้นด้วยตัวอักษรพิเศษต่อไปนี้

• ฐาน 2 ขึ้นต้นด้วย 0b
• ฐาน 8 ขึ้นต้นด้วย 0o
• ฐาน 16 ขึ้นต้นด้วย 0x
• ฐาน 10 ไม่มี

นีี่มีประโยชน์เป็นอย่างมากเมื่อคุณทำงานกับข้อมูลที่เก็บในรูปแบบของเลขฐานที่นอกจากฐานเลข 10 และสังเกตว่าเมื่อเราแสดงผลตัวเลขด้วยฟังก์ชัน console.log มันจะถูกแสดงในรูปแบบของเลขฐาน 10 เสมอ

String

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

let firstName: string = "Matteo";
let lastName: string = "Crisco";
console.log(firstName + " " + lastName);

เนื้อหาของ String สามารถที่จะมีได้ตั้งแต่หนึ่งตัวอักษร ว่างเปล่า หรือมีความยาวเป็นย่อหน้าก็ได้ ซึ่งความยาวของ String ที่สามารถเก็บได้ในภาษา TypeScript นั้นแทบจะไม่จำกัดความยาว

let ch: string = "A";
let color: string = "Blue";
let phrase: string = "The Lord is near to the brokenhearted and saves the crushed in spirit.";

และอย่างที่คุณเห็น String literal นั้นจะต้องอยู่ภายในเครื่องหมาย Double quote (") เสมอ อย่างไรก็ตาม ในภาษา TypeScript นั้นเราสามารถกำหนดค่าของ String ได้โดยการใช้สามเครื่องหมายที่แตกต่างกันดังนี้

let a: string = "marcuscode";
let b: string = 'marcuscode';
let c: string = `marcuscode`;

ในตัวอย่างนี้ เป็นการประกาศ String ที่มีค่าเดียวกันและให้ผลลัพธ์เช่นเดียวกัน แต่เราใช้เครื่องหมายที่แตกต่างกันในการกำหนด String literal ซึ่งแต่ละเครื่องหมายนั้นมีคุณสมบัติการทำงานที่แตกต่างกันดังนี้

• Double quote: เป็นรูปแบบพื้นฐานในการกำหนดค่าของ String และจะต้องทำการ Escape ตัวอักษรพิเศษบางตัวเพื่อใช้เป็นเนื้อหาของ String
• Single quote: การกำหนดค่าด้วยวิธีนี้จะทำให้ไม่ต้อง Escape ตัวอักษรพิเศษเหมือนกับวิธีก่อนหน้า ยกเว้นเครื่องหมาย Single quote เอง
• Back trick: หรือ Template string literal เป็นวิธีใหม่ในการกำหนดค่าให้กับ String ที่เปิดตัวใน ES6 ที่อนุญาติการแทนที่ใน String และแบบหลายบรรทัด โดยที่ไม่ต้องใช้ \n ในการขึ้นบรรทัดใหม่

ในบทเรียนนี้ เราจะใช้ Double quote ในการกำหนดค่า String literal เป็นหลัก สำหรับการใช้งาน String แบบละเอียดนั้นคุณจะได้เรียนรู้อีกครั้งในบทของ String

BigInt

BigInt คือประเภทข้อมูลที่ใช้เก็บตัวเลขขนาดใหญ่เกินกว่าประเภทข้อมูล number จะสามารถเก็บได้ ซึ่งชื่อของประเภทข้อมูลนี้คือ bigint ในการกำหนดค่าของตัวเลข BigInt นั้นสามารถทำได้สองวิธีคือจาก Number literal หรือจากฟังชันคอนสตรัคเตอร์ BigInt ยกตัวอย่างเช่น

let maxSafeInteger: bigint = 9007199254740991n;
let hugeNumber: bigint = BigInt(9007199254740991);
let hugeString: bigint = BigInt("9007199254740991");

ในการกำหนดค่าของ BigInt สามารถทำได้โดยต่อท้าย Literal ของตัวเลขด้วย n หรือสามารถระบุค่าเป็นตัวเลขหรือ String ผ่านคอนสตรัคเตอร์ได้ ตัวเลขประเภท BigInt ไม่ค่อยได้ใช้บ่อยนักในการเขียนโปรแกรมทั่วไป แต่ถ้างานของคุณต้องทำกับตัวเลขที่มีขนาดใหญ่ มันสามารถรับมือได้อย่างไม่มีปัญหา

Symbol

Symbol เป็นประเภทข้อมูลพื้นฐานที่สร้างจากฟังก์ชันคอนสรัคเตอร์ Symbol และมีชื่อประเภทข้อมูลเป็น symbol ทุก Symbol ที่ถูกสร้างขึ้นจะเป็นเอกลักษณ์เสมอและ Symbol มักจะถูกใช้เป็น Key ของออบเจ็คเพื่อป้องกันการเปลี่ยนแปลงค่าของ Key โดยไม่ได้ตั้งใจหรือจากโปรแกรมภายนอก นี่เป็นตัวอย่างของการสร้าง Symbol ในภาษา TypeScript

let sym1: symbol = Symbol();
let sym2: symbol = Symbol("symbol");
let sym3: symbol = Symbol("metin");

เพื่อสร้าง Symbol เราจะต้องทำผ่านฟังก์ชันคอนสรัคเตอร์ Symbol ฟังก์ชันนี้ให้เราสามารถส่ง String สำหรับอธิบาย Symbol ที่สร้างขึ้นได้ ซึ่งค่าดังกล่าวนี้ไม่มีผลใดๆ กับการทำงานของ Symbol

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

let a: symbol = Symbol();
let b: symbol = Symbol();

let c: symbol = Symbol("my_symbol");
let d: symbol = Symbol("my_symbol");

console.log("a === b", a === b);
console.log("c === d", c === d);

นีึ่เป็นผลลัพธ์การทำงานของโปรแกรม

false
false

จะเห็นว่าแม้ว่า String ที่ใช้อธิบาย Symbol มีค่าเหมือนกัน แต่ผลลัพธ์ของการเปรียบเทียบ Symbol คือจะแตกต่างกันเสมออย่างที่เราบอกไว้ในตอนต้น ซึ่งนี่เป็นวิธีการทำงานพื้นฐานของ Symbol

Undefined

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

let a: number;
let b: number = undefined;
console.log(a);
console.log(b);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

undefined
undefined

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

Null

Null เป็นค่าที่แสดงถึงการไม่มีอยู่ของข้อมูลหรือค่าว่างเปล่า null มักจะถูกใช้แทนค่าที่แสดงถึงการไม่มีอยู่ของออบเจ็ค และมีประเภทข้อมูลในภาษา TypeScript คือ null; ค่าของ Null สามารถกำหนดให้กับประเภทข้อมูลอื่นได้เหมือนกับ Undefined

ในการเขียนโปรแกรม เราใช้ null เพื่อแสดงถึงการไม่มีอยู่ของข้อมูล ยกตัวอย่างเช่น เรามีฟังก์ชัน getUser ที่สามารถส่งค่ากลับมาเป็นออบเจ็คของ User หรือ null ในกรณีที่ไม่พบ User ได้ นี่เป็นตัวอย่าง

type User = {
    id: number,
    name: string,
    introduce: () => void
};

function getUser(id: number): User {
    if (id == 1) {
        return {
            id: 1,
            name: "Metin",
            introduce: function () {
                console.log(`My name is ${this.name}`);
            }
        };
    }
    return null;
}

let user: User = getUser(1);
user.introduce();

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

My name is Metin

ในตัวอย่างนี้ เป็นการแสดงการใช้งานของค่า null ที่ทำงานร่วมกับข้อมูลประเภทอื่น เราได้ประกาศฟังก์ชัน getUser ที่ส่งค่ากลับเป็นออบเจ็คของ User หรืออาจจะเป็น null และอย่างที่คุณเห็น เราได้ประกาศค่าส่งกลับของฟังก์ชันและประเภทของตัวแปร user เป็น User และมันสามารถใช้สำหรับเก็บค่าที่เป็น null ได้

โค้ดในตัวอย่างนั้นทำงานได้เนื่องจากเมื่อพารามิเตอร์ที่ส่งไปยังฟังก์ชัน getUser เป็น 1 ส่งค่ากลับเป็นออบเจ็คของ User แต่นี่จะเปลี่ยนไปเมื่อเราส่งพารามิเตอร์ที่ส่งค่ากลับเป็น null ยกตัวอย่างเช่น

let user: User = getUser(2);
user.introduce();

ซึ่งนี่เป็นข้อผิดพลาดที่จะเราได้รับ หากเปลี่ยนพารามิเตอร์ที่ส่งไปยังฟังก์ชันเป็น 2

TypeError: Cannot read property 'introduce' of null

แต่ในตอนนี้ TypeScript ไม่ได้เตือนว่าข้อมูลที่ส่งกลับมานั้นสามารถเป็น null และเมื่อเรียกใช้งานเมธอด introduce ทำให้ได้รับข้อผิดพลาด เพื่อแก้ไขปัญหาเราจะต้องตรวจสอบค่าในตัวแปรก่อนการเรียกใช้งานเมธอดเหมือนกับที่ทำในภาษา JavaScript

อย่างไรก็ตาม เราสามารถกำหนดค่าให้ TypeScript ให้ไม่สามารถใช้งาน null ร่วมกับข้อมูลประเภทอื่นได้ โดยการระบุตัวเลือกในตอนคอมไพล์ด้วย --strictNullChecks นั่นหมายความว่าเมื่อเราคอมไพล์โค้ดนี้อีกครั้ง เราจะได้รับข้อผิดพลาดในตอนคอมไพล์

tsc nullable_user.ts --strictNullChecks

นี่เป็นข้อผิดพลาดที่เกิดขึ้นในระหว่างการคอมไพล์

error TS2322: Type 'null' is not assignable to type 'User'.

นี่จะทำให้ null ไม่สามารถใช้งานได้กับประเภทข้อมูลอื่นๆ และเพื่อทำให้มันสามารถใช้งานได้ เราจะต้องกำหนดประเภทข้อมูลในรูปแบบของ Union เป็น User | null แทน

ประเภทข้อมูลอื่น

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

อาเรย์

อาเรย์ (Array) เป็นประเภทข้อมูลที่ใช้สำหรับเก็บหลายค่าในตัวแปรเดียวกันแบบเป็นลำดับ และให้เข้าถึงข้อมูลดังกล่าวผ่านทาง Index อาเรย์นั้นเป็นออบเจ็คจากคลาส Array ที่ประกอบไปด้วยเมธอดที่สามารถใช้สำหรับทำงานกับข้อมูลในอาเรย์ นี่เป็นตัวอย่าง

let numbers: number[] = [10, 20, 30, 40, 50];
console.log(`Length of array: ${numbers.length}`);
numbers.forEach((value, index) => {
    console.log(`numbers[${index}] = ${value}`);
});

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Length of array: 5
numbers[0] = 10
numbers[1] = 20
numbers[2] = 30
numbers[3] = 40
numbers[4] = 50

ในการประกาศอาเรย์ เราระบุเครื่องหมาย [] หลังประเภทข้อมูลพื้นฐาน ในตัวอย่างนี้เราประกาศตัวแปร numbers สำหรับเก็บข้อมูลของตัวเลขในรูปแบบของอาเรย์ โดยระบุประเภทข้อมูลให้กับตัวแปรเป็น number[]

อาเรย์มี Property และเมธอดสำหรับอำนวยความสะดวกเพื่อทำงานกับอาเรย์ ในตัวอย่าง Property length ส่งค่ากลับเป็นจำนวนของสมาชิกในอาเรย์ และเมธอด forEach ใช้สำหรับวนรอบค่าของสมาชิกในอาเรย์โดยรับฟังก์ชัน Callback สำหรับทำงานกับค่าในอาเรย์

ออบเจ็ค

ออบเจ็คหรือ Object literal นั้นเป็นประเภทข้อมูลจากคลาส Object ที่เก็บข้อมูลในรูปแบบของ Key และ Value และมีประเภทข้อมูลเป็น object ในภาษา TypeScript นี่เป็นตัวอย่างของออบเจ็คที่เก็บข้อมูลของ User

let user: object = {
    id: 1,
    name: "Metin",
    isAdmin: true
};
console.log(user.id);

ในตัวอย่าง เราประกาศออบเจ็คที่ประกอบไปด้วยสาม Property ที่มีค่าเป็นประเภทข้อมูลพื้นฐานในภาษา TypeScript การใช้งานออบเจ็คทำให้เราสามารถเก็บข้อมูลหลายค่าในหนึ่งตัวแปรที่สามารถอ้างอิงได้ผ่าน Key ของมัน

ในภาษา TypeScript เราสามารถสร้าง type สำหรับอธิบายโครงสร้างของออบเจ็คได้ ในตัวอย่างนี้เป็นการประกาศประเภทข้อมูล User เพื่อกำหนด Key และประเภทข้อมูลที่แต่ละ Key ที่ออบเจ็คสามารถมีได้

type User = {
    id: number,
    name: string,
    isAdmin: boolean
};

let user: User = {
    id: 1,
    name: "Metin",
    isAdmin: true
};

และจากนั้นเราสามารถนำประเภทข้อมูลที่สร้างขึ้น User ไปใช้ในตัวประกาศตัวแปรแทน ดังนั้นค่าที่กำหนดให้กับตัวแปรนี้จะต้องปฏิบัติตามโครงสร้างที่ระบุโดย type User ที่เราได้ประกาศขึ้นมา

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

Function

ฟังก์ชัน (Function) เป๋็นอีกประเภทข้อมูลที่เก็บโค้ดที่เขียนขึ้นเพื่อเรียกใช้งานในภายหลัง เนื่องจากฟังก์ชันสามารถเก็บไว้ในตัวแปร ส่งผ่านพารามิเตอร์ หรือฟิลด์ของออบเจ็คได้ ดังนั้นจึงมีประเภทข้อมูลสำหรับฟังก์ชันในภาษา TypeScript คือ Function (ที่เริ่มต้นด้วยตัวพิมพ์ใหญ่) นี่เป็นตัวอย่างการประกาศฟังก์ชัน

let greet: Function = function (name) {
    console.log(`Hello ${name}`);
};
greet("John");

ในตัวอย่างนี้่ เราได้ประกาศตัวแปร greet สำหรับเก็บค่าที่เป็นฟังก์ชันเพื่อแสดงคำกล่าวทักทายชื่อที่ส่งเข้ามาออกทางหน้าจอ ในกรณีนี้ เมื่อตัวแปรมีค่าเป็นฟังก์ชันนั่นทำให้เราสามารถใช้มันเพื่อเรียกใช้เหมือนกับฟังก์ชันได้

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

type fnType = (a: number, b: number) => string;

let sum: fnType = function (a: number, b: number): number {
    return a + b;
};

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

หมายเหตุ: ทั้งฟังก์ชันที่ประกาศด้วยคำสั่ง function และ Arrow function เป็นประเภทข้อมูลเดียวกันในภาษา TypeScript นั่นคือ Function

อย่างไรก็ตาม คุณจะได้เรียนรู้เกี่ยวกับฟังก์ชันอย่างละเอียดอีกครั้งในบทของฟังก์ชันในภาษา TypeScript

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับประเภทข้อมูลในภาษา TypeScript ประเภทข้อมูลนั้นใช้เป็นข้อบังคับเกี่ยวกับข้อมูลที่ตัวแปรสามารถมีได้ ซึ่งการเขียนในโปรแกรมในภาษา TypeScript นั้นถูกออกแบบมาให้เข้มงวดในการใช้ประเภทข้อมูลที่ทำงานแบบ Static typing