Giới thiệu

Chào mừng bạn đến với bài học về cách tối ưu hóa hệ thống trong TypeScript. Trong bài viết này, chúng ta sẽ tìm hiểu về các cách để tối ưu hóa hệ thống của bạn.

Sử dụng kiểu dữ liệu chính xác

Trong TypeScript, việc sử dụng kiểu dữ liệu chính xác có thể giúp tối ưu hóa việc sử dụng bộ nhớ. Ví dụ, nếu bạn biết rằng một biến sẽ chỉ chứa số nguyên, bạn nên khai báo nó là number thay vì any.

let count: number = 0; // Đúng
let count: any = 0; // Sai

Trong ví dụ trên, biến count chỉ chứa số nguyên, vì vậy chúng ta nên khai báo nó là number.

Sử dụng let thay vì var

Trong TypeScript, let và var đều được sử dụng để khai báo biến. Tuy nhiên, let có một số ưu điểm vượt trội so với var mà chúng ta nên tận dụng.

Khái niệm về let và var

• var: Đây là từ khóa được sử dụng để khai báo biến trong JavaScript từ thời kỳ đầu. Biến khai báo bằng var có phạm vi hoạt động trong toàn bộ function chứa nó.
• let: Đây là từ khóa được giới thiệu trong ES6 và cũng được sử dụng trong TypeScript để khai báo biến. Biến khai báo bằng let có phạm vi hoạt động trong block chứa nó.

Lý do nên sử dụng let thay vì var

• Phạm vi hoạt động: Như đã nói ở trên, let có phạm vi hoạt động nhỏ hơn var. Điều này giúp giảm thiểu khả năng xảy ra lỗi do việc truy cập nhầm vào biến không mong muốn.
• Tránh hoisting: Trong JavaScript và TypeScript, var sẽ bị "hoisting" - nghĩa là nó sẽ được đưa lên đầu phạm vi hoạt động của nó. Điều này có thể gây ra lỗi nếu bạn không cẩn thận. Ngược lại, let không bị hoisting, giúp mã nguồn của bạn dễ đọc và dễ hiểu hơn.
• Tránh ghi đè: Nếu bạn khai báo lại một biến đã được khai báo bằng var, TypeScript sẽ không báo lỗi. Tuy nhiên, nếu bạn làm điều tương tự với let, TypeScript sẽ báo lỗi. Điều này giúp bạn tránh ghi đè lên biến một cách không mong muốn.

Dưới đây là một ví dụ về việc sử dụng let thay vì var:

function example() {
  var x = 10;
  if (true) {
    var x = 20;  // This will overwrite the previous 'x'
    console.log(x);  // Outputs 20
  }
  console.log(x);  // Outputs 20
}

function exampleWithLet() {
  let y = 10;
  if (true) {
    let y = 20;  // This will not overwrite the previous 'y'
    console.log(y);  // Outputs 20
  }
  console.log(y);  // Outputs 10
}

Như bạn thấy, việc sử dụng let giúp mã nguồn của bạn trở nên rõ ràng và dễ hiểu hơn.

Sử dụng const thay vì let

Khi giá trị của một biến không thay đổi, bạn nên sử dụng const thay vì let. Điều này không chỉ giúp tối ưu hóa hệ thống, mà còn giúp mã nguồn dễ đọc hơn.

const PI = 3.14; // Đúng
let PI = 3.14; // Sai

Trong ví dụ trên, giá trị của PI không thay đổi, vì vậy chúng ta nên sử dụng const thay vì let.

Tận dụng cache

Cache là một cách hiệu quả để lưu trữ và truy cập dữ liệu nhanh hơn. Bạn có thể tận dụng cache trong TypeScript bằng cách lưu trữ dữ liệu mà bạn sẽ sử dụng nhiều lần.

let cache = {};

function getData(key) {
  if (cache[key]) {
    return cache[key];
  }

  // Giả sử rằng việc lấy dữ liệu từ key mất nhiều thời gian
  let data = expensiveOperation(key);

  cache[key] = data;
  return data;
}

Trong ví dụ trên, chúng ta sử dụng một đối tượng cache để lưu trữ dữ liệu. Khi cần lấy dữ liệu, chúng ta kiểm tra xem dữ liệu đã được lưu trong cache chưa. Nếu đã có, chúng ta sẽ trả về dữ liệu từ cache thay vì thực hiện một hoạt động tốn kém.

Sử dụng toán tử === thay vì ==

Trong TypeScript, toán tử === không chỉ so sánh giá trị mà còn so sánh kiểu dữ liệu. Điều này giúp chúng ta tránh được những lỗi không mong muốn do việc so sánh giữa các kiểu dữ liệu khác nhau.

Ví dụ:

let a = '5';
let b = 5;

console.log(a == b); // true
console.log(a === b); // false

Trong ví dụ trên, a == b trả về true vì nó chỉ so sánh giá trị, không so sánh kiểu dữ liệu. Trong khi đó, a === b trả về false vì nó so sánh cả giá trị và kiểu dữ liệu.

