hocvietcode.com
  • Trang chủ
  • Học lập trình
    • Lập trình C/C++
    • Cấu trúc dữ liệu và giải thuật
    • Lập trình HTML
    • Lập trình Javascript
      • Javascript cơ bản
      • ReactJS framework
      • AngularJS framework
      • Typescript cơ bản
      • Angular
      • NodeJS
    • Lập trình Mobile
      • Lập Trình Dart Cơ Bản
        • Dart Flutter Framework
    • Cơ sở dữ liệu
      • MySQL – MariaDB
      • Micrsoft SQL Server
      • Extensible Markup Language (XML)
      • JSON
      • MongoDB
    • Lập trình PHP
      • Lập trình PHP cơ bản
      • Laravel Framework
    • Lập trình Java
      • Java Cơ bản
      • Spring Boot
    • Lập trình C#
      • Lập Trình C# Cơ Bản
      • ASP.NET Core MVC
    • Lập trình Python
    • Git và Github
    • Machine Learning
  • WORDPRESS
    • WordPress cơ bản
    • WordPress nâng cao
    • Chia sẻ WordPress
  • Kiến thức hệ thống
    • Microsoft Azure
    • Docker
    • Linux
    • Mạng và truyền thông
  • Chia sẻ IT
    • Tin học văn phòng
      • Microsoft Word
      • Microsoft Excel
    • Marketing
      • Google Adwords
      • Facebook Ads
      • Kiến thức khác
    • Chia sẻ phần mềm
    • Review công nghệ
    • Công cụ – tiện ích
      • Kiểm tra bàn phím online
      • Kiểm tra webcam online
Đăng nhập
  • Đăng nhập / Đăng ký

Please enter key search to display results.

Home
  • Typescript cơ bản
TypeScript cơ bản – Type và interface: mô tả cấu trúc dữ liệu

TypeScript cơ bản – Type và interface: mô tả cấu trúc dữ liệu

  • 17-10-2026
  • Toanngo92
  • 0 Comments

Viết cấu trúc object ngay cạnh từng biến phù hợp với ví dụ nhỏ, nhưng sẽ lặp lại khi nhiều hàm cùng xử lý khóa học hoặc học viên. Type và interface cho phép đặt tên cho những cấu trúc đó. Bài này nối tiếp kiến thức object, array và union đã có trong chuyên mục.

Mục lục

  • 1. Đặt tên kiểu bằng type
  • 2. Mô tả object bằng interface
  • 3. Mở rộng interface và kết hợp type
  • 4. Type hay interface?
  • 5. TypeScript kiểm tra theo cấu trúc
  • 6. Kiểu dữ liệu không phải dữ liệu thật
  • Đọc tiếp trong loạt bài

1. Đặt tên kiểu bằng type

type CourseLevel = "beginner" | "advanced";
type CourseSummary = {
  id: number;
  title: string;
  level: CourseLevel;
};
const summary: CourseSummary = {
  id: 1,
  title: "TypeScript cơ bản",
  level: "beginner"
};

CourseLevel chỉ chấp nhận hai giá trị chuỗi đã liệt kê, thay vì mọi string. Type alias cũng có thể đặt tên cho union, tuple, kiểu hàm và nhiều biểu thức kiểu khác. Đặt tên theo khái niệm của ứng dụng giúp người đọc hiểu dữ liệu được dùng để làm gì.

2. Mô tả object bằng interface

interface Course {
  readonly id: number;
  title: string;
  description?: string;
  level: "beginner" | "advanced";
}
const course: Course = {
  id: 1,
  title: "TypeScript cơ bản",
  level: "beginner"
};
console.log(course.description?.trim() ?? "Chưa có mô tả");

Thuộc tính description có dấu ? nên có thể được bỏ qua. Khi đọc, cần tính đến undefined. Với cấu hình strict ở loạt bài này, truy cập thẳng description.trim() sẽ bị cảnh báo. Dấu ?. chỉ gọi trim khi có giá trị, còn ?? cung cấp nội dung thay thế khi kết quả là null hoặc undefined.

readonly id ngăn gán lại id thông qua kiểu Course trong quá trình kiểm tra kiểu. Nó không đóng băng object khi chạy, cũng không làm mọi object lồng nhau trở thành bất biến. const ngăn gán lại biến; readonly kiểm soát việc ghi thuộc tính qua một kiểu cụ thể.

3. Mở rộng interface và kết hợp type

interface PublishedCourse extends Course {
  publishedAt: string;
}
type CourseWithLessons = Course & {
  lessonCount: number;
};
const published: PublishedCourse = {
  ...course,
  publishedAt: "2026-10-17"
};
const detail: CourseWithLessons = {
  ...course,
  lessonCount: 13
};

Extends tạo interface dựa trên cấu trúc đã có. Dấu & yêu cầu dữ liệu thỏa mãn đồng thời các kiểu được kết hợp. Nếu hai thuộc tính cùng tên có kiểu không tương thích, intersection có thể tạo ra một kiểu không thể đáp ứng; đừng dùng nó để che giấu xung đột trong mô hình dữ liệu.

4. Type hay interface?

