สรุปการเขียน Classes ใน TypeScript

tscript
มาลองดูรูปแบบการเขียน 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 ได้ไม่ยากครับ ลองดูๆ 🙂

การประกาศตัวแปร และชนิดข้อมูลของ TypeScript

tscript

สำหรับคนที่เตรียมตัวศึกษา Angular 2 คงหนีไม่พ้นต้องศึกษา TypeScript ด้วย มาดูตัวอย่างการประกาศตัวแปร และชนิดข้อมูลของ TypeScript ง่ายๆกันครับ (Built-in types)

รูปแบบ

let ชื่อตัวแปร: ชนิดข้อมูล;

– String

var name: string = ‘CodingThailand’;

– Number

let age: number = 20;

– Boolean

let married: boolean = true;

– Array

let jobs: Array<string> = [‘IBM’, ‘Microsoft’, ‘Google’];
let jobs: string[] = [‘Apple’, ‘Dell’, ‘HP’];
หรือ
let jobs: Array<number> = [1, 2, 3];
let jobs: number[] = [4, 6, 8];

Enums

enum Role {Employee, Manager, Admin};
let role: Role = Role.Employee;

Any (เป็น default type เก็บอะไรก็ได้)

let thing: any = ‘Akenarin Komkoon’;
thing = 1;
thing = [1, 2, 3];

Void (ใช้สำหรับฟังก์ชันที่ไม่มีการคืนค่ากลับ)

function setTitle(name: string): void {
this.name = name;
}