Giới thiệu:
Interface trong typescript cho phép bạn định nghĩ thuộc tính là gì và phương thức là gì mà đối tượng cần để được thực thi (implement). Nếu đối tượng tuân thủ đúng khuôn mẫu interface thì đối tượng đã implement interface ấy sẽ được thi hành đúng. Nếu interface không được thi hành đúng đắn thì typescript sẽ phát sinh lỗi ngay lập tức. Để rõ hơn, bạn hãy xem những ví dụ và giải thích dưới đây:

1. Bắt đầu với interface đầu tiên:

    function printLabel(labelObj: { label: string,size: number }) 
    {
    console.log("Label: " + labelObj.label + " - Size: " + labelObj.size); 
    } 
    let _object = {size: 10, label: "Size 10 Object", _size:1000}; 
    printLabel(_object);
   

Đây là một ví dụ không sử dụng interface. Chương trình sẽ tiến hành gọi hàm printLabel. Hàm printLabel sẽ yêu cầu hai tham số là label và size. Hàm sẽ yêu cầu label là kiểu string và size là kiểu number. Nếu bạn truyền sai kiểu, hàm sẽ không chạy được. Nhưng lưu ý rằng đối tượng object truyền vào có thể có nhiều thuộc tính nhưng trình biên dịch chỉ kiểm tra hai thuộc tính size và label mà hàm printLabel yêu cầu.
Dưới đây, bạn có thể tạo lại một hàm như trên sử dụng interface. Interface mô tả yêu cầu hai thuộc tính label và size:

interface LabelValue {
label: string;
size: number;
}

function printLabel1(labelObj: LabelValue) {
    console.log("Label: " + labelObj.label + " - Size: " + labelObj.size); 
}

let _object = {size: 10, label: "Size 10"};
printLabel1(_object);

Bạn có thể sử dụng Interface LabelValue để mô tả ví dụ trước. Nó vẫn còn hai thuộc tính size và Label.
2. Optional Properties
Xem ví dụ

   interface CircleConfig {
    color?: string;
    radius?: number;
    diameter?:number;
   }

   function createCircle(config: CircleConfig): {color: string; radius: number; diameter:number} {
   let newCircle = {color: "white", radius: 100, diameter: 1000};
  
   if (config.color) {
        newCircle.color = config.color;
   }
   if (config.diameter) {
       newCircle.diameter = 2 * config.radius;
   }
   return newCircle;
   }

   let circle = createCircle({color: "black", radius:150, diameter:1});
   console.log("diameter: " + circle.diameter);

Kết quả: In ra console với diameter: 300

Interface sử dụng linh hoạt các thuộc tính nghĩa là đối tượng truyền vào có thể không cần truyền hết tham số yêu cầu, cái nào cần truyền thì truyền cái đó. Với việc thêm dấu ? sau tên thuộc tính của interface, ta đã sử dụng optional properties, có thể linh hoạt trong việc ghi thuộc tính cho đối tượng.
3. Thuộc tính readonly (chỉ đọc )
Có một số thuộc tính không cho phép chỉnh sửa khi đối tượng khởi tạo. Bạn có thể đặt readonly trước tên thuộc tính.
Ví dụ:

   interface Point 
   { 
     readonly x: number; 
     readonly y: number; 
   }

Bạn có thể xây dựng đối tượng Point bằng cách gán một đối tượng. Và sau khi gán ta không thể thay đổi giá trị thuộc tính.

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

Và đối với mảng, bạn cũng không thể chỉnh sửa thuộc tính với ReadonlyArray<T>. Một kiểu dữ liệu giống như Array<T> nhưng tất cả các hàm biến đổi trong mảng đều được loại bỏ nên không thể thay dổi được giá trị.

let num: number[] = [1, 2, 3, 4];
let readOnlyNumber: ReadonlyArray<number> = num;
readOnlyNumber [0] = 12; // error! 
readOnlyNumber.push(5); // error! 
readOnlyNumber.length = 100; // error! 
num = readOnlyNumber; // error!

4. Như vậy giữa const và readonly có sự khác nhau gì không?
   Cả hai từ khóa const và readonly đều trả lời cho câu hỏi liệu cái nào sử dụng cho biến và cái nào sử dụng cho thuộc tính. Thật vậy, const được khai báo hằng số cho biến và readonly được sử dụng khai báo thuộc tính chỉ đọc.

5. Function Types
   Ví dụ:

   interface SearchFunc {
     (source: string, subString: string): boolean;
   }
   
   let search: SearchFunc;
   search = function(source: string, subString: string) {
        let result = source.search(subString);
    return result > -1;
   }
   console.log(search("Nguyen Van A","Nguyen")); // return true
   

