TypeScript (What is TypeScript ?)

มีน้องๆ ชอบมาถามว่า พี่ๆ TypeScript มันคืออะไรอ่า ???
โอเคจัดไป เดี๋ยวจะสรุปสั้นๆ ให้ได้ใจความให้ฟังครับ

ลองดูรูปนี้ก่อนครับ

What is TypeScript ?

ก็คือเราสามารถกำหนดประเภทให้กับตัวแปร(variables)และสมาชิกภายคลาส(class members) ได้ และยังรวบรวมความสามารถที่ ES5 เดิมที่มีอยู่แล้ว TypeScript ก็ยังเพิ่มความสามารถเข้าไปอีกอย่างเช่นพวก Enum, Interface, Generic และยังทำให้การเขียนโปรแกรมอยู่ในรูปของ oop อีกด้วย

** ES ย่อมาจาก ECMAScript
ECMAScript ก็คือชื่อของมาตราฐาน JavaScript

บริษัทที่สร้างภาษา TypeScript ก็คือ Microsoft นั่นเองงง ….^^
แล้วคนที่สร้างหล่ะคือใคร ก็คือ Anders Hejlsberg และทีมงาน
จริงๆแล้วพี่แก..ตอนอยู่บริษัท Borland สร้าง pascal กับ delphi
มาอยู่บริษัท Microsoft พี่แกเป็น Team lead ในการออกแบบภาษา Typescript

อ้างอิง: https://en.wikipedia.org/wiki/Anders_Hejlsberg

จริงๆ แล้ว TypeScript มันก็คือ JavaScript นั่นแหละ มันก็เหมือนเป็น superset ของ JavaScript ซึ่งหมายความว่า แปลงโค้ดที่เราเขียนด้วย typescript ให้เป็น JavaScript อีกที
..
แล้วจะแปลงทำไม ? เหตุผลก็คือ เว็บเบราเซอร์ ไม่รู้จักหรอกว่า TypeScript (.ts) มันคือไฟล์นามสกุล(.extension)อะไรไงครับโผมมมมมม

เราจึงต้องแปลงมันให้เป็น JavaScript เสียก่อน แล้วถึงจะนำไปใช้งานจริงอีกที…

อ่าววววว งง อ่ะดิ …. งั้นมาดูรูปนี้

เข้าจายยยยยยยยยยยยย ยังคร้าบโผมมมม ประมาณนี้แหละฮะ

ตัวอย่างแบบ เบสิกกกกกก นาจาาาาา…….

let name: string = "bamossza";
name = 2; // เออเร่อเพราะว่าไม่ใช่ 
stringError: cannot assign a `number` to a `string`..
// แต่หากเราแปลงให้เป็น JavaScript ก็จะได้แบบนี้..
var name = "bamossza";name = 2;

เวลารันก็ไม่ผิดเพราะ javascript ไม่ได้ strict อะไรมาก
และ TypeScript ยังสามารถแปลงโค้ดให้ได้อีกด้วย ทั้งๆ ที่กำหนดค่าผิดชนิดกัน ถือว่า TypeScript มีความใจดี 55+

ชนิดข้อมูลพื้นฐาน

let aString: string = 'Hi bamossza';
let aNumber: number = '095504';
let aBoolean: boolean = true or false;
let anArray: Array<string> = ['apple', 'banana'];
let anything1: any = 'a';
let anything2: any = 1;let anything3: any = true;

any คืออะไร ??
อ้าวววว .. any แนะนำตัวหน่อยสิ
สวัสดีค่ะเราชื่อ any นะ… สำหรับเราไม่มีอะไรมาก ใครจะกำหนด จะหยิบ จะโยน จะทำอะไรกับฉันได้หมด ฉันไม่ซีเรียส ฉันรับได้หมดทุกอย่าง
..
any เป็นชนิดที่รับได้หมด ไม่ระบุชนิด ซึ่งมักจะใช้ในกรณีที่เรายังไม่แน่ใจว่าจะกำหนดชนิดอะไรดี
..
ตัวอย่าง Array ที่ระบุชนิดเป็น น้อง any

let anything: Array<any> = ['a', 'b', 1, 3, true];

Where is a where where — ไหนๆ ก็ไหนๆ แล้วงั้นเรามาดูเรื่องนี้ต่อเลยละกัน

Type assertions

Type assertions เป็นการยืนยันประเภทเพื่อบอกว่าให้ TypeScript ได้ทราบว่า มันใช่แล้ว ประเภทนี้ถูกแล้ว ตามนิยามที่ว่า “trust me, I know what I’m doing” — เชื่อฉัน ว่าฉันรู้ว่าฉันกำลังทำอะไรอยู่

