TypeScript 101

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

ทำไมต้อง TypeScript ?

          ต้องเริ่มกันที่ว่าแต่เดิมนั้น JavaScript เป็นภาษาที่ใช้งานง่าย เช่นการที่ตัวแปรไม่ต้องระบุชนิดว่าจะเป็น int, string, bool ฯลฯ อะไรแบบนั้น คือตัวแปรของ JavaScript พอประกาศไว้แล้วครั้งนึงด้วย  var หรือ let เราก็สามารถกำหนดข้อมูลชนิดใดๆให้กับมันก็ได้ แต่แน่นอนว่ามีข้อดีก็ต้องมีข้อเสีย เพราะไม่อย่างนั้นแล้วในภาษาโปรแกรมอื่นๆคงไม่มีการบังคับให้ต้องระบุชนิดของตัวแปรกันหรอก ด้วยความที่ JavaScript เป็นภาษาที่ใช้งานง่าย ในความง่ายนี้นี่แหละที่ทำให้เกิดความยุ่งยากตามมา อย่างเช่นพอเราเขียนโค้ดไปเป็นจำนวนมากขึ้นๆ ถ้าไม่มีการทำ document อธิบายแต่ละฟังก์ชันไว้ดีๆ ในตอนหลังเราอาจจะลืมว่าฟังก์ชันไหนต้องการ input เป็นตัวแปรชนิดอะไร หรือตอนที่เราทดสอบโปรแกรมของเรา เราอาจจะไม่ได้คิดไว้เผื่อในกรณีที่ input เป็นชนิดตัวแปรที่ไม่ถูกต้อง จนอาจทำให้โปรแกรมของเราพังได้เลยทีเดียว

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

ตัวอย่างการใช้งาน TypeScript ที่ลดปัญหาเดิม ๆ สุดน่าเบื่อ

Static Typing และ Compile ก่อนใช้งาน

static typing หรือ strictly typed หรือ static typed อะไรก็แล้วแต่ เหล่านี้หมายถึงการที่ TypeScript กำหนดให้เราต้องระบุชนิดของตัวแปรต่างๆตั้งแต่ตอนที่ประกาศว่าจะให้เป็น int, string, bool ฯลฯ ซึ่งช่วยแก้ปัญหาเดิมของ JavaScript ที่เป็นไม่บังคับให้ระบุ type ของตัวแปร

JS

let s = "hello world!";
console.log(s);
s = 5432;
console.log(s);

hello world!
5432

TS

let s: string = "hello world!";
console.log(s);
s = 5432;
console.log(s);

TSError: ⨯ Unable to compile TypeScript:
index.ts:3:1 - error TS2322: Type '5432' is not assignable to type 'string'.

จะเห็นว่าตัวแปร s ใน JavaScript ที่ตอนแรกเป็น string พอกำหนดค่าใหม่เป็นตัวเลยให้ โค้ดก็ยังทำงานได้ตามปกติ สามารถ console.log ออกมาได้ทั้งตอนที่เป็น string เละเป็น int ต่างกับ TypeScript ที่ error แจ้งเตือนมาโดยที่ยังไม่ทันได้แสดงผลอะไรออกมาเลย นั่นก็มาจากการที่ TypeScript นั้น compile ก่อนที่จะรันเลยแจ้ง error ที่เกิดขึ้นออกมา ตรงจุดนี้ทั้งเรื่องการบังคับชนิดตัวแปรและการที่ต้องคอมไพล์ก่อนเสมอ จึงทำให้โค้ดของเรามีความรัดกุมมากขึ้น ไม่ต้องรอจนนำไปใช้จริงและได้ผลลัพธ์ที่ผิดพลาด

กำหนดชนิดของ Array ได้

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

JS

let prices  = [];
prices.push(10);
prices.push(8);
prices.push(40);
prices.push("five");
 
for (let i = 0; i < prices.length; i++){
 console.log("item " + i + " : " + prices[i] * 1.07 + " baht");
}

item 0 : 10.700000000000001 baht 
item 1 : 8.56 baht 
item 2 : 42.800000000000004 baht 
item 3 : NaN baht

จะเห็นว่าถ้ามีการใส่ข้อมูลที่ไม่ใช่ตัวเลขเข้าไปใน array ก็อาจจะทำให้เกิดข้อผิดพลาดตอนนำไปใช้ได้ ซึ่งตอนที่ push ข้อมูลเข้าไปไม่มี error อะไรเลย

TS

let prices : number[] = [];
prices.push(10);
prices.push(8);
prices.push(40);
prices.push("five");
 
for (let i : number = 0; i < prices.length; i++){
 console.log("item " + i + " : " + prices[i] * 1.07 + " baht");
}

error TS2345: Argument of type '"five"' is not 
assignable to parameter of type 'number'

ในTypeScript จะส่ง error ออกมาบอกตั้งแต่ที่พยายามเพิ่ม string เข้าไปใน array ที่สร้างไว้เก็บตัวเลข

แต่ถ้าเราอยากจะเก็บข้อมูลหลายชนิดรวมกันเราก็ยังทำได้ด้วยการระบุเป็น Any ตามโค้ดด้านล่างนี้เลย

let product1 : any[] = [];
product1.push(1);
product1.push("hello");
product1.push(true);

Access Modifiers

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

TS

class Persion {
   public name: string;
   private age: number;
   constructor(name: string, age: number) {
       this.name = name;
       this.age = age;
   }
   say() {
       return "My name is " + this.name;
   }
   howOld() {
       return "I'm " + (this.age - 5);
   }
}
 
let bob = new Persion("Bob", 25);
console.log(bob.say());		// My name is Bob
console.log(bob.howOld());	// My name is Bob
console.log(bob.age);		// error TS2341: Property 'age' is private and only accessible within class 'Persion'

สรุปข้อดี ข้อเสีย หรือ เรื่องที่ต้องกังวล

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

ถ้าใครได้อ่านแล้วสนใจในข้อดีของ TypeScript ก็ลองเข้าไปอ่านเพิ่มเติมได้ที่เว็บไซต์ official ได้เลยที่ www.typescriptlang.org หรือจะลองเล่นดูก่อนในเว็บก็มี playground ให้ลองเล่นได้เช่นกัน