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

บทความนี้อธิบายประเภทข้อมูลใน TypeScript

YouTube Video

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

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

ประเภทดั้งเดิม

ประเภท number

1let age: number = 25;
2console.log(age);          // Outputs: 25
3console.log(typeof age);    // Outputs: number

• number เป็นชนิดข้อมูลที่ใช้ในการจัดการค่าตัวเลข รวมถึงจำนวนเต็มและตัวเลขทศนิยม การจัดการค่าที่เกินขีดจำกัดบางอย่างจะส่งผลให้ได้ค่า Infinity หรือ NaN (Not-a-Number)

1// Decimal calculations
2console.log(0.1 + 0.2 === 0.3); // false
3console.log(0.1 + 0.2); // 0.30000000000000004
4
5// Calculations with large numbers
6console.log(9007199254740991 + 1); // correct value
7console.log(9007199254740991 + 2); // incorrect value

• ใน TypeScript ตัวเลขจะถูกแสดงเป็นตัวเลขทศนิยมแบบ floating point ซึ่งอาจทำให้เกิดความคลาดเคลื่อนเล็กน้อยในผลการคำนวณ

• เมื่อจำเป็นต้องใช้การคำนวณที่แม่นยำ เช่นจำนวนเงินทางการเงิน จำเป็นต้องหลีกเลี่ยงข้อผิดพลาดในการปัดเศษลักษณะนี้ ตัวอย่างเช่น คุณสามารถใช้ BigInt หรือ toFixed() หรือปรับตำแหน่งทศนิยมด้วยไลบรารีเช่น decimal.js

ประเภท string

ประเภท string ใช้จัดการข้อมูลที่เป็นข้อความ

1let greeting: string = "Hello, TypeScript!";
2console.log(greeting);     // Outputs: Hello, TypeScript!
3console.log(typeof greeting);  // Outputs: string

ประเภท boolean (ประเภทเชิงตรรกะ)

ประเภท boolean มีค่าได้สองค่า: true หรือ false

1let isOpen: boolean = true;
2console.log(isOpen);       // Outputs: true
3console.log(typeof isOpen);    // Outputs: boolean

null และ undefined

null แทนค่าที่ 'ไม่มีอยู่' และ undefined แทนค่าที่ 'ไม่ได้กำหนด'

1let emptyValue: null = null;
2let notDefined: undefined = undefined;
3
4console.log(emptyValue);       // Outputs: null
5console.log(typeof emptyValue);    // Outputs: object (JavaScript specification)
6
7console.log(notDefined);       // Outputs: undefined
8console.log(typeof notDefined);    // Outputs: undefined

Array

ใน TypeScript คุณสามารถกำหนดประเภทขององค์ประกอบในอาร์เรย์ได้ number[] คืออาร์เรย์ของตัวเลข และ string[] คืออาร์เรย์ของสตริง

1let numbers: number[] = [1, 2, 3, 4];
2console.log(numbers);        // Outputs: [1, 2, 3, 4]
3console.log(typeof numbers); // Outputs: object
4
5let words: string[] = ["TypeScript", "JavaScript"];
6console.log(words);          // Outputs: ["TypeScript", "JavaScript"]
7console.log(typeof words);   // Outputs: object

Tuple

Tuple คืออาร์เรย์ที่มีองค์ประกอบซึ่งมีประเภทต่างกัน

1let person: [string, number] = ["Alice", 30];
2console.log(person);         // Outputs: ["Alice", 30]
3console.log(typeof person);  // Outputs: object

Enum

enum ใช้สำหรับกำหนดชุดค่าคงที่ที่มีชื่อ

1enum Color {
2    Red,
3    Green,
4    Blue
5}
6
7let favoriteColor: Color = Color.Green;
8console.log(favoriteColor);  // Outputs: 1 (Defaults start from 0)
9console.log(typeof favoriteColor); // Outputs: number

any

ประเภท any สามารถเก็บค่าประเภทใดก็ได้ และใช้เมื่อคุณต้องการปิดการตรวจสอบประเภท

1let anything: any = "Hello";
2console.log(anything);       // Outputs: Hello
3console.log(typeof anything);    // Outputs: string
4
5anything = 42;
6console.log(anything);       // Outputs: 42
7console.log(typeof anything);    // Outputs: number