ในกรณีที่เราประกาศชนิดที่เป็น any แล้วทีนี้เราต้องการนับว่า String หรือประโยคนั้นๆ มีกี่ตัว

เราจะต้องยืนยันประเภทซะก่อน จริงๆ มันก็คล้ายๆกับการ Parse ใน Java นั่นแหล่ะ

มาดูตัวอย่างกันครับ

let aString: any = "bamossza";
let length : number = (<string>aString).length;
console.log(length); // 8

หรือจะแบบนี้

let aNumber: any = "5";
let result : number = (<number>aNumber) + 6;
console.log(result); // 11

สู้อีกนิ๊ดดดดดใกล้จบแล้ว………..อ้าวลุยยยยยยยยยยยยย

มารู้จักกับ Enum กันนนนนนนน^^
..
สมมติว่า เราต้องการสร้างตัวแปรแทนสถานะของ User ถ้าเราบอกว่าให้
เลข 1 แทน ใช้งาน
เลข 2 แทน ไม่ใช้งาน
และสุดท้ายเลข 3 แทน บล็อก
ถ้าในอนาคตตตตตตตอันไกลโพ้นนนนเรากลับมาอ่านโค้ดอีกทีเราก็จะมานั่งมึนว่า เฮ้ยยยยยย!!!! 1, 2, 3 มันคืออะไรวะเนี้ยยยยยยยยย
..
Enum จะเข้ามาช่วยแก้ปัญหาในจุดๆนี้ ให้กับเรา

enum userStatus { 
   Active, 
   Inactive, 
   Block
};
let status = userStatus.Active;
console.log(status); // Result: 0

ช้าก่อนนนนนนนนนนนนนนน เห้ๆๆๆๆๆๆๆๆ +++!!!
..
Enum ถ้าเราไม่กำหนดค่าเริ่มต้นอะไรให้มันเลย
มันจะเริ่มต้นที่ 0 นะฮะ
จากโค้ดข้างบนจะได้ว่า Active = 0, Inactive = 1, Block = 2

enum userStatus { 
   Active = 1, 
   Inactive, 
   Block
};
จากโค้ดข้างบนจะได้ว่า Active = 1, Inactive = 2, Block = 3
let status = userStatus.Active;
console.log(status); // Result: 0

ส่วน void มักจะใช้กับฟังก์ชั่นที่ไม่มีการรีเทิร์น(Return)ค่ากลับ
ยกตัวอย่างเช่น

function setName(name: string): void { 
   this.name = name;
}

อะไรประมาณนี้ครับบบบบบบ
..
หรือใครจะไปประกาศให้กับตัวแปรก็ได้นะ แบบนี้

let eiei: void = undefined;
let eiei: void = null;

แต่….จะทำไปเพื่ออะไร คงไม่มีใครทะลึ่งทำหรอกมั้งฮะ 5555+
..
อ้าวววว เกือบลืมชนิด Tuple

Tuple เป็นชนิดที่ให้เราสามารถกำหนด สมาชิกภายใน Array ที่มีชนิดต่างกันได้
ยกตัวอย่างเช่น

let student: [string, number] student = ["bamossza", 1]; 
student = [1 , "bamossza"];
// แต่ถ้าแบบนี้ผิดเพราะว่าระบุค่าไม่ถูกต้องตามชนิดที่กำหนด 
// Type 'number' is not assignable to type 'string'.

สรุปก็คือ .. ตัวแปรที่ประกาศใน TypeScript จะเปลี่ยนชนิดข้อมูลไม่ได้ ข้อผิดพลาดในการเขียนโปรแกรมจะน้อยลงก็เพราะว่าเราไม่สามารถใส่ข้อมูลผิดชนิดกันได้ และอีกอย่างหาก IDE ที่รองรับ TS มันก็จะช่วยตรวจสอบก่อนใช้งานจริงว่า กำหนดข้อมูลถูกชนิดหรือเปล่า หรือว่าระบุชนิดด้วยหรือเปล่า อะไรประมาณนี้ครับ
..
นี่มันปี 2017 แล้วเราควรจะเขียน JavaScript ที่มี Type กันได้แล้วนะฮะ…….
..
ไว้เจอกันใหม่ครั้งหน้าครับผม

ขอบคุณครับที่อ่านจนจบ…
Thank you so much.

ศึกษาเพิ่มเติมได้ที่: http://www.typescriptlang.org/Handbook