Menu
CoddyTech
Bắt đầu học

Mảng tổng quát

Thuộc phần Giới thiệu về TypeScript trong hành trình JavaScript của Coddy. Bài học 60 trên 73.

Mảng và kiểu tổng quát kết hợp rất tốt trong TypeScript. Khi học về mảng có kiểu dữ liệu trước đó, bạn đã dùng cú pháp T[] để chỉ định rằng một mảng chỉ có thể chứa các phần tử thuộc một kiểu dữ liệu cụ thể. Kiểu tổng quát giúp bạn diễn đạt cùng khái niệm này theo một cách khác.

TypeScript cung cấp một cú pháp khác để khai báo mảng có kiểu dữ liệu bằng định dạng Array<T>:

// These two declarations are equivalent:
let numbers1: number[] = [1, 2, 3];
let numbers2: Array<number> = [1, 2, 3];

Cú pháp Array<T> đặc biệt hữu ích khi làm việc với các hàm tổng quát thao tác trên mảng. Cú pháp này giúp thể hiện rõ hơn tính tổng quát của code và làm code dễ đọc hơn, nhất là khi bạn tạo các hàm có thể làm việc với mảng thuộc mọi kiểu dữ liệu mà vẫn đảm bảo an toàn kiểu.

challenge icon

Thử thách

Dễ

Tạo một hàm tổng quát có tên getFirstElement, nhận một mảng có kiểu bất kỳ và trả về phần tử đầu tiên hoặc undefined nếu mảng rỗng.

Hàm cần:

  • Dùng tham số kiểu tổng quát T
  • Nhận một tham số tên arr có kiểu Array<T>
  • Trả về phần tử đầu tiên có kiểu T hoặc undefined
  • Có chú thích kiểu trả về tường minh là T | undefined

Tạo các mảng sau bằng cú pháp Array<T>:

  • stringArray có kiểu Array<string>, chứa ["apple", "banana", "cherry"]
  • numberArray có kiểu Array<number>, chứa [10, 20, 30, 40]
  • booleanArray có kiểu Array<boolean>, chứa [true, false, true]
  • emptyStringArray có kiểu Array<string> và rỗng

Kiểm tra hàm và in ra các kết quả sau:

  • In ra kết quả khi gọi getFirstElement với stringArray
  • In ra kết quả khi gọi getFirstElement với numberArray
  • In ra kết quả khi gọi getFirstElement với booleanArray
  • In ra kết quả khi gọi getFirstElement với emptyStringArray
  • In ra kết quả khi gọi getFirstElement với một Array<string> mới chứa ["single"]

Tự làm thử

// TODO: Viết code tại đây
// Tạo hàm tổng quát getFirstElement

// Tạo các mảng cần thiết bằng cú pháp Array<T>

// Kiểm tra hàm và in kết quả
quiz iconTự kiểm tra

Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.

Tất cả bài học trong Giới thiệu về TypeScript

1Bắt đầu với TS

TypeScript là gì?Tại sao nên dùng TypeScript?Đoạn code TypeScript đầu tiênQuy trình biên dịch và lỗiÔn tập: Giới thiệu về TS

4Làm việc với hàm

Khai báo kiểu cho tham số và giá trị trả vềKhai báo kiểu cho hàm mũi tênKiểu trả về voidTham số tùy chọn với '?'Giá trị mặc định của tham sốKhai báo kiểu cho tham số restĐịnh nghĩa kiểu hàmÔn tập: xây dựng hàm có kiểu

7Dự án: Danh sách nhiệm vụ đơn giản

Dự án: Định nghĩa struct nhiệm vụHàm thêm nhiệm vụBài học dự ánHàm thay đổi trạng thái nhiệm vụBài học dự ánHàm liệt kê nhiệm vụ theo trạng tháiBài học dự ánHàm in tóm tắt nhiệm vụBài học dự ánKết hợp tất cảBài học dự án

10Dự án: quản lý hàng tồn kho

Dự án: mặt hàng tồn kho chungHàm: thêm mặt hàng vào khoBài học dự ánHàm tìm mặt hàng theo IDBài học dự ánTạo loại hàng tồn kho cụ thểBài học dự ánHàm lấy thông tin mặt hàngBài học dự án

2Kiểu dữ liệu cốt lõi

Kiểu dữ liệu cơ bản: str, num, booleanKiểu 'any': lối thoátKiểu 'unknown'Làm việc với null và undefinedSuy luận kiểu trong thực tếChú thích kiểu tường minhÔn tập: luyện tập về kiểu dữ liệu cốt lõi

5Kiểu: bí danh, hợp và giao

Bí danh kiểu cho các kiểu nguyên thủyKiểu hợp ('|')Làm việc với kiểu hợpKiểu giá trị cố địnhKiểu giao ('&')Kết hợp các bí danh kiểuÔn tập: kết hợp kiểu nâng cao

8Enum

Enum số là gì?Dùng enum sốEnum chuỗi là gì?Dùng enum chuỗiEnum hỗn hợpÔn tập: dùng enum

11Chủ đề nâng cao

Khẳng định kiểuBộ bảo vệ kiểu: in và instanceofKiểu 'never'Kiểu có thể nhận giá trị null ('strictNull')Chữ ký chỉ mục cho đối tượngÔn tập: tinh chỉnh kiểu

3Cấu trúc dữ liệu: mảng và tuple

Mảng định kiểuTừ khóa readonly cho mảngTuple là gì?Khai báo và truy cập tuplePhân rã tupleTuple chỉ đọcMảng định kiểu nhiều chiềuToán tử spread với mảngÔn tập: mảng và tuple

6Khai báo kiểu cho đối tượng và interface

Chú thích kiểu đối tượng trực tiếpBí danh kiểu cho đối tượngGiới thiệu về interfaceInterface và bí danh kiểuThuộc tính tùy chọn và chỉ đọcMở rộng interface và kiểuThêm phương thức vào interfaceÔn tập: định nghĩa hình dạng đối tượng

9Kiểu tổng quát: tìm hiểu cơ bản

Vấn đề mà kiểu tổng quát giải quyếtTạo hàm identity tổng quátSử dụng hàm tổng quátMảng tổng quátGiao diện tổng quátÔn tập: luyện tập hàm tổng quát

Tự luyện tập: Playground TypeScript