ประเภท Union

การใช้ประเภท Union คุณสามารถกำหนดตัวแปรที่เก็บค่าซึ่งเป็นหนึ่งในหลายประเภทได้

1let identifier: number | string = "ID_12345";
2console.log(identifier);     // Outputs: ID_12345
3console.log(typeof identifier);  // Outputs: string
4
5identifier = 12345;
6console.log(identifier);     // Outputs: 12345
7console.log(typeof identifier);  // Outputs: number

สรุป

• number, string, boolean: ประเภทพื้นฐาน
• null, undefined: ค่าพิเศษ
• อาร์เรย์: อาร์เรย์ที่มีคำอธิบายประเภท
• Tuple: อาร์เรย์ที่มีองค์ประกอบหลากหลายประเภท
• enum: ประเภทที่เป็นค่าที่กำหนดไว้ล่วงหน้า
• any: ชนิดข้อมูลใดก็ได้
• Union: ตัวแปรที่สามารถรับค่าได้หลายประเภท

ด้วยการใช้ชนิดข้อมูลเหล่านี้ TypeScript ช่วยเพิ่มความปลอดภัยของชนิดข้อมูล ทำให้ป้องกันข้อผิดพลาดได้ง่ายขึ้นในระหว่างการพัฒนา

วัตถุห่อหุ้ม

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

ใน JavaScript (และ TypeScript) มี wrapper objects ที่สอดคล้องกับชนิดข้อมูลพื้นฐาน เช่น string, number, และ boolean ออบเจ็กต์เหล่านี้ถูกสร้างขึ้นโดยใช้ฟังก์ชั่นคอนสตรัคเตอร์ที่เรียกว่า String, Number, และ Boolean ตามลำดับ

ด้านล่างนี้คือตัวอย่างของ wrapper objects

String Object

ออบเจ็กต์ String มีพร็อพเพอร์ตี้และเมธอดสำหรับสตริง

1let strPrimitive: string = "Hello, World!";
2let strObject: String = new String("Hello, World!");
3
4console.log(strPrimitive);         // Outputs: Hello, World!
5console.log(typeof strPrimitive);  // Outputs: string
6
7console.log(strObject);            // Outputs: [String: 'Hello, World!']
8console.log(typeof strObject);     // Outputs: object

คุณสมบัติ:

• ต่างจาก string แบบพื้นฐาน ออบเจ็กต์ String จะถูกพิจารณาเป็น object โดย typeof
• Wrapper objects มีประโยชน์เมื่อมีการจัดการสตริงหรือเรียกใช้งานเมธอด

Number Object

ออบเจ็กต์ Number มีพร็อพเพอร์ตี้และเมธอดสำหรับตัวเลข

1let numPrimitive: number = 42;
2let numObject: Number = new Number(42);
3
4console.log(numPrimitive);         // Outputs: 42
5console.log(typeof numPrimitive);  // Outputs: number
6
7console.log(numObject);            // Outputs: [Number: 42]
8console.log(typeof numObject);     // Outputs: object

คุณสมบัติ:

• ออบเจ็กต์ Number ซึ่งเป็น wrapper สำหรับตัวเลข รวมถึงเมธอดสำหรับการจัดการทางตัวเลข (เช่น toFixed)

Boolean Object

ออบเจ็กต์ Boolean มีพร็อพเพอร์ตี้และเมธอดสำหรับค่า boolean

1let boolPrimitive: boolean = true;
2let boolObject: Boolean = new Boolean(true);
3
4console.log(boolPrimitive);        // Outputs: true
5console.log(typeof boolPrimitive); // Outputs: boolean
6
7console.log(boolObject);           // Outputs: [Boolean: true]
8console.log(typeof boolObject);    // Outputs: object

คุณสมบัติ:

• ออบเจ็กต์ Boolean เป็น wrapper สำหรับชนิดข้อมูลพื้นฐาน boolean และถูกพิจารณาเป็น object

ความแตกต่างระหว่าง Wrapper Objects และชนิดข้อมูลพื้นฐาน

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

