มาลองดูรูปแบบการเขียน Classes ใน TypeScript กัน จริงๆ แล้วรูปแบบและแนวทางการเขียนก็เขียนเหมือนกันกับ JS ES6 นั่นเองครับ
การสร้าง class เราจะใช้คีย์เวิร์ด class ตามด้วยชื่อคลาส ดังนี้
class Book {
}
คลาสประกอบด้วย properties, methods และ consturctors
1. การเขียน Properties
class Person {
firstName: string;
lastName: string;
age: number;
}
2. การเขียน Methods
class Person {
firstName: string;
lastName: string;
age: number;
//method
greet() {
console.log(“Hello”, this.firstName);
}
}
3. ตัวอย่างการใช้งานคลาส Person
// ประกาศตัวแปร มี type เป็น Person
let p: Person;
//สร้าง instance ใหม่
p = new Person();
//กำหนดค่าให้กับ first_name
p.firstName= ‘Akenarin’;
//เรียกใช้ method ชื่อว่า greet()
p.greet();
Note: เราสามารถสร้าง instance ใหม่ได้ด้วยบรรทัดเดียว ดังนี้
let p: Person = new Person();
4. การเขียน Constructors
constructor เป็น method พิเศษที่จะทำงานเมื่อมีการสร้าง instance ใหม่ โดยทั่วไปเรามักใช้สำหรับกำหนดค่าเริ่มต้นให้กับ object ครับ
ตัวอย่างการเขียน constructor แบบที่ 1
class Person {
firstName: string;
lastName: string;
age: number;
constructor(firstName: string, lastName: string, age: number) {
this.firstName= firstName;
this.lastName= lastName;
this.age = age;
}
greet() {
console.log(“Hello”, this.firstName);
}
}
ตัวอย่างการเขียน constructor แบบที่ 2 [เพิ่มเติมจาก @ Tan Tanangular ]
แบบที่ 2 นี้เราสามารถละไม่เขียน properties ได้โดยให้ระบุ access modifier เข้าไป เช่น private, public เป็นต้น ตัวอย่าง
class Person {
//ตรงนี้ไม่ต้องเขียน properties
constructor(public firstName: string, public lastName: string, public age: number) {
//ตรงนี้สามารถละ ไม่เขียนได้ //this.firstName= firstName;
//this.lastName= lastName;
//this.age = age;
}
} จากโค้ดด้านบนจะถูก compile เป็น ดังนี้
var Person = (function () {
function Person(firstName, lastName,age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
return Person;
}());
ด้านซ้ายเป็น .ts ส่วนด้านขวาหลัง compile เป็น .js
การใช้ constructor
let p: Person = new Person(‘Akenarin’, ‘Komkoon’, 20);
p.greet();
ถ้าใครมีพื้นฐานการเขียน JAVA, C#, PHP OOP มา รับรองว่าทำความเข้าใจ TypeScript ได้ไม่ยากครับ ลองดูๆ 🙂
Views: 2555