Cả hai đều mô tả được nhiều cấu trúc object thông thường. Interface thuận tiện khi mở rộng cấu trúc và có cơ chế gộp các khai báo cùng tên. Type alias linh hoạt với union, tuple và các phép biến đổi kiểu, nhưng không được khai báo lại cùng tên trong cùng phạm vi. Trong một dự án, quy ước nhất quán quan trọng hơn việc cố thay mọi type thành interface hoặc ngược lại.

5. TypeScript kiểm tra theo cấu trúc

function printCourse(item: Course): void {
  console.log(item.title);
}
printCourse(published); // Có đủ các thuộc tính mà Course yêu cầu

Một giá trị không bắt buộc phải xuất phát từ một class cụ thể mới tương thích với Course. Nó cần có cấu trúc phù hợp. Tuy vậy, object literal được gán trực tiếp thường có bước kiểm tra thuộc tính thừa, giúp phát hiện lỗi gõ như title thành tittle; không nên suy ra rằng mọi thuộc tính ngoài khai báo đều bị loại bỏ.

6. Kiểu dữ liệu không phải dữ liệu thật

Interface và type alias bị xóa khỏi đầu ra JavaScript. Khai báo interface Course không tạo sẵn một khóa học, không sinh constructor và không xác nhận JSON từ server hợp lệ. Muốn chạy ví dụ, giữ các phần khai báo cần thiết trong src/main.ts, thêm export {} rồi biên dịch theo bài cấu hình. Ở bài API, chúng ta sẽ kiểm tra cấu trúc nhận về trước khi dùng như một kiểu đã biết.

Đọc thêm: TypeScript: Everyday Types.

Đọc thêm: TypeScript: Object Types.

Đọc tiếp trong loạt bài

Bài trước: TypeScript cơ bản – Hàm, kiểu tham số, giá trị trả về và callback

Bài tiếp theo: TypeScript cơ bản – Null, undefined, narrowing và type guards

Xem chuyên mục TypeScript cơ bản

Bài viết liên quan:

TypeScript cơ bản – Class, constructor, phạm vi truy cập và implements
TypeScript cơ bản – Promise, async/await và kiểm tra dữ liệu API
TypeScript cơ bản – DOM, sự kiện và biểu mẫu trên trình duyệt
TypeScript cơ bản – Module, import, export và tổ chức nhiều file
TypeScript cơ bản – Generics và keyof: tái sử dụng mà vẫn giữ kiểu
TypeScript cơ bản – Null, undefined, narrowing và type guards
TypeScript cơ bản – Hàm, kiểu tham số, giá trị trả về và callback
TypeScript cơ bản – Chạy chương trình đầu tiên và cấu hình tsconfig.json
TypeScript với Kiểu Dữ Liệu Cơ Bản – 3
TypeScript với Kiểu Dữ Liệu Cơ Bản – 2
TypeScript với Kiểu Dữ Liệu Cơ Bản – 1
Typescript cơ bản và cách cài đặt cho người mới

THÊM BÌNH LUẬN Cancel reply

Dịch vụ thiết kế Wesbite

NỘI DUNG MỚI CẬP NHẬT

CSS cơ bản – 20 bài từ HTML đến website responsive với Flexbox, Grid và mobile-first

CSS cơ bản – Bài 05: Đơn vị và kích thước: px, rem, %, min và max

CSS cơ bản – 20 bài từ HTML đến website responsive với Flexbox, Grid và mobile-first

CSS cơ bản – Bài 02: Selector và class: chọn đúng phần tử cần sửa

CSS cơ bản – 20 bài từ HTML đến website responsive với Flexbox, Grid và mobile-first

CSS cơ bản – Bài 01: Kết nối CSS với HTML và sửa quy tắc đầu tiên

CSS cơ bản – 20 bài từ HTML đến website responsive với Flexbox, Grid và mobile-first

CSS cơ bản – Bài 20: Hoàn thiện website và sửa lỗi bằng DevTools

CSS cơ bản – 20 bài từ HTML đến website responsive với Flexbox, Grid và mobile-first

CSS cơ bản – Bài 03: Vì sao CSS không có tác dụng? Cascade và specificity

Giới thiệu

hocvietcode.com là website chia sẻ và cập nhật tin tức công nghệ, chia sẻ kiến thức, kỹ năng. Chúng tôi rất cảm ơn và mong muốn nhận được nhiều phản hồi để có thể phục vụ quý bạn đọc tốt hơn !

Liên hệ quảng cáo: [email protected]

Kết nối với HỌC VIẾT CODE

© hocvietcode.com - Tech888 Co .Ltd since 2019

Đăng nhập

Trở thành một phần của cộng đồng của chúng tôi!
Registration complete. Please check your email.
Đăng nhập bằng google
Đăng kýBạn quên mật khẩu?

Create an account

Welcome! Register for an account
The user name or email address is not correct.
Registration confirmation will be emailed to you.
Log in Lost your password?

Reset password

Recover your password
Password reset email has been sent.
The email could not be sent. Possible reason: your host may have disabled the mail function.
A password will be e-mailed to you.
Log in Register
×