1let numPrimitive: number = 123;
2let numObject: Number = new Number(123);
3
4console.log('==  : ', numPrimitive == numObject);  // Outputs: true (Value comparison)
5console.log('=== : ', numPrimitive === numObject); // Outputs: false (Due to differing types)

คุณสมบัติ:

• == เปรียบเทียบค่า ในขณะที่ === เปรียบเทียบอย่างเข้มงวดรวมถึงชนิดข้อมูล === ให้ค่า false เมื่อเปรียบเทียบวัตถุห่อหุ้ม (wrapper objects) กับประเภทข้อมูลแบบดั้งเดิม (primitive types)

การแปลงชนิดข้อมูล

ใน TypeScript การจัดการ การแปลงชนิดข้อมูลโดยนัย และ การแปลงชนิดข้อมูลแบบชัดเจน อย่างเหมาะสมเป็นสิ่งสำคัญ

การแปลงชนิดข้อมูลโดยนัย

• ใน TypeScript ควรหลีกเลี่ยงการแปลงชนิดข้อมูลโดยนัยให้มากที่สุดเท่าที่เป็นไปได้เพื่อรับรองความปลอดภัยของชนิดข้อมูล

1const result: string = 5 + "5"; // "55" (the number is converted to a string)
2
3console.log(result);

• ในตัวอย่างนี้ ตัวเลข 5 ถูกแปลงชนิดข้อมูลโดยนัยเป็นสตริง ส่งผลให้ได้สตริงเป็น "55"

การแปลงชนิดข้อมูลแบบชัดเจน

• ใน TypeScript ใช้คำอธิบายชนิดข้อมูลหรือฟังก์ชันแปลงชนิดข้อมูลเพื่อดำเนินการแปลงชนิดข้อมูลอย่างปลอดภัย

1const num: string = "123";
2const convertedNum: number = Number(num); // Converts "123" to the number 123
3
4console.log(typeof num);
5console.log(typeof convertedNum);

• ในตัวอย่างนี้ ฟังก์ชัน Number() ถูกใช้เพื่อแปลงสตริง "123" เป็นตัวเลข 123 อย่างชัดเจน

การตรวจสอบชนิดข้อมูล

ใน TypeScript คุณสามารถใช้ตัวดำเนินการ typeof เพื่อตรวจสอบชนิดข้อมูลของตัวแปร

 1// Output: The type of 42 is: number
 2console.log('The type of 42             is:', typeof 42);
 3
 4// Output: The type of 42 is: bigint
 5console.log('The type of 42n            is:', typeof 42n);
 6
 7// Output: The type of "hello" is: string
 8console.log('The type of "hello"        is:', typeof "hello");
 9
10// Output: The type of true is: boolean
11console.log('The type of true           is:', typeof true);
12
13// Output: The type of undefined is: undefined
14console.log('The type of undefined      is:', typeof undefined);
15
16// Output: The type of null is: object
17console.log('The type of null           is:', typeof null);
18
19// Output: The type of Symbol() is: symbol
20console.log('The type of Symbol()       is:', typeof Symbol());
21
22// Output: The type of {} is: object
23console.log('The type of {}             is:', typeof {});
24
25// Output: The type of function () {} is: function
26console.log('The type of function () {} is:', typeof function () {});

• ใน TypeScript คุณสามารถใช้ typeof เพื่อตรวจสอบชนิดข้อมูล แต่สำหรับการตรวจสอบชนิดข้อมูลที่แม่นยำยิ่งขึ้น ขอแนะนำให้ใช้ตัวดำเนินการ instanceof หรือ is เพิ่มเติม

สรุป

• วัตถุห่อหุ้ม (Wrapper Objects) ได้รับการปฏิบัติเป็นออบเจกต์ เนื่องจากพวกมันมีวิธีการ (methods) และคุณสมบัติ (properties) เพิ่มเติมสำหรับประเภทข้อมูลแบบดั้งเดิม (primitive types)
• String, Number และ Boolean เป็นตัวอย่างที่แสดงถึงวัตถุห่อหุ้ม (wrapper objects)
• ต่างจากประเภทข้อมูลแบบดั้งเดิม (primitive types) วัตถุห่อหุ้ม (wrapper objects) จะถูกระบุว่าเป็น object โดยคำสั่ง typeof

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video