TypeScript คืออะไร
TypeScript ก็คือ JavaScript นั้นแหละ! แต่เป็น … เครื่องมือที่ช่วยในการเขียน JavaScript ให้มีประสิทธิภาพมากขึ้น และ Scale ง่ายกว่า JavaScript plainๆๆ นั้นเอง 🙂
ซึ่งเจ้า TypeScript มันเป็น SuperSet ของ JavaScript นะ หมายความว่ามันสามารถใช้ทุก feature ของ JavaScript ได้เลย โดยไม่ break compatibility ใดๆเลยละ
ซึ่งประโยชน์ของ TypeScript คือ
- ด้วยความที่มันเป็น Superset ของ JavaScript แปลว่ามันใช้ได้ทุก Feature ที่ออกใหม่ของ JavaScript เลย
- Static Type เนื่องจาก JavaScript เป็น Dynamic Type ที่ไม่มีบอกว่า Type ไรเนอะ เช่น String, Int, Array เจ้า TypeScript เข้ามาช่วยเรื่องนี้ (คือถ้า App เล็กๆๆ เรื่องพวกนี้ไม่เป็นปัญหาหรอก แต่พอเป็น Complex & Large scale JavaScript นี้สิ ปัญหามาเลย)
- Compiler ก็ยิ่งดีเลย คือถ้าเคยเขียน JavaScript ฒาจะรู้เลยว่า เวลาเราทดสอบ Application ของเราเนี่ย เราจะต้องเขียนๆๆๆ App ให้เสร็จก่อน แล้วก็ค่อยไปทดลองรันบน Browser เพื่อดูว่ามันทํางานได้ถูกต้องหรือไม่ สมมุติถ้าบรรทัดไหนเราเขียนผิด มันก็ไม่ฟ้อง เพราะมัน run time เนอะ แต่พอมี compiler นี้มันช่วยให้เรารู้ตั้งแต่แรกเลย
- เป็นเครื่องมือที่ช่วยให้เราเป็น Object Oriented ได้ง่ายด้วย
อื่นๆอีกมากมาย แต่เอาหลักๆตามข้างบนก่อนพอละ
ตัวอย่างของการเขียน JavaScript แบบ Inherit OOP กับการเขียน TypeScript Inherit OOP ตามรูปข้างล่างนะ
กับถ้าเขียน OOP เองด้วย JavaScript
แค่เห็นก็ขี้เกรี้ยจแล้วละ ไม่อยากมายุ่งยากกับ Prototype เสียเวลามาก 😛 เพราะฉะนั้นเลือกใช้ TypeScript ดีกว่าแน่นอนน
TypeScript in action
Install TypeScript
ลงง่ายๆด้วย NodeJs
npm install -g typescript
ลงแบบ Global (-g) ด้วยก็ดี เพราะว่าจะได้ใช้ใน Global Scope
IDE แนะนํา
แนะนําตัวนี้เลย Visual Studio Code 🙂
มันเป็น IDE ที่ support TypeScript อยู่ละ (ของ Microsoft ด้วยกันด้วย) โดยมีของเล่นเยอะแยะตามด้านล่างนี้เลย
- IntelliSense ที่คอยช่วยทํา auto complete
- Code Snippets ให้พวกแบบ iterator หรือ code block อื่นๆที่เป็น Standard
- JSDoc support
- Auto Import
และอื่นๆอีกมากมาย ลองอ่านต่อได้ ที่นี้เลย
First Hello World with TypeScript
เริ่มง่ายๆเลยกับ TypeScript คือเรื่องของ Configuration File ที่ชื่อว่า tsconfig.json ที่จะอยู่ในทุกๆ project เพื่อคอยบอก tsc compiler ว่าต้องจัดการยังไงกับไฟล์ต่างๆ (.ts) ที่เราสร้างขึ้นมา
tsc --init
แล้วเราจะได้ file configuration ออกมาเลย
โดยมี configuration default มาให้เลย เช่น strict mode ที่เวลาเรา compile TypeScript ออกมา แล้วมันจะได้ “use strict” แปะบนหัวสุดของ JavaScript ไฟล์เป็นต้น
ต่อมาเราลองสร้าง TypeScript แบบ HelloWorld ง่ายๆขึ้นมากัน ตามรูปข้างล่าง
เจ้าไฟล์ที่เราพึ่งสร้างไปเนี่ย มันคือ basic TypeScript ที่เราประกาศ Function HelloWorld ใน JavaScript ซึ่งเวลา compile ออกมาแล้วจะออกมาหน้าตาแบบนี้
จะเห็นว่ามันมี “use strict” อัตโนมัติเลยเพราะว่าเราใส่ไว้ใน tsconfig.json นั้นเอง 🙂
ถึงจุดนี้บางคนอาจจะสงสัยว่า const ที่เราใช้คืออะไร โดยสามารถอ่านที่นี้ฉบับเต็มได้ แต่โดยรวมแล้วก็คือ มันเป็น New variables declaration ของ JavaScript ที่มีเรื่องของ Scope เข้ามาช่วยในการเขียนโปรแกรม ช่วยแก้ปัญหาของ Var นั้นเอง
วิธี Debug TypeScript ด้วย VSC
โดยปกติแล้วการ debug ของ JavaScript เราสามารถทําได้โดยการใส่ Breakpoint ในหน้า Web browser แล้วก็กดๆๆๆให้มันทํางานในถึงจุดนั้น แล้วก็ไปไล่ดูใน Dev Console เพื่อดูว่าได้ค่าอะไรกลับมาบ้าง
เจ้า VSC ก็สามารถทําแบบนั้นได้เหมือนกันเลย โดยต้องเพิ่ม 2 อย่างให้กับ VSC แล้วก็จะสามารถ Debug ได้นั้นก็คือ
- Source map
- Launch Config
เจ้า Source map มันคือ ไฟล์ที่เป็น information file ของ compressed file อย่าง Javascript และ css มีประโยชน์ในการ Debug นั้นเอง ซึ่งในจุดนนี้เราต้องไปตั้งเพิ่มให้มัน compile แล้ว generate ออกมาด้วย
โดยแค่ไป uncomment tsconfig.json ออกแค่นั้นเลย
ส่วนเจ้า Launch config file ก็เป็น configuration ตัวนึงเพื่อบอกให้ vsc ไป debug ที่ไหนนั้นเอง โดยกดให้มันเพิ่มได้เองตามรูปด้านล่างเลย
โดยหลักการทํางานของ Debugger คือมันสามารถทําได้สองวิธีคือ
- เรารัน server on local machines โดย url ในรูปที่วงไว้จะเป็น Localhost:xxxx ตามที่เรารัน application เราขึ้นมา
- หรือจะเป็น Url ที่ระบุไปที่ file html ที่มีการ Include TypeScript ตามรูปก็ได้ เพื่อง่ายต่อการทํางานแบบไม่มี server หรือทดลองไฟล์ง่ายๆๆไม่กี่ไฟล์
แค่นี้แหละ แล้วกด Debug ก็จะสามารถทดลอง debug value ได้เลยนั้นเอง
ตัวอย่าง TypeScript
ตัวอย่างการใช้งาน TypeScript สามารถ pull repository ลงไปลองรันในแต่ละหมวดหมู่ได้เลย 🙂
https://github.com/howtoautomateinth/typescript
Updated 23/5/2019
TypeScript & 3 Parties Libraries
บทความข้างต้นที่เราเขียนไปคือการใช้ TypeScript เดี่ยวๆเลย แต่ถ้าเราใช้กับ 3party ล่ะ? มันไม่มีทางรู้ได้เลยว่าพวก “$” หรือ “angular.” คืออะไร? เจ้า compiler ของ TypeScript รับรองได้เลยว่ามันตายแน่ๆๆๆ 🙂
มันเลยเกิดการต้องเขียน Type Defintion file ขึ้นมาหรือเป็นไฟล์ .d.ts นั้นเอง ซึ่งท่านี้จะเป็นลักษณะเก่าๆๆๆๆนะ เลยจะไม่ขอพูดมาก แต่ท่าใหม่ๆๆตั้งแต่ TypeScript 2 ขึ้นมา เราใช้ @type ใน npm จัดการปัญหาเหล่านี้ได้หมดแล้ว เพราะว่า project พวก typing ย้ายมาใน node หมดละ
โดยสมมุติว่าเราใช้ angular กับ typescript นะ มันจะออกมาหน้าตายังงี้ใน package.json
npm install @types/angular --save
แบบนี้เป็นต้น แล้วใน typescript เราก็จะสามารถเรียก angular มาใช้แบบนี้ได้เลย
import * as angular from "angular";
โดยตอนนี้เจ้า typing project เนี่ยมีเป็น 6000 กว่า projects ละ สามารถดูได้ที่นี้เลย
เพราะฉะนั้นต่อไปเวลาเห็น “@types” แปลว่าเค้า mention ถึง typescript นั้นเอง ไม่ต้องงงไปปป
Ref: http://codereform.com/blog/post/migrating-from-typings-to-npm-types/
