คู่มือ TypeScript ฉบับเร่งรัด

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 ด้วยกันด้วย) โดยมีของเล่นเยอะแยะตามด้านล่างนี้เลย

1. IntelliSense ที่คอยช่วยทํา auto complete
2. Code Snippets ให้พวกแบบ iterator หรือ code block อื่นๆที่เป็น Standard
3. JSDoc support
4. 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 ได้นั้นก็คือ

1. Source map
2. Launch Config

เจ้า Source map มันคือ ไฟล์ที่เป็น information file ของ compressed file อย่าง Javascript และ css มีประโยชน์ในการ Debug นั้นเอง ซึ่งในจุดนนี้เราต้องไปตั้งเพิ่มให้มัน compile แล้ว generate ออกมาด้วย

โดยแค่ไป uncomment tsconfig.json ออกแค่นั้นเลย

ส่วนเจ้า Launch config file ก็เป็น configuration ตัวนึงเพื่อบอกให้ vsc ไป debug ที่ไหนนั้นเอง โดยกดให้มันเพิ่มได้เองตามรูปด้านล่างเลย

โดยหลักการทํางานของ Debugger คือมันสามารถทําได้สองวิธีคือ

1. เรารัน server on local machines โดย url ในรูปที่วงไว้จะเป็น Localhost:xxxx ตามที่เรารัน application เราขึ้นมา
2. หรือจะเป็น 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/