Articles
แนะนำ TypeScript
พื้นฐานของ TypeScript

พื้นฐานของ TypeScript

บทความนี้อธิบายพื้นฐานของ TypeScript

YouTube Video

การรัน "Hello World!"

ก่อนอื่น เราจะรันตัวอย่าง "Hello World!" แบบคลาสสิกใน TypeScript โดยใช้ Visual Studio Code

npm install -g typescript

ติดตั้ง typescript โดยใช้คำสั่ง npm

สร้างไฟล์ tsconfig.json

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

สร้างไฟล์ .vscode/launch.json เพื่อรันไฟล์ main.ts ใน Visual Studio Code

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

สร้างไฟล์ main.ts เพื่อแสดงข้อความ "Hello World!" คุณสามารถรันใน Visual Studio Code โดยกดปุ่ม F5

1console.log("Hello World!");

ด้วยการกำหนดค่าแบบนี้ คุณสามารถรันไฟล์ TypeScript ได้ภายใน VSCode

ภาพรวมของ TypeScript

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

การกำหนดชนิดข้อมูลแบบ Static

  • TypeScript เพิ่มการกำหนดชนิดข้อมูลให้กับ JavaScript และทำการตรวจสอบชนิดข้อมูลในระหว่างการคอมไพล์ ช่วยป้องกันข้อผิดพลาดที่เกี่ยวข้องกับชนิดข้อมูลล่วงหน้า
1let message: string = "Hello, TypeScript";
2console.log(message);

การคอมไพล์

  • เนื่องจาก TypeScript ไม่สามารถรันโดยตรงในเบราว์เซอร์ได้ จึงต้องถูกแปลงเป็น JavaScript ก่อน ใช้ tsc (TypeScript Compiler) เพื่อแปลงไฟล์ TS เป็นไฟล์ JS

การกำหนดชนิดข้อมูลแบบตัวเลือก

  • TypeScript มีความสามารถในการคาดเดาชนิดข้อมูล และยังอนุญาตให้คุณกำหนดชนิดข้อมูลอย่างชัดเจนเมื่อจำเป็น ช่วยปรับปรุงความเข้าใจและความเสถียรของโค้ด
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

อินเตอร์เฟซ (Interfaces)

  • TypeScript มี interface เพื่อกำหนดโครงสร้างของออบเจ็กต์ ช่วยให้ควบคุมโครงสร้างของออบเจ็กต์ได้อย่างเข้มงวด
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

คลาส (Classes)

  • TypeScript ให้ส่วนขยายสำหรับไวยากรณ์ของคลาสใน JavaScript และรองรับการสืบทอด (inheritance), ตัวกำหนดการเข้าถึง (public, private, protected), และคลาสแบบนามธรรม (abstract classes)
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

เจเนอริก (Generics)

  • ใน TypeScript คุณสามารถเขียนโค้ดที่นำกลับมาใช้ใหม่ได้และมีความปลอดภัยของประเภทข้อมูล (type-safe) โดยใช้เจเนอริก
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

ระบบนิเวศ (Ecosystem)

  • TypeScript เข้ากันได้อย่างสมบูรณ์กับระบบนิเวศของ JavaScript และสามารถใช้งานโค้ด JavaScript ที่มีอยู่ได้โดยตรง นอกจากนี้ TypeScript ยังถูกรวมเข้ากับไลบรารีที่ได้รับความนิยม เช่น React และ Node.js

เครื่องมือสำหรับนักพัฒนา (Developer Tools) ที่ทรงพลัง

  • TypeScript มีฟีเจอร์ขั้นสูง เช่น การเติมอัตโนมัติ (autocomplete), การสนับสนุนการปรับโครงสร้างโค้ด (refactoring support), และการตรวจสอบข้อผิดพลาดในโปรแกรมแก้ไขอย่าง VSCode

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

ตัวแปร (Variables) ใน TypeScript

นี่คือการอธิบายแนวคิดพื้นฐานและการใช้งานตัวแปรใน TypeScript

การประกาศตัวแปร (Variable Declaration)

ใน TypeScript ตัวแปรจะถูกประกาศโดยใช้คำสำคัญสามคำ ได้แก่ let, const, และ var แต่ละคำสำคัญมีลักษณะเฉพาะที่แตกต่างกัน

ตัวอย่างของ let:

let มีขอบเขตในบล็อก (ใช้ได้เฉพาะภายในวงเล็บปีกกา {}) ค่าของ let สามารถเปลี่ยนแปลงได้ในภายหลัง

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

ตัวอย่างของ const:

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

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

ตัวอย่างของ var:

var มีขอบเขตฟังก์ชัน (function scope) และสามารถเปลี่ยนค่าที่กำหนดใหม่ได้ อย่างไรก็ตาม การไม่สนใจขอบเขตบล็อก อาจทำให้เกิดพฤติกรรมที่ไม่คาดคิดเมื่อเปรียบเทียบกับ let หรือ const

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

การกำกับชนิดข้อมูล (Type Annotations)

ใน TypeScript คุณสามารถระบุประเภทของตัวแปรได้อย่างชัดเจน TypeScript รองรับการเดาประเภท แต่การระบุประเภทช่วยในสถานการณ์ที่ซับซ้อน

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

ตัวแปรที่ยังไม่ได้กำหนดค่าเริ่มต้น

หากตัวแปรถูกประกาศโดยไม่ได้กำหนดค่าเริ่มต้น จะถูกกำหนดค่าเป็น undefined โดยค่าเริ่มต้น ตัวแปรที่ประกาศด้วย let ต้องกำหนดค่าเป็น undefined อย่างชัดเจนหรือรวม undefined ไว้ในประเภทของมันหากยังไม่ได้กำหนดค่าเริ่มต้น

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

