TYPESCRIPT 2.X CĂN BẢN
Hàm trong TypeScript Sử dụng hàm generics Sử dụng hàm generics trong TypeScript Sử dụng Array trong TypeScript Sử dụng Tuple trong TypeScript Sử dụng kiểu Array, Tuple, Enum trong TypeScript Interface trong Typescript Hybrid Types với Interface trong TypeScript Khác biệt khi sử dụng 'type' và 'interface' trong TypeScript Cách dùng Enum trong TypeScript Types và interface trong TypeScript Class trong TypeScript Sử dụng Abstract Classes trong TypeScript Sử dụng Interface trong Typescript (phần 2) Sử dụng Casting trong TypeScript Tìm hiểu về Generics trong TypeScript Tìm hiểu về utility types trong Typescript Utility types phổ biến trong Typescript Sử dụng default parameters trong TypeScript Modules trong TypeScript Rest Parameters trong TypeScript Sử dụng Function Overloadings trong TypeScript Sử dụng Type Assertions trong TypeScript Sử dụng Static Methods và Properties trong TypeScript. Sử dụng Access Modifiers trong TypeScript 10 mẹo và thủ thuật hay nhất trong TypeScript 5 Cách giúp bạn loại bỏ "any" trong TypeScript Mapped Types trong TypeScript Dependency Injection trong Typescript 5 ký hiệu khó hiểu cần biết trong TypeScript Cách sử dụng @ts-expect-error trong Typescript Declaration Merging trong TypeScript Tìm hiểu Branded Type trong TypeScript Namespaces trong Typescript Phân biệt Modules và Namespaces trong TypeScript Triple-Slash Directives trong TypeScript là gì? Phần 1: Biến trong TypeScript Phần 2: Biến trong TypeScript Property trong TypeScript Phân tích JSON trong TypeScript Bài tập TypeScript: Các dạng bài tập cơ bản Bài tập TypeScript: Lập trình Hướng đối tượng trong TypeScript Bài tập TypeScript: Kiểu Generic Types trong Typescript Bài tập TypeScript: Các kiểu dữ liệu mảng và tuple. Bài tập TypeScript: Classes và Inheritance trong Typescript Bài 01: TypeScript là gì? TypeScript và Javascript Bài 02: Cài đặt TypeScript Bài 03: TypeScript Basic Types Bài 04: Khai báo biến trong TypeScript Bài 05: Lệnh If Else và Switch Case trong TypeScript Bài 06: Vòng lặp trong TypeScript
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Tạo một lớp Rectangle và một lớp con là Parallelogram tính diện tích và chu vi của hình chữ nhật trong TypeScript.

Trong bài tập này, mình sẽ thách thức bản thân bằng việc tạo ra hai lớp: Rectangle (hình chữ nhật) và lớp con Parallelogram (hình bình hành) trong TypeScript. Mục tiêu của mình là tính diện tích và chu vi của hình chữ nhật và hình bình hành dựa trên các thông số về các cạnh và chiều cao.

Lưu ý: TypeScript cung cấp một cách tiếp cận mạnh mẽ cho lập trình hướng đối tượng. Mình sẽ tận dụng tính kế thừa để tạo lớp con từ lớp cha, giúp chúng ta tái sử dụng mã và tăng tính linh hoạt của mã lệnh.

Tạo lớp Rectangle và lớp con Parallelogram

Lớp Rectangle

Đầu tiên, mình sẽ tạo lớp Rectangle. Một hình chữ nhật có độ dài width height, và chúng ta sẽ tính diện tích và chu vi từ đây.

class Rectangle {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  calculateArea(): number {
    return this.width * this.height;
  }

  calculatePerimeter(): number {
    return 2 * (this.width + this.height);
  }
}

// Sử dụng lớp Rectangle để tính diện tích và chu vi của một hình chữ nhật
const myRectangle = new Rectangle(4, 6);
console.log("Diện tích của hình chữ nhật:", myRectangle.calculateArea());
console.log("Chu vi của hình chữ nhật:", myRectangle.calculatePerimeter());

Ở đây, mình đã tạo lớp Rectangle với hai phương thức calculateArea calculatePerimeter để tính diện tích và chu vi tương ứng của hình chữ nhật. Tiếp theo, mình sẽ mở rộng lớp này để tạo lớp Parallelogram.

