Type any và Union Type

Any Type

Type any cho phép bạn gán bất kỳ giá trị nào và có thể thay đổi kiểu dữ liệu mà không gây lỗi. Tuy nhiên, việc lạm dụng any có thể gây khó khăn trong quản lý mã nguồn.

let myName: any = "helloworld";
myName = 30;
myName = false;

Thay vì sử dụng any, nên sử dụng Union Type để giới hạn kiểu dữ liệu một cách rõ ràng hơn.

let myName: string | number | boolean = "helloworld";
myName = 30;
myName = false;

Lưu ý: Tránh sử dụng any quá nhiều để giữ mã nguồn rõ ràng và dễ bảo trì.

Unknown Type

Type unknown giống với any, nhưng cần kiểm tra kiểu dữ liệu trước khi sử dụng.

let myName: unknown;
myName = "frontend developer";

if (typeof myName === "string") {
 console.log(myName.includes("developer"));
}

Lưu ý: any không yêu cầu kiểm tra kiểu, nhưng unknown cần kiểm tra kiểu trước khi sử dụng.

Never Type và Void Type

Never Type

Type never biểu thị rằng một hàm không bao giờ kết thúc hoặc một giá trị không thể xảy ra.

function throwError(errorMsg: string): never {
 throw new Error(errorMsg);
}

function keepProcessing(): never {
 while (true) {
 console.log("I always does something and never ends.");
 }
}

Void Type

Type void được sử dụng cho các hàm không trả về giá trị.

function sayHi(): void {
    console.log('Hi!')
}

let speech: void = sayHi(); 
console.log(speech); // undefined

Tuple Type và Enum Type

Tuple Type

Type Tuple giống mảng, nhưng có số lượng và kiểu dữ liệu cố định.

const students1: [string, number] = ["helloworld", 30];
students1[0];
students1[1];

Enum Type

Type Enum giúp định nghĩa nhóm các giá trị có thể sử dụng như kiểu dữ liệu.

enum Time {
  SECOND,
  MINUTE,
  HOUR
}

const oneHour: Time = Time.HOUR;

Sử dụng Enum để đặt tên cho các giá trị cố định giúp làm mã nguồn trở nên rõ ràng và dễ bảo trì.

Ví dụ:

enum Time {
  SECOND = 1000,
  MINUTE = 1000 * 60,
  HOUR = 1000 * 60 * 60
}
const oneHour: Time = Time.HOUR;

Chúng ta sẽ xem qua một trường hợp phức tạp hơn khi không sử dụng enum:

import React from "react";

const Component = () => {
  const [tab, setTab] = useState("recent");
  return (
    <div>
      <div className="tab-list">
        <div
          className={`tab-item ${tab === "recent" ? "active" : ""}`}
          onClick={() => setTab("recent")}
        ></div>
        <div
          className={`tab-item ${tab === "popular" ? "active" : ""}`}
          onClick={() => setTab("popular")}
        ></div>
        <div
          className={`tab-item ${tab === "latest" ? "active" : ""}`}
          onClick={() => setTab("latest")}
        ></div>
      </div>
    </div>
  );
};

export default Component;

Chúng ta chưa cần hiểu chi tiết đoạn mã trên vội. Hãy cùng tập trung vào các chỗ được lặp đi lặp lại nhiều lần: recent, popular, latest. Ta có thể đưa nó vào enum Type và sử dụng lại như sau:

import React from 'react';
enum TabKey  
  RECENT= 'recent',
  POPULAR= 'popular',
  LATEST= 'latest',
}
const Component = () => {
  const [tab, setTab] = useState<TabKey>(TabKey.RECENT);
  return (
    <div>
      <div className="tab-list">
        <div className={`tab-item ${tab === TabKey.RECENT ? 'active' : ''}`} onClick={() => setTab(TabKey.RECENT)}></div>
        <div className={`tab-item ${tab === TabKey.POPULAR ? 'active' : ''}`} onClick={() => setTab(TabKey.POPULAR)}></div>
        <div className={`tab-item ${tab === TabKey.LATEST ? 'active' : ''}`} onClick={() => setTab(TabKey.LATEST)}></div>
    </div>
   </div>
  );
};

export default Component;

Bằng cách sử dụng các loại Type này một cách linh hoạt, bạn có thể viết mã nguồn TypeScript dễ hiểu và dễ bảo trì hơn. Hãy tận dụng sức mạnh của TypeScript để phát triển mã nguồn chất lượng cao.