Sử dụng destructuring

Destructuring là một tính năng trong TypeScript giúp chúng ta truy cập các thuộc tính và phần tử một cách hiệu quả.

Ví dụ:

let student = {
  name: 'John',
  age: 20
};

let { name, age } = student;

console.log(name); // John
console.log(age); // 20

Trong ví dụ trên, chúng ta sử dụng destructuring để truy cập các thuộc tính name và age từ đối tượng student.

Tránh sử dụng các phép toán và hàm không cần thiết trong vòng lặp

Khi làm việc với vòng lặp, chúng ta nên tránh sử dụng các phép toán và hàm không cần thiết. Điều này giúp tăng tốc độ thực thi của vòng lặp.

Ví dụ:

let arr = [1, 2, 3, 4, 5];

// Không tối ưu
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

// Tối ưu
let len = arr.length;
for (let i = 0; i < len; i++) {
  console.log(arr[i]);
}

Trong ví dụ trên, cách thứ hai tối ưu hơn vì nó không cần phải tính toán arr.length mỗi lần lặp.

Sử dụng Lazy Loading

Lazy Loading là một kỹ thuật mà ứng dụng chỉ tải những phần cần thiết khi cần thiết, thay vì tải toàn bộ ứng dụng ngay từ đầu. Điều này giúp giảm thiểu thời gian tải ban đầu và tăng hiệu suất của ứng dụng.

// Ví dụ về Lazy Loading trong TypeScript
import('./module').then((module) => {
  // Sử dụng module ở đây
});

Trong đoạn mã trên, module chỉ được tải khi hàm import được gọi, không phải khi ứng dụng khởi động.

Tvối ưu hóa việc render DOM

Việc render DOM có thể tốn kém về mặt hiệu suất, đặc biệt khi có nhiều thay đổi cần được thực hiện. Có hai phương pháp chính để tối ưu hóa việc này: sử dụng Virtual DOM hoặc memoization.

Virtual DOM

Virtual DOM là một cách tiếp cận mà ứng dụng tạo ra một bản sao của DOM thực tế, và thực hiện tất cả các thay đổi trên bản sao này trước khi cập nhật DOM thực tế.

// Ví dụ về Virtual DOM trong TypeScript
let virtualDOM = document.cloneNode(true);
// Thực hiện các thay đổi trên virtualDOM
document = virtualDOM;

Memoization

Memoization là một kỹ thuật lưu trữ kết quả của các hàm đắt tiền để chúng có thể được tái sử dụng sau này, thay vì phải tính toán lại.

// Ví dụ về memoization trong TypeScript
let cache = {};
function expensiveFunction(arg) {
  if (cache[arg]) {
    return cache[arg];
  }
  let result = /* expensive computation */;
  cache[arg] = result;
  return result;
}

Trong đoạn mã trên, kết quả của expensiveFunction được lưu trong cache để có thể tái sử dụng sau này.

v

Sử Dụng Module Bundler

Module bundler là một công cụ mạnh mẽ giúp tối ưu hóa kích thước file bundle và tăng tốc độ tải trang. Công cụ này hoạt động bằng cách gói các module và phụ thuộc của chúng vào một hoặc nhiều file bundle nhỏ hơn.

Cách Sử Dụng

Đầu tiên, bạn cần cài đặt một module bundler. Có nhiều lựa chọn khác nhau như Webpack, Rollup, hoặc Parcel. Sau khi cài đặt, bạn có thể cấu hình bundler để tối ưu hóa kích thước file bundle.

// Ví dụ về cách sử dụng Webpack
const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Trong ví dụ trên, Webpack sẽ gói tất cả các module và phụ thuộc của chúng vào một file bundle.js.

Tối Ưu Hóa Việc Xử Lý Các Yêu Cầu

Khi làm việc với API, việc gửi các yêu cầu không cần thiết có thể làm chậm hệ thống của bạn. Do đó, tối ưu hóa việc xử lý các yêu cầu là một phần quan trọng của việc tối ưu hóa hệ thống.

Cách Tối Ưu

Một cách để tối ưu hóa việc xử lý các yêu cầu là sử dụng caching. Caching cho phép bạn lưu trữ dữ liệu từ các yêu cầu trước đó, giúp giảm số lượng yêu cầu cần gửi.

// Ví dụ về cách sử dụng caching
let cache = {};

function getData(key) {
  if (cache[key]) {
    return Promise.resolve(cache[key]);
  }

  return fetch(key)
    .then(response => response.json())
    .then(data => {
      cache[key] = data;
      return data;
    });
}

Trong ví dụ trên, chúng ta sử dụng một đối tượng cache để lưu trữ dữ liệu từ các yêu cầu trước đó. Khi yêu cầu dữ liệu, chúng ta kiểm tra xem dữ liệu có trong cache không. Nếu có, chúng ta sẽ trả về dữ liệu từ cache thay vì gửi một yêu cầu mới.