เริ่มต้น TypeScript ใน 5 นาที
ถ้าเราต้องการเริ่มต้นการเรียนรู้ Angular เราจำเป็นต้องเรียนรู้ TypeScript อย่างหลีกเลี่ยงไม่ได้
TypeScript คืออะไรล่ะ
TypeScript เป็นการพัฒนาอีกขั้นของ JavaScript ให้มีประสิทธิภาพมากขึ้น
มาเริ่มต้นด้วยการสร้างเว็บแอปพลิเคชันง่ายๆด้วย TypeScript กันเลย!!!
เริ่มด้วย การติดตั้ง TypeScript มี 2 วิธี
- Vs Code ซึ่งในเวอร์ชั่นตั้งแต่2015 เป็นต้นมาไม่ต้องติดตั้ง plug in เพิ่มเติม
- Via npm (Node.js package manager)
> npm install -g typescript
ถ้าเจอ Error!!! checkPermissions ให้ใช้คำสั่ง
> sudo chown -R $USER /usr/local/lib/node_modules
เริ่มต้นกันเลย……
สร้าง Folder ชื่อ Project และ เปิดด้วย VsCode
ใน vscode เขียนโปรแกรมตามนี้ในไฟล์ชื่อ greeter.ts
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);การ Compile Code
ใน command line ใช้ คำสั่ง tsc ชื่อไฟล์
tsc greeter.tsระบบสร้างไฟล์ .js มาให้ เราโดยจะเป็นการconvert จาก.ts เป็น .js
Interface
TypeScript สามารถกำหนด Interface เพื่อใช้ implements ได้
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Jane", lastName: "User" };
document.body.textContent = greeter(user);Classes
TypeScript รองรับคุณสมบัติใหม่ใน JavaScript เช่น Support OOP
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);รันคำสั่ง tsc greeter.ts อีกครั้ง
เริ่มสร้าง Web App
เขียนโปรแกรมตามนี้ในไฟล์ชื่อ greeter.html
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>เปิดไฟล์ greeter.html จาก เบราเซอร์เพียงแค่นี้ เราก็จะได้ web app TypeScript ตัวแรกกันแล้ว
บทความต่อไป เราจะมาเริ่มเรียน angular กันต่อเลย
refer
https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
