ตอนที่ 3 TypeScript Tooling

Installing TypeScreipt

มีสองวิธ๊หลัก ๆ ในการติดตั้ง TypeScript บน Project

• ผ่าน npm (Node.js packae manager)
• Visual Studio plugins

ในบทความนี้เราจะใช้วิธี npm กัน ดังนี้

 npm i -g typescript

Building your first TypeScript file

เปิด Editor มาแล้วพิมพ์ JavaScript โค้ดนี้ใน greeter.ts

ใน editor ถ้าหากเราไป hover function greeter ก็จะเห็น type เป็น function greeter(person: any): string

// function greeter(person: any): string
function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

Compiling your code

tsc greeter.ts

ดูผลลัพธ์ greeter.js สังเกตุว่าเราใช้ .ts ก็จริงแต่สิ่งที่เราใส่เข้าไปมันเป็น js code ทำให้ผลลัพธ์ก็จะออกมาเหมือนเดิม

ทีนี้ลองแก้ใหัมันมี Type แล้วลอง compile อีกครั้งก็จะเห็นว่ามันได้ผลลัพธ์เดิมเพิ่มเติมคือมันจะรู้ฟังค์ชั่นเรารับอะไร

ใน editor ถ้าหากเราไป hover function greeter ก็จะเห็น type เป็น function greeter(person: string): string

// function greeter(person: string): string
function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

บทความนี้ เราได้เรียนรู้วิธีการติดตั้ง TypeScript และ TypeScript Tooling พื้นฐาน

ในตอนต่อไป เราจะเข้าสู่ TypeScript Basic กัน

References

• TypeScript Tooling: https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html