ขอบเขตของตัวแปร

let และ const มีขอบเขตแบบบล็อก ดังนั้นจะใช้งานได้เฉพาะในบล็อกเดียวกัน

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

การโฮสต์ตัวแปร

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

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • ในกรณีนี้ ตัวแปรที่ถูกประกาศด้วย var จะถูกโฮสต์ และค่าของมันจะถูกแสดงออก
1console.log(b); // ReferenceError
2let b = 20;
  • ตัวแปรที่ประกาศด้วย let จะไม่ถูกโฮสต์ และจะทำให้เกิดข้อผิดพลาด

สรุป

ต่อไปนี้คือสรุปของ let, const, และ var

  • let สามารถกำหนดค่าใหม่ได้และมีขอบเขตในบล็อก
  • const ไม่สามารถกำหนดค่าใหม่ได้และมีขอบเขตในบล็อก
  • var สามารถกำหนดค่าใหม่ได้และมีขอบเขตในฟังก์ชัน
  • ทั้งหมดนี้อนุญาตให้ใช้การบันทึกชนิดแบบระบุชัดเจนสำหรับการกำหนดชนิดของตัวแปร

อักขระหลีกใน TypeScript

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

ตัวอย่างเช่น ใช้ \n เพื่อแสดงข้อความที่มีการย่อหน้าใหม่

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

การหลีกอักขระพิเศษ

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

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

การหลีกเครื่องหมายแบ็กสแลชเอง

ในการรวมเครื่องหมายแบ็กสแลชในตัวอักษร คุณต้องเขียนเป็นแบ็กสแลชคู่

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

การหลีก Unicode และเลขฐานสิบหก

ใน TypeScript, รหัส Unicode สามารถแทนได้ด้วยการใช้อักขระหลีก

ลำดับการหลีกแบบ Unicode

คุณสามารถแทนอักขระ Unicode ได้โดยการระบุเลขฐานสิบหก 4 หลักหลัง \u

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

การหลีกเลขฐานสิบหก

คุณสามารถแทนอักขระเฉพาะเจาะจงโดยการใช้เลขฐานสิบหก 2 หลักหลัง \x

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Template Literals และอักขระหลีก

Template literals ถูกกำหนดโดยการล้อมด้วยแบ็คทิกส์ และช่วยให้การสร้างข้อความแบบมีตัวแปรฝังอยู่หรือข้อความหลายบรรทัดทำได้ง่ายขึ้น อักขระหลีกทั่วไปสามารถใช้ได้โดยตรงใน template literals

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

กรณีพิเศษ

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

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

ตัวอย่างการใช้งานในทางปฏิบัติ

นี่คือตัวอย่างการสร้างข้อความซับซ้อนโดยใช้อักขระหลีก

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

ในตัวอย่างนี้, \n ถูกใช้สำหรับย่อหน้าใหม่ และ \t ถูกใช้เพื่อเพิ่มระยะห่าง สิ่งนี้ทำให้โครงสร้าง JSON อ่านได้ง่ายขึ้น

สรุป

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

เวอร์ชันของ TypeScript

มาดูภาพรวมของเวอร์ชัน TypeScript กัน

  1. TypeScript 1.0 (2014)

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

  2. TypeScript 2.0 (2016)

    มีการแนะนำ Non-nullable Types, Control Flow Analysis, Read-only Properties, และประเภท Never ซึ่งช่วยเพิ่มประสิทธิภาพการเดาประเภท

  3. TypeScript 3.0 (2018)

    ระบบประเภทที่ยืดหยุ่นมากขึ้นถูกแนะนำ พร้อมฟีเจอร์ต่างๆ เช่น Project References, การขยาย Tuple Types และการปรับปรุง Rest Parameters

  4. TypeScript 4.0 (2020)

    ฟีเจอร์ต่างๆ เช่น Variadic Tuple Types, การปรับปรุงตัวแก้ไข, การเพิ่มประสิทธิภาพการเดาประเภท, และ Labelled Tuple Elements ถูกเพิ่มเข้ามาเพื่อปรับปรุงประสบการณ์การพัฒนา

  5. TypeScript 4.1 (2020)

    มีการแนะนำ Template Literal Types ซึ่งทำให้การจัดการประเภทสตริงทรงพลังมากยิ่งขึ้น

  6. TypeScript 4.3 (2021)

    การเพิ่มคีย์เวิร์ด Override, การปรับปรุงตัวปรับเปลี่ยนการเข้าถึงในผู้สร้าง, และการสนับสนุนประเภทที่ดียิ่งขึ้นสำหรับ WeakMap และ WeakSet

  7. TypeScript 4.5 (2021)

    ได้เพิ่มประเภท Awaited, ModuleSuffixes, และการปรับปรุงความเข้ากันได้กับโมดูล ECMAScript

  8. TypeScript 5.0 (2023)

    มีการมาตรฐานของ Decorators, การปรับปรุงความเร็วในการสร้างโปรเจ็กต์, การเสริมประสิทธิภาพของระบบประเภท, และการสนับสนุนคุณสมบัติ ECMAScript ล่าสุด

TypeScript พัฒนาขึ้นเรื่อย ๆ โดยมีการปล่อยเวอร์ชันใหม่หลายครั้งในแต่ละปี ซึ่งเพิ่มฟีเจอร์ใหม่และการปรับปรุง

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

YouTube Video

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