Cách Sử Dụng TypeScript Hiệu Quả Trong Dự Án Phát Triển

1. Giới Thiệu

Trong thời đại phát triển mạnh mẽ của các dự án front-end và back-end, việc sử dụng JavaScript hoặc Node.js đã trở thành điều hiển nhiên. Bên cạnh đó, TypeScript đã trở thành lựa chọn mặc định cho nhiều lập trình viên. Vậy, làm thế nào để sử dụng TypeScript một cách hiệu quả trong công việc hàng ngày? Hãy cùng tìm hiểu một số phương pháp dưới đây.

2. Các Cách Sử Dụng TypeScript

a. Tạo Kiểu Dữ Liệu Từ Một Hằng Số

Giả sử bạn có một hằng số và một hàm để cập nhật trạng thái như sau:

const STATUS = {
    IDLE: 'idle',
    LOADING: 'loading',
    SUCCESS: 'success',
    ERROR: 'error'
}

const setStatus = (status: string) => {
    // Logic cập nhật trạng thái
}

Dễ dàng nhận thấy, với kiểu dữ liệu string, bạn có thể truyền bất kỳ chuỗi nào vào hàm setStatus(), dẫn đến nhiều lỗi không mong muốn. Để khắc phục vấn đề này, bạn có thể định nghĩa một kiểu dữ liệu như sau:

type StatusType = 'idle' | 'loading' | 'success' | 'error';

const setStatus = (status: StatusType) => {
    // Logic cập nhật trạng thái
}

Cách này giúp bạn gợi ý lựa chọn khi gọi hàm setStatus(), tuy nhiên bạn vẫn cần phải cập nhật kiểu dữ liệu mỗi khi thay đổi hằng số STATUS. Để tự động hóa điều này, bạn có thể làm như sau:

const STATUS = {
    IDLE: 'idle',
    LOADING: 'loading',
    SUCCESS: 'success',
    ERROR: 'error'
} as const

type StatusType = typeof STATUS[keyof typeof STATUS];

const setStatus = (status: StatusType) => {
    // Logic cập nhật trạng thái
}

setStatus(STATUS.ERROR)

Nhờ việc sử dụng as const, bất kỳ khi nào bạn cập nhật hằng số STATUS, kiểu dữ liệu StatusType sẽ tự động được cập nhật theo.

b. Sử Dụng Generic Type

Giả sử bạn có một kiểu dữ liệu và một hàm như sau:

type User = {
  username: string;
  email: string;
  age: number;
  status: 'active' | 'inactive';
};

const updateUserInfo = (key, value) => {
  // Logic cập nhật thông tin người dùng
}

Chúng ta muốn kiểu dữ liệu của biến key là một trong các thuộc tính của User, và value phải có kiểu dữ liệu tương ứng với thuộc tính đó:

1. Nếu key = 'username' thì value phải là string.
2. Nếu key = 'age' thì value phải là number.
3. Nếu key = 'status' thì value phải là 'active' hoặc 'inactive'.

Để thực hiện điều này, ta cần sử dụng Generic như sau:

const updateUserInfo = <K extends keyof User>(key: K, value: User[K]) => {
  // Logic cập nhật tại đây...
};

Với cách làm này, bất kỳ khi nào bạn thay đổi User, TypeScript sẽ tự động cập nhật các gợi ý kiểu dữ liệu cho hàm updateUserInfo.

c. Sử Dụng Type Predicate

Giả sử bạn có một mảng với nhiều kiểu dữ liệu:

const arr = [1, 'hi', true, 'world', undefined, 'viblo'];

const strArr = arr.filter(item => typeof item === 'string');

const uppercaseStrArr = strArr.map(str => str.toUpperCase());

Nếu dùng TypeScript, mã này sẽ báo lỗi vì TypeScript không thể xác định rằng tất cả các phần tử trong strArr đều là string. Để giải quyết vấn đề này, bạn có thể sử dụng type predicate:

const isString = (item: unknown): item is string => typeof item === 'string';

const strArr = arr.filter(isString);

const uppercaseStrArr = strArr.map(str => str.toUpperCase());

Bằng cách này, TypeScript sẽ hiểu rằng strArr chỉ chứa các phần tử kiểu string và mã sẽ hoạt động mà không gặp lỗi.

3. Kết Luận

Bài viết này đã đề cập đến một số cách sử dụng TypeScript hiệu quả trong phát triển phần mềm. Hy vọng rằng những chia sẻ trên sẽ giúp bạn nâng cao kỹ năng lập trình với TypeScript. Cảm ơn bạn đã đọc bài viết này và hãy nhớ để lại bình luận cũng như đánh giá nếu thấy hữu ích!
source: viblo