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 = 3let 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