TypeScript คือ ตอนที่ 1 : ตัวแปรแบบสแตติก (Static Typing) และประเภทข้อมูล (Data Types)

16พ.ค. 2023 by รับทำแอพ สบายไอที
  1. ตัวแปรแบบสแตติก (Static Typing) ใน TypeScript
  2. ตัวแปรใน TypeScript และประเภทข้อมูล
    2.1 ประเภทข้อมูลพื้นฐาน (Basic Data Types)
    2.2 อาร์เรย์ (Array)
    2.3 ทูเพิล (Tuple)
    2.4 เอนัม (Enum)
    2.5 Any
    2.6 Void
    2.7 เป็นโมฆะ (Null) และไม่ได้กำหนด (Undefined)
    2.8 Never
  3. ทำความเข้าใจเกี่ยวกับคอมไพเลอร์ (Compiler) TypeScript

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

1. ตัวแปรแบบสแตติก (Static Typing) ใน TypeScript

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

นี่คือตัวอย่างง่ายๆ ของการทำงานของตัวแปรแบบสแตติก (Static Typing) ใน TypeScript:

let name: string = "John";
name = 123; // Error: Type 'number' is not assignable to type 'string'

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

2. ตัวแปรใน TypeScript และประเภทข้อมูล

ใน TypeScript คุณสามารถใช้ let และ const เพื่อประกาศตัวแปรได้ เช่นเดียวกับใน JavaScript สมัยใหม่ คำletหลักใช้สำหรับตัวแปรที่สามารถเปลี่ยนแปลงได้ ในขณะที่ constใช้สำหรับตัวแปรที่คงที่ อย่างไรก็ตาม TypeScript ก้าวไปอีกขั้นด้วยการอนุญาตให้คุณระบุประเภทของตัวแปร

2.1 ประเภทข้อมูลพื้นฐาน (Basic Data Types)

TypeScript รองรับข้อมูลพื้นฐานหลายประเภท ลองดูที่บางส่วน:

Boolean: ประเภทข้อมูลพื้นฐานที่สุดคือค่าจริง/เท็จอย่างง่าย ซึ่ง JavaScript และ TypeScript เรียกว่า boolean

let isDone: boolean = false;

Number : เช่นเดียวกับใน JavaScript ตัวเลขทั้งหมดใน TypeScript เป็นค่าทศนิยม ตัวเลขทศนิยมเหล่านี้ได้รับnumberประเภท

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

String : อีกส่วนพื้นฐานในการทำเว็บและทำแอพคือการทำงานกับข้อมูลที่เป็นข้อความ เช่นเดียวกับภาษาอื่นๆ เราใช้ type string เพื่ออ้างถึงประเภทข้อมูลที่เป็นข้อความเหล่านี้

let color: string = "blue";

2.2 อาร์เรย์ (Array)

TypeScript เช่น JavaScript ช่วยให้คุณทำงานกับอาร์เรย์ของค่าต่างๆ ประเภท Array สามารถเขียนได้สองวิธี ในตอนแรก คุณใช้ประเภทขององค์ประกอบตามด้วย[]เพื่อแสดงอาร์เรย์ขององค์ประกอบประเภทนั้น:

let list: number[] = [1, 2, 3];

2.3 ทูเพิล (Tuple)

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

let x: [string, number];
x = ["hello", 10]; // OK

2.4 เอนัม (Enum)

ส่วนเพิ่มเติมที่เป็นประโยชน์ให้กับชุดประเภทข้อมูลมาตรฐานจาก JavaScript คือ enum เช่นเดียวกับในภาษาต่างๆ เช่น C# an enum เป็นวิธีตั้งชื่อที่จำง่ายให้กับ Set ของค่าตัวเลข

enum Color {
    Red,
    Green,
    Blue,
}
let c: Color = Color.Green;

ในตัวอย่างนี้ Color เป็น enum มีค่าที่เป็นไปได้สามค่า: Red, Green, Blueและ Enums เริ่มนับสมาชิกโดยเริ่มจาก 0 ซึ่งหมายความว่า Color.Red คือ 0 Color.Green คือ 1 และ Color.Blue คือ 2

2.5 Any

อาจมีบางสถานการณ์ที่เราไม่รู้ว่าเราจะจัดการกับข้อมูลประเภทใด หรือเราต้องการเลิกใช้การตรวจสอบประเภท ในกรณีเหล่านี้ เราสามารถใช้ประเภท any

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

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

2.6 Void

void เป็นเหมือนสิ่งที่ตรงกันข้ามกับ any การไม่มีประเภทใดๆ เลย void มักใช้เป็นประเภทการคืนค่าของฟังก์ชันที่ไม่ส่งกลับค่า:

warnUser(): void {
    console.log("This is a warning message");
}

2.7 เป็นโมฆะ (Null) และไม่ได้กำหนด (Undefined)

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

let u: undefined = undefined;
let n: null = null;

2.8 Never

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

function error(message: string): never {
    throw new Error(message);
}

3. ทำความเข้าใจเกี่ยวกับคอมไพเลอร์ (Compiler) TypeScript

เมื่อทำเว็บด้วย TypeScript หรือทำแอพ ส่วนประกอบที่สำคัญคือ TypeScript compiler (tsc) คอมไพเลอร์ TypeScript เป็นคอมไพเลอร์ต้นทาง (transpiler) ที่แปลงซอร์สโค้ด TypeScript (ไฟล์ .ts) เป็น JavaScript (ไฟล์ .js) คอมไพเลอร์รองรับ ES3, ES5 และ ES6/ES2015 ทุกรุ่น

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

ไฟล์ พื้นฐานtsconfig.jsonอาจมีลักษณะดังนี้:

{
    "compilerOptions": {
        "target": "es5",    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
        "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
        "strict": true,   /* Enable all strict type-checking options. */
        "outDir": "./dist",  /* Redirect output structure to the directory. */
    },
    "include": ["src/**/*"], /* Include files to be compiled. */
}

ในtsconfig.json ไฟล์ด้านบน:

  • target: สิ่งนี้จะบอกคอมไพเลอร์ว่าจะใช้ ECMAScript เวอร์ชันใดเป็นเป้าหมายเมื่อสร้างเอาต์พุต หากคุณกำหนดเป้าหมายเบราว์เซอร์สมัยใหม่ คุณอาจเลือกes5หรือes6
  • module: สิ่งนี้จะบอกคอมไพเลอร์ว่าใช้ระบบโมดูลใด หากคุณใช้ Node.js คุณอาจcommonjsเลือก
  • strict: สิ่งนี้ทำให้ลักษณะการตรวจสอบประเภทที่หลากหลายสามารถตรวจจับปัญหาที่อาจเกิดขึ้นได้มากขึ้น
  • outDir: สิ่งนี้จะบอกคอมไพเลอร์ว่าจะวางไฟล์เอาต์พุตไว้ที่ใด
  • include: สิ่งนี้จะบอกคอมไพเลอร์ว่าไฟล์ใดที่จะรวมไว้ในการคอมไพล์

คุณสามารถปรับแต่งtsconfig.jsonไฟล์ให้เหมาะกับความต้องการของโครงการได้ คอมไพเลอร์ TypeScript มาพร้อมกับรายการตัวเลือกที่ครอบคลุมซึ่งคุณสามารถใช้เพื่อควบคุมกระบวนการคอมไพล์

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

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

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

TypeScript คืออะไร

TypeScript คือ ตอนที่ 2 : การเขียนโปรแกรมเชิงวัตถุ (OOP)