Mô tả một hàm trong một interface giống như việc khai báo hàm với danh sách thuộc tính và trả về một kiểu dữ liệu.

Xem tiếp phần 2

Tôi xin viết tiếp theo bài Interface trong Typescript (Phần 1):
6. Indexable Types
Giống như việc làm thế nào để mô tả kiểu dữ liệu của hàm, Bạn có thể mô tả kiểu dữ liệu rằng chúng ta có thể gán chỉ số như subName[0], num[10],… Kiểu dữ liệu chỉ mục giúp bạn có thể gán chỉ mục cho đối tượng, và trả về kiểu dữ liệu tương ứng.
Ví dụ:

    interface StringArray {
     [index: number]: string;
    }

   let myName: StringArray;
   myName = ["Tôi", "là","Nguyễn","Văn","A"];

   let myStr: string = myName[0];
   console.log(myStr);

Xem tiếp một ví dụ để cụ thể hơn:

class Animal {
 name: string;
 constructor(name: string) {
   this.name = name;
 }
}

class Dog extends Animal {
breed: string;
constructor(name: string,breed: string) {
    super(name);
    this.breed = breed;
 }
}

interface NotOkay {
 //  Error: indexing with a 'string' will sometimes get you a Dog!
 //  [x: string]: Animal;
 [x: number]: Dog;
}


let _dog1 = new Dog("Dog","Husky");
let _dog2 = new Dog("Dog","Alaska");
let _dog3 = new Dog("Dog","Golden");


let ani: NotOkay;
ani = [_dog1, _dog2, _dog3];

for (let index in ani)
{
 console.log("Animal: " + ani[index].name + " - breed" + ani[index].breed);
}

Một trường hợp khác, sử dụng từ khóa readonly để ngăn cản sự thay đổi dữ liệu của mảng.
VD:

interface ReadonlyStringArray {
 readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
console.log(myArray[1]);
myArray[1] = "Mallory"; // error!

Lưu ý: Khi kiểu dữ liệu của chỉ số trùng với kiểu dữ liệu của thuộc tính thì chương trình sẽ sinh ra lỗi.
Ví dụ:

interface NumberDictionary
{
 [index: string]: number;
 length: number; // ok, length is a number 
 name: string; // lỗi, kiểu dữ liệu của 'name' trùng với kiểu dữ liệu của index
}

7. Class Types
   Ở đây lớp được sử dụng như một kiểu dữ liệu
   Ví dụ:

    interface ClockConstructor 
    { 
     new (hour: number, minute: number): ClockInterface; 
    } 
   interface ClockInterface 
   { 
    tick(); 
   } 
   function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface 
   {
     return new ctor(hour, minute); 
   } 
   class DigitalClock implements ClockInterface { 
    constructor(h: number, m: number) { } 
    tick() { 
       console.log("beep beep"); 
    } 
   } 
   class AnalogClock implements ClockInterface { 
     constructor(h: number, m: number) { } 
     tick()
     {  
      console.log("tick tock"); 
     } 
   } 
   let digital = createClock(DigitalClock, 12, 17); 
   let analog = createClock(AnalogClock, 7, 32);
   

8. Extending Interfaces
   Giống lớp, interface có thể kế thừa từ những interface khác.
   Ví dụ:

    interface Shape 
    {
     color: string;
    }
   interface PenStroke
    {
     penWidth: number; 
   }
   interface Circle extends Shape, PenStroke
   {
    sideRadius: number;
   }
   let circle  =  < Circle >{};
   circle .color = "blue";
   circle . sideRadius = 10;
   

   circle .penWidth = 5.0;

9. Kiểu hỗn hợp (Hybrid Types)
   Interface có thể mô tả được nhiều kiểu dữ liệu trong thế giới thực. Do tính linh hoạt và năng động của javascript, đôi khi bạn có thể gặp một đối tượng hoạt động như một sự kết hợp của số kiểu dữ liệu khác.
   Ví dụ:

   interface Counter
   {
    (start: number): string;
    interval: number;
    reset(): void;
   }
   function getCounter(): Counter
   {
      let counter = <Counter>function (start: number) { };
      counter.interval = 123;
      counter.reset = function () { };
    return counter; 
   } 
   let c = getCounter(); 
   c(10);
   c.reset();
   c.interval = 5.0;
   

Giới thiệu:
Interface trong typescript cho phép bạn định nghĩ thuộc tính là gì và phương thức là gì mà đối tượng cần để được thực thi (implement). Nếu đối tượng tuân thủ đúng khuôn mẫu interface thì đối tượng đã implement interface ấy sẽ được thi hành đúng. Nếu interface không được thi hành đúng đắn thì typescript sẽ phát sinh lỗi ngay lập tức. Để rõ hơn, bạn hãy xem những ví dụ và giải thích dưới đây:

1. Bắt đầu với interface đầu tiên:

