TypeScript

Overview

ก่อนเข้าเรื่องขอเกริ่นอะไรเล็กน้อย หลายๆ คนอาจจะคิดว่าการเขียน TypeScript เป็นเรื่องยาก จะต้องมี Learning Curve ที่สูงมากๆ แน่เลย หรือ จะต้องเรียนรู้อะไรเพิ่มเติมอีก

ผมขอบอกตรงนี้เลยนะครับ เราสามารถใช้ TypeScript แต่ไม่ต้องกำหนด Type ใดๆ เลยก็ได้ ซึ่งไม่ Error ด้วย ขึ้นอยู่กับเราตั้งค่าใน tsconfig.json ยังไง หลายๆ คนอาจจะตั้งคำถามว่าแล้วจะใช้ TypeScript ไปทำไม

แบบนี้ครับ เพื่อให้ง่ายสำหรับการเริ่มต้น เราเริ่มต้นจากเล็กไปหาใหญ่ได้ครับ ตรงไหนอยากได้ความแม่นของ Type หรือ code completion โดย Editor หรือ Feature อื่นๆ ของ TypeScript เราก็ค่อยๆ ใส่ไปครับ แบบนี้จะสบายๆ กว่าครับ

Introduction

“TypeScript is a superset of JavaScript that compiles to clean JavaScript output.” from TypeScript Repo

TypeScript และ C# มาจากคนสร้างคนเดียวกัน คือ Microsoft ดังนั้น ลักษณะของ Syntax จึงมีความคล้ายคลึงสูงมาก แต่อย่างไรก็ตาม TypeScript ยังคงความเป็นเอกลักษณ์ของตัวภาษา Javascript อยู่

ระบบ type ของ TypeScript ให้ประโยชน์หลายๆ อย่างเช่น ทำ code completion ดีขึ้น สามารถหา error ได้ง่ายขึ้น และการสื่อสารระหว่างแต่ละส่วนของโปรแกรมค่อนข้างชัดเจน ว่า type อะไร

TypeScript Feature over JavaScript:

Types
Next-gen JS Features (Compiled for older browser)
Non-JS Feature like interface or Generic
Meta Programming like Decorator
Rich Configtion

Note:

ภาษา TypeScript สามารถทำงานร่วมกับ Javascript ได้เลย
ภาษา TypeScript มีความคล้ายคลึงกับ Javascript ES6 ขึ้นไป
การใช้ Library ของ TypeScript ร่วมกันกับ Javascript นั่นคือ npm ดังนั้น การเลือกใช้ Library ให้พึงสังเกตุว่า Library ตัวนั้นเขียนด้วย Typesctipt หรือไม่
- ถ้าเขียนด้วย Javascript โดยส่วนใหญ่จะเขียน Type ของ Javascript แยกเป็นอีกไฟล์ อย่างไรก็ตาม การเรียกใช้ Library ลักษณะนี้อาจจะทำให้ Type ผิดพลาดได้ แต่มีโอกาสเจอน้อยนะ
- แต่ถ้าเขียนด้วย TypeScript เลย จะมีโอกาสเข้ากันได้ง่ายกว่า

Co-learning JavaScript

If you’re a Java or C# programmer that is new to JavaScript in general, we recommend learning a little bit of JavaScript without types first to understand JavaScript’s runtime behaviors. Because TypeScript doesn’t change how your code runs, you’ll still have to learn how JavaScript works in order to write code that actually does something!

ถ้าใครที่คุ้นเคยกับ JavaScript อยู่แล้ว ก็สามารถข้ามหัวพวกนี้ไปได้เลย

Asynchronous Programming

Read more

Why Asynchronous? - NodeSource

Getting Started

TypeScript for Node.js

Single File Execution

TypeScript

// Main.ts File
console.log("Hello World");

Data Types

TypeScript

const fooInt = 1;
const fooBoolean = true;
const fooString = "Hello";

Union Type

ใน TypeScript สามารถรวม type กันได้ เช่น

// `isShow` รับ type เฉพาะ undefined หรือ boolean เท่านั้น
type isShow = undefined || boolean;

Module

TypeScript: Documentation - Modules (typescriptlang.org)

Collection

Object

Object ใน C# และ TypeScript ไม่เหมือนกัน

Custom Object Type e.g. Dictionary (Microsoft’s DI)

type Dictionary<T> = {
  [key: string]: T;
};

TypeScript

Overview

Introduction

TypeScript Feature over JavaScript:

Co-learning JavaScript

Asynchronous Programming

Event Loop

Promises & Async/Await

Hoisting

Execution context

Scope chain