Lớp con Parallelogram

class Parallelogram extends Rectangle {
  base: number;

  constructor(width: number, height: number, base: number) {
    super(width, height);
    this.base = base;
  }

  calculateArea(): number {
    return this.base * this.height;
  }

  // Phương thức tính chu vi của hình bình hành
  calculatePerimeter(): number {
    return 2 * (this.base + this.height);
  }
}

// Sử dụng lớp Parallelogram để tính diện tích và chu vi của hình bình hành
const myParallelogram = new Parallelogram(4, 6, 5);
console.log("Diện tích của hình bình hành:", myParallelogram.calculateArea());
console.log("Chu vi của hình bình hành:", myParallelogram.calculatePerimeter());

Ở đây, mình đã tạo lớp Parallelogram kế thừa từ lớp Rectangle, với việc ghi đè (override) phương thức calculateArea và triển khai một phương thức mới calculatePerimeter để tính diện tích và chu vi của hình bình hành.

Kết quả

Diện tích của hình chữ nhật: 24
Chu vi của hình chữ nhật: 20
Diện tích của hình bình hành: 30
Chu vi của hình bình hành: 22

Các giá trị này là kết quả của tính toán diện tích và chu vi dựa trên các thông số về chiều rộng, chiều cao, và đáy của hình chữ nhật và hình bình hành.

Rectangle (hình chữ nhật) và lớp con Parallelogram (hình bình hành). Chúng ta đã tính toán diện tích và chu vi của hình chữ nhật và hình bình hành dựa trên các thông số về chiều rộng, chiều cao và đáy.

Qua việc sử dụng tính kế thừa và việc ghi đè phương thức, mình đã thấy cách mà mỗi lớp có thể mở rộng và điều chỉnh các tính năng để phù hợp với đặc điểm riêng của nó. Việc áp dụng nguyên lý này đã giúp chúng ta tạo ra các phương thức tính toán chính xác cho diện tích và chu vi của hình chữ nhật và hình bình hành.

test php

Bài giải

-------------------- ######## --------------------

Câu hỏi thường gặp liên quan:

Cùng chuyên mục:

Bài tập TypeScript: Classes và Inheritance trong Typescript

Bài tập TypeScript: Classes và Inheritance trong Typescript

Bài tập TypeScript: Các kiểu dữ liệu mảng và tuple.

Bài tập TypeScript: Các kiểu dữ liệu mảng và tuple.

Bài tập TypeScript: Kiểu Generic Types trong Typescript

Bài tập TypeScript: Kiểu Generic Types trong Typescript

Bài tập TypeScript: Các dạng bài tập cơ bản

Bài tập TypeScript: Các dạng bài tập cơ bản

Phân tích JSON trong TypeScript

Phân tích JSON trong TypeScript

Property trong TypeScript

Property trong TypeScript

Phần 2: Biến trong TypeScript

Phần 2: Biến trong TypeScript

Phần 1: Biến trong TypeScript

Phần 1: Biến trong TypeScript

Triple-Slash Directives trong TypeScript là gì?

Triple-Slash Directives trong TypeScript là gì?

Phân biệt Modules và Namespaces trong TypeScript

Phân biệt Modules và Namespaces trong TypeScript

Tìm hiểu Branded Type trong TypeScript

Tìm hiểu Branded Type trong TypeScript

Namespaces trong Typescript

Namespaces trong Typescript

Declaration Merging trong TypeScript

Declaration Merging trong TypeScript

Cách sử dụng @ts-expect-error trong typescript

Cách sử dụng @ts-expect-error trong typescript

5 ký hiệu khó hiểu cần biết trong TypeScript

5 ký hiệu khó hiểu cần biết trong TypeScript

Dependency Injection trong Typescript

Dependency Injection trong Typescript

Mapped Types trong TypeScript

Mapped Types trong TypeScript

5 Cách giúp bạn loại bỏ

5 Cách giúp bạn loại bỏ "any" trong TypeScript

10 mẹo và thủ thuật hay nhất trong TypeScript

10 mẹo và thủ thuật hay nhất trong TypeScript

Sử dụng Access Modifiers trong TypeScript

Sử dụng Access Modifiers trong TypeScript

Top