    function printLabel(labelObj: { label: string,size: number }) 
    {
    console.log("Label: " + labelObj.label + " - Size: " + labelObj.size); 
    } 
    let _object = {size: 10, label: "Size 10 Object", _size:1000}; 
    printLabel(_object);
   

Đây là một ví dụ không sử dụng interface. Chương trình sẽ tiến hành gọi hàm printLabel. Hàm printLabel sẽ yêu cầu hai tham số là label và size. Hàm sẽ yêu cầu label là kiểu string và size là kiểu number. Nếu bạn truyền sai kiểu, hàm sẽ không chạy được. Nhưng lưu ý rằng đối tượng object truyền vào có thể có nhiều thuộc tính nhưng trình biên dịch chỉ kiểm tra hai thuộc tính size và label mà hàm printLabel yêu cầu.
Dưới đây, bạn có thể tạo lại một hàm như trên sử dụng interface. Interface mô tả yêu cầu hai thuộc tính label và size:

interface LabelValue {
label: string;
size: number;
}

function printLabel1(labelObj: LabelValue) {
    console.log("Label: " + labelObj.label + " - Size: " + labelObj.size); 
}

let _object = {size: 10, label: "Size 10"};
printLabel1(_object);

Bạn có thể sử dụng Interface LabelValue để mô tả ví dụ trước. Nó vẫn còn hai thuộc tính size và Label.
2. Optional Properties
Xem ví dụ

   interface CircleConfig {
    color?: string;
    radius?: number;
    diameter?:number;
   }

   function createCircle(config: CircleConfig): {color: string; radius: number; diameter:number} {
   let newCircle = {color: "white", radius: 100, diameter: 1000};
  
   if (config.color) {
        newCircle.color = config.color;
   }
   if (config.diameter) {
       newCircle.diameter = 2 * config.radius;
   }
   return newCircle;
   }

   let circle = createCircle({color: "black", radius:150, diameter:1});
   console.log("diameter: " + circle.diameter);

Kết quả: In ra console với diameter: 300

Interface sử dụng linh hoạt các thuộc tính nghĩa là đối tượng truyền vào có thể không cần truyền hết tham số yêu cầu, cái nào cần truyền thì truyền cái đó. Với việc thêm dấu ? sau tên thuộc tính của interface, ta đã sử dụng optional properties, có thể linh hoạt trong việc ghi thuộc tính cho đối tượng.
3. Thuộc tính readonly (chỉ đọc )
Có một số thuộc tính không cho phép chỉnh sửa khi đối tượng khởi tạo. Bạn có thể đặt readonly trước tên thuộc tính.
Ví dụ:

   interface Point 
   { 
     readonly x: number; 
     readonly y: number; 
   }

Bạn có thể xây dựng đối tượng Point bằng cách gán một đối tượng. Và sau khi gán ta không thể thay đổi giá trị thuộc tính.

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

Và đối với mảng, bạn cũng không thể chỉnh sửa thuộc tính với ReadonlyArray<T>. Một kiểu dữ liệu giống như Array<T> nhưng tất cả các hàm biến đổi trong mảng đều được loại bỏ nên không thể thay dổi được giá trị.

let num: number[] = [1, 2, 3, 4];
let readOnlyNumber: ReadonlyArray<number> = num;
readOnlyNumber [0] = 12; // error! 
readOnlyNumber.push(5); // error! 
readOnlyNumber.length = 100; // error! 
num = readOnlyNumber; // error!

4. Như vậy giữa const và readonly có sự khác nhau gì không?
   Cả hai từ khóa const và readonly đều trả lời cho câu hỏi liệu cái nào sử dụng cho biến và cái nào sử dụng cho thuộc tính. Thật vậy, const được khai báo hằng số cho biến và readonly được sử dụng khai báo thuộc tính chỉ đọc.

5. Function Types
   Ví dụ:

   interface SearchFunc {
     (source: string, subString: string): boolean;
   }
   
   let search: SearchFunc;
   search = function(source: string, subString: string) {
        let result = source.search(subString);
    return result > -1;
   }
   console.log(search("Nguyen Van A","Nguyen")); // return true
   

Mô tả một hàm trong một interface giống như việc khai báo hàm với danh sách thuộc tính và trả về một kiểu dữ liệu.

Xem tiếp phần 2