So sánh unknown vs any trong TypeScript

Khi sử dụng TypeScript, một biến có type là any có thể chứa giá trị có kiểu dữ liệu bất kỳ. Ví dụ:

let value: any = "homiedev.com";
value = function() {};
value = null;

Khi sử dụng type any, TypeScript sẽ bỏ qua bước kiểm tra trước khi chúng ta thực hiện các hành động như thực thi, truy xuất thuộc tính,... trên giá trị này. Các bạn nên hạn chế sử dụng any vì lý do này nhé ^^.

Phiên bản TypeScript 3.0 có giới thiệu một type mới là unknown. Nó tương tự như type any, bất kỳ giá trị nào cũng có thể được gán cho biến có type này.

let value: unknown = "homiedev.com";
value = function () {};
value = null;

Vậy hai type unknown vs any trong TypeScript có gì khác nhau thì chúng ta cùng tìm hiểu trong bài viết này nhé 🎉.

unknown vs any

Để hiểu sự khác nhau giữa unknown vs any, chúng ta cùng xem qua một ví dụ:

function getData(callback: any) {
  callback();
}

getData('abc');

Vì callback có type là any nên TypeScript sẽ bỏ qua bước kiểm tra khi thực thi nó. Chúng ta có thể làm bất kỳ hành động với callback.

Khi chạy đoạn code trên, chúng ta sẽ nhận một lỗi TypeError: callback is not a function, vì đối số truyền vào getData() có kiểu string, không thể thực thi nó nên sẽ dẫn đến lỗi.

Vậy làm thế nào để hàm getData() chấp nhận bất kỳ kiểu đối số nào, nhưng khi thực hiện hành động với đối số này thì phải kiểm tra kiểu của nó. Type unknown là câu trả lời dành cho bạn 😁.

Sử dụng type unknown cũng tương tự như any, nó chấp nhận bất kỳ giá trị nào. Nhưng khi chúng ta sử dụng biến có type unknown, TypeScript sẽ làm nhiệm vụ kiểm tra kiểu của biến.

Bây giờ chúng ta thử đổi callback sang type unknown và xem chuyện gì sẽ xảy ra nhé!

Vì callback có kiểu unknown nên TypeScript báo cho chúng ta Object is of type 'unknown', lúc này ta cần kiểm tra xem callback có phải là một function hay không.

function getData(callback: unknown) {
  if (typeof callback === "function") {
    callback();
  }
}

Nhờ đó, chúng ta có thể an toàn gọi callback như một function bằng điều kiện kiểm tra typeof callback === "function" 🎉.

Việc gán giá trị cho biến với type là unknown với any cũng khác nhau, các bạn có thể xem ví dụ dưới đây:

let a: unknown = 25;
let b: any = "homiedev";
let number: number = 10;

number = a; // TypeScript hiện lỗi: Type 'unknown' is not assignable to type 'number'
number = b; // OK
a = b; // OK
number = a as number // sử dụng Type Assertion => OK

Các giá trị của type unknown chỉ được gán với biến có type là unknown hoặc any.

Qua ví dụ trên, mình xin tóm gọn lại sự khác nhau giữa unknown vs any đó là:

1. Chúng ta có thể gán bất kỳ thứ gì cho biến với type là unknown và any.
2. Khi sử dụng type unknown, các bạn cần kiểm tra kiểu dữ liệu của giá trị. Với any, các bạn có thể thực hiện bất kỳ thao tác nào ví dụ gọi hàm, truy xuất thuộc tính,... TypeScript sẽ bỏ qua bước kiểm tra trên type này.
3. Các giá trị của type unknown chỉ có thể được gán cho unknown hoặc any.