Class ใน TypeScript และ JavaScript ES6

ในที่สุด javascript ก็สามารถสร้าง class ได้แล้ว หลังจากที่นักพัฒนาต้องสร้าง class เทียม ๆ ขึ้นมาใช้กันเองอยู่นาน จนตอนนี้ TypeScript และ JavaScript ES6 ได้มีการเพิ่ม Class ให้ใช้กันอย่างจริงจังแล้ว

โดยประโยชน์ของการมี class หลัก ๆ มีดังนี้

1.ทำให้ code มีโครงสร้าง

2.ทำให้สามารถใช้ framework ผ่านทาง class ได้

3.developer ในปัจจุบันเข้าใจเรื่อง class ดีอยู่แล้ว ทำให้ง่ายต่อการพัฒนา

ตัวอย่างการสร้าง class ง่าย ๆ ในที่นี้ชื่อว่า class Point

class Point {
   x: number;
   y: number;
   constructor(x: number, y: number) {
      this.x = x;
      this.y = y;
   }
   add(point: Point) {
      return new Point(this.x + point.x, this.y + point.y);
   }
}
var p1 = new Point(0, 10);
var p2 = new Point(10, 20);
var p3 = p1.add(p2); // {x:10,y:30}

แทนที่จากเดิม ถ้าต้องการสร้าง class ใน javascript ต้องเขียนประมาณนี้

var Point = (function () {
   function Point(x, y) {
      this.x = x;
      this.y = y;
   }
   Point.prototype.add = function (point) {
      return new Point(this.x + point.x, this.y + point.y);
   };
   return Point;
})();

การสืบทอด

การสืบทอดของ javascript ก็เหมือนกับการสืบทอดของภาษาอื่น ๆ โดยใช้คำว่า extends ดังตัวอย่าง

class Point3D extends Point {
   z: number;
   constructor(x: number, y: number, z: number) {
      super(x, y);
      this.z = z;
   }
   add(point: Point3D) {
      var point2D = super.add(point);
      return new Point3D(point2D.x, point2D.y, this.z + point.z);
   }
}

จะเห็นได้ว่าถ้าต้องการที่จะใช้งาน function หรือว่า constructor ของ parent typescript มี keyword ให้ใช้คือ super

Statics

Typescript รองรับ statics class มันสามารถที่จะใช้งาน instance ของ class ร่วมกัน โดยเราสามารถสร้างได้ทั้ง statics member และ function

class Something {
   static instances = 0;
   constructor() {
      Something.instances++;
   }
}
var s1 = new Something();
var s2 = new Something();
console.log(Something.instances); // 2

การเข้าถึงภายใน class

Typescript มี public private และ protected เหมือนกับภาษาอื่น ซึ่งสรุปได้ดังตาราง

ตัวอย่าง code

class FooBase {
   public x: number;
   private y: number;
   protected z: number;
}
// EFFECT ON INSTANCES
var foo = new FooBase();
foo.x; // okay
foo.y; // ERROR : private
foo.z; // ERROR : protected
// EFFECT ON CHILD CLASSES
class FooChild extends FooBase {
   constructor() {
      super();
      this.x; // okay
      this.y; // ERROR: private
      this.z; // okay
   }
}

Abstract

ใน TypeScript ก็มี abstract class คล้าย ๆ กับภาษาอื่นดังตัวอย่าง code ต่อไปนี้

class Animal {
   constructor(public name) { }
   makeSound(input : string) : string {
      throw new Error(‘This method is abstract’);
   }
   move(meters) {
      alert(this.name + “ moved “ + meters + “m.”);
   }
}
class Snake extends Animal {
   constructor(name) { super(name); }
   makeSound(input : string) : string {
      return “sssss”+input;
   }
   move() {
      alert(“Slithering…”);
      super.move(5);
   }
}

Constructor

เหมือนกับภาษาอื่น ๆ ทั่วไป Constructor ไม่ได้ถูกบังคับให้เขียน จะมีหรือไม่มีก็ได้

class Foo {}
var foo = new Foo();

ต่อไปนี้คือตัวอย่างการสร้าง Constructor

class Foo {
   x: number;
   constructor(x:number) {
      this.x = x;
   }
}

เป็นตัวอย่างง่าย ๆ ในการสร้าง class กับ constructor แต่ Typescript ก็ยังสร้างวิธีที่ง่ายมากขึ้นไปอีกตัวอย่างต่อไปนี้ให้ผลลัพธ์แบบเดียวกับตัวอย่างข้างบน

class Foo {
   constructor(public x:number) {}
}

Class Foo จะมี member ที่ชื่อ x อยู่ด้วย

การสร้าง Property

เราสามารถกำหนดค่าเริ่มต้นของแต่ละ member ภายนอก constructor ดังตัวอย่างต่อไปนี้

class Foo {
   members = []; // Initialize directly
   add(x) {
      this.members.push(x);
   }
}

สรุป

ที่กล่าวมาทั้งหมด อาจไม่ใช่ทั้งหมดในเรื่องของ Class ใน TypeScript แต่ก็เห็นได้ว่าเราสามารถสร้างโครงสร้างของโปรแกรมได้ดีกว่า Javascript ในยุคก่อน ๆ ทำให้โปรแกรมของเรามีคุณภาพที่ดีมากขึ้น

บทความอ้างอิง:

https://basarat.gitbooks.io/typescript/content/docs/classes.html

http://stackoverflow.com/questions/13333489/declaring-abstract-method-in-typescript