Phần 2: Biến trong TypeScript

Trong phần tiếp theo của mình, mình sẽ đi sâu vào các khía cạnh quan trọng của việc sử dụng biến trong TypeScript. Sau đó, sẽ tìm hiểu về phạm vi của biến, cách quản lý biến trong hàm, và cách tổ chức mã nguồn với module để tối ưu hóa sự linh hoạt và bảo trì của mã nguồn. Hãy cùng nhau khám phá những khái niệm quan trọng này để xây dựng ứng dụng TypeScript hiệu quả và dễ bảo trì.

Quản lý Biến trong Phạm vi (Scope)

Phạm vi toàn cục (Global Scope)

• Biến được khai báo ở mức toàn cục có phạm vi sử dụng trên toàn bộ chương trình.

let globalVar: string = "I am global!";

function exampleFunction(): void {
   console.log(globalVar); // Có thể truy cập biến toàn cục trong hàm
}

Phạm vi cục bộ (Local Scope)

• Biến được khai báo bên trong một hàm có phạm vi chỉ tồn tại và sử dụng trong hàm đó.

function exampleFunction(): void {
   let localVar: number = 10;
   console.log(localVar); // Biến chỉ sử dụng được trong hàm
}

Block Scope và Lexical Scope

• TypeScript hỗ trợ Block Scope (phạm vi khối) thông qua từ khóa let và const.

function exampleFunction(): void {
   if (true) {
      let blockVar: string = "I am in a block!";
      console.log(blockVar); // Biến chỉ sử dụng được trong khối lệnh if
   }
   console.log(blockVar); // Lỗi - blockVar không tồn tại ở đây
}

Lexical Scope là khả năng của hàm con được nhìn thấy và sử dụng các biến của hàm cha.

function outerFunction(): void {
   let outerVar: string = "I am from outer!";

   function innerFunction(): void {
      console.log(outerVar); // innerFunction có thể sử dụng biến của outerFunction
   }

   innerFunction();
}

Phạm vi của biến quyết định vùng lưu trữ và sự truy cập của biến trong mã nguồn. Việc hiểu rõ về phạm vi giúp tránh gặp lỗi và tối ưu hóa quản lý biến trong chương trình TypeScript. Trong ví dụ trên, mình đã thấy cách biến toàn cục, biến cục bộ, block scope, và lexical scope hoạt động trong TypeScript.

Biến và Hàm trong TypeScript

Truyền giá trị và tham chiếu

• Trong TypeScript, khi truyền biến vào hàm, mình có thể truyền theo giá trị (đối với kiểu dữ liệu nguyên thủy) hoặc theo tham chiếu (đối với kiểu dữ liệu phức tạp).

// Truyền giá trị
function passByValue(x: number): void {
   x = x + 10;
   console.log(x); // Giá trị của x trong hàm
}

let num: number = 5;
passByValue(num);
console.log(num); // Giá trị của num ngoài hàm không bị thay đổi

// Truyền tham chiếu
function passByReference(arr: number[]): void {
   arr[0] = arr[0] + 10;
   console.log(arr[0]); // Giá trị của phần tử đầu trong mảng trong hàm
}

let numbers: number[] = [5];
passByReference(numbers);
console.log(numbers[0]); // Giá trị của phần tử đầu ngoài hàm bị thay đổi

Biến làm tham số và biến cục bộ

• Hàm có thể nhận các biến làm tham số, giúp tăng tính linh hoạt và tái sử dụng.

function addNumbers(a: number, b: number): number {
   return a + b;
}

let result: number = addNumbers(10, 5);
console.log(result); // 15

​Biến cục bộ trong hàm chỉ tồn tại trong phạm vi của hàm và không thể truy cập từ bên ngoài.

Bài viết này được đăng tại [free tuts .net]

function exampleFunction(): void {
   let localVar: string = "I am local!";
   console.log(localVar); // Biến cục bộ
}

console.log(localVar); // Lỗi - localVar không tồn tại ở đây

Biến toàn cục và tác động lên hàm

• Biến toàn cục có thể ảnh hưởng đến hàm nếu chúng được sử dụng bên trong hàm.

let globalVar: string = "I am global!";

function useGlobalVar(): void {
   console.log(globalVar); // Sử dụng biến toàn cục trong hàm
}

useGlobalVar(); // "I am global!"

Sự hiểu biết về cách biến tương tác với hàm là quan trọng để xây dựng các chức năng linh hoạt và tái sử dụng trong TypeScript. Trong ví dụ trên, mình đã thấy cách truyền giá trị và tham chiếu, sử dụng biến làm tham số, và tác động của biến toàn cục lên hàm.

Biến và Module trong TypeScript

Biến trong Module

• Module trong TypeScript là cách để tổ chức mã nguồn thành các đơn vị độc lập và tái sử dụng. Biến có thể được khai báo trong một module và chỉ sử dụng trong phạm vi của module đó.

// File: mathOperations.ts
export let pi: number = 3.14;

export function add(x: number, y: number): number {
   return x + y;
}

Sau đó, có thể sử dụng biến và hàm từ module đó trong một file TypeScript khác.

// File: main.ts
import { pi, add } from "./mathOperations";

console.log(pi); // Sử dụng biến từ module
console.log(add(5, 3)); // Sử dụng hàm từ module

Biến được xuất và nhập (Export và Import)

• Để biến hoặc hàm có thể sử dụng được ở nơi khác,cần xuất (export) chúng từ module và nhập (import) chúng vào module khác.

// File: utilities.ts
let message: string = "Hello, world!";

export { message };

Trong file khác, có thể nhập biến đã được xuất.

// File: app.ts
import { message } from "./utilities";

console.log(message); // "Hello, world!"

Tổ chức mã nguồn với Module

• Module giúp tổ chức mã nguồn thành các phần độc lập, giảm sự phụ thuộc và tăng khả năng tái sử dụng.

// File: dataHandling.ts
export function processData(data: string): void {
   // Xử lý dữ liệu
}

// File: validation.ts
export function validateInput(input: string): boolean {
   // Kiểm tra đầu vào
   return true;
}

// File: main.ts
import { processData } from "./dataHandling";
import { validateInput } from "./validation";

// Sử dụng các chức năng từ các module khác nhau
processData("Some data");
validateInput("User input");

Module giúp chia nhỏ mã nguồn thành các phần nhỏ và độc lập, giúp quản lý và duy trì mã nguồn một cách hiệu quả. Trong ví dụ trên, mình đã thấy cách sử dụng biến trong module, xuất và nhập biến, cũng như tổ chức mã nguồn với module trong TypeScript.

Biến và Asynchronous Programming trong TypeScript

Sử dụng biến trong bối cảnh bất đồng bộ

• Trong bối cảnh bất đồng bộ, biến có thể chạy trong ngữ cảnh không đồng bộ, nơi các tác vụ mất thời gian để hoàn thành.

let result: number;

setTimeout(() => {
   result = 10;
}, 1000);

console.log(result); // Giá trị của result có thể chưa được gán khi log

Callbacks, Promises và Async/Await

• Sử dụng biến trong các cơ chế bất đồng bộ như Callbacks, Promises, và Async/Await.

// Sử dụng Callback
function fetchData(callback: (data: string) => void): void {
   setTimeout(() => {
      const data: string = "Async data";
      callback(data);
   }, 1000);
}

fetchData((data) => {
   console.log(data); // "Async data"
});

// Sử dụng Promise
function fetchData(): Promise<string> {
   return new Promise((resolve) => {
      setTimeout(() => {
         const data: string = "Async data";
         resolve(data);
      }, 1000);
   });
}

fetchData().then((data) => {
   console.log(data); // "Async data"
});

// Sử dụng Async/Await
async function fetchData(): Promise<string> {
   return new Promise((resolve) => {
      setTimeout(() => {
         const data: string = "Async data";
         resolve(data);
      }, 1000);
   });
}

async function processData(): Promise<void> {
   const data: string = await fetchData();
   console.log(data); // "Async data"
}

processData();

Quản lý trạng thái với biến

• Biến có thể được sử dụng để quản lý trạng thái trong quá trình thực hiện các tác vụ bất đồng bộ.

let isLoading: boolean = true;

function fetchData(): void {
   // Khi bắt đầu tải dữ liệu
   isLoading = true;

   setTimeout(() => {
      // Khi dữ liệu được tải xong
      isLoading = false;
   }, 1000);
}

fetchData();

// Kiểm tra trạng thái tải
if (isLoading) {
   console.log("Loading data...");
} else {
   console.log("Data loaded.");
}

Trong lập trình bất đồng bộ, việc sử dụng biến để quản lý trạng thái và truyền giá trị giữa các pha thực thi là quan trọng. Trong ví dụ trên, mình đã thấy cách biến có thể được sử dụng trong các bối cảnh bất đồng bộ, cũng như cách quản lý trạng thái và sử dụng biến trong Callbacks, Promises, và Async/Await.

Best Practices khi sử dụng Biến trong TypeScript

Tránh sử dụng var

• Tránh sử dụng từ khóa var để khai báo biến vì nó có phạm vi là function-scoped và có thể gây ra hiểu lầm trong quá trình phát triển.

// Không tốt
var x: number = 5;

// Tốt
let y: number = 10;

Chọn kiểu dữ liệu phù hợp

• Chọn kiểu dữ liệu phù hợp với nội dung của biến để TypeScript có thể kiểm tra kiểu và giúp tránh lỗi không mong muốn.

// Không tốt
let value: any = "Hello";

// Tốt
let greeting: string = "Hello";

Tuân thủ quy tắc đặt tên và quản lý phạm vi

• Tuân thủ quy tắc đặt tên như Camel Case hoặc Pascal Case để làm cho mã nguồn dễ đọc và hiểu hơn.
• Quản lý phạm vi của biến một cách cẩn thận để tránh xung đột và hiểu đúng về quy tắc Lexical Scope.

// Không tốt
let my_variable: number = 5;

// Tốt
let myVariable: number = 10;

Sử dụng các best practices khi làm việc với biến trong TypeScript giúp tăng tính đồng nhất, dễ bảo trì, và giảm khả năng gặp lỗi trong mã nguồn. Trong ví dụ trên, mình đã thấy cách tránh sử dụng var, chọn kiểu dữ liệu phù hợp, và tuân thủ quy tắc đặt tên và quản lý phạm vi để viết mã nguồn hiệu quả hơn.

Kết bài

Trong hành trình khám phá về biến trong TypeScript, mình đã đi sâu vào nhiều khía cạnh quan trọng của chúng. Từ cách khai báo và sử dụng biến, quản lý phạm vi, đến các khái niệm như module và xử lý bất đồng bộ, mỗi phần đều mang đến những kiến thức quan trọng để xây dựng ứng dụng TypeScript linh hoạt và dễ bảo trì.

Mình đã tìm hiểu về cách biến có thể tương tác trong các tình huống bất đồng bộ, từ sử dụng trong Callbacks, Promises đến cách tiện lợi của Async/Await. Đồng thời, các best practices đã được giới thiệu để giúp viết mã nguồn hiệu quả, tránh lỗi phổ biến và duy trì mã nguồn một cách thuận tiện.

Nhớ rằng, việc hiểu rõ về biến không chỉ là về việc lưu trữ giá trị, mà còn là về cách chúng tương tác và được tổ chức trong mã nguồn. Hy vọng rằng những kiến thức đã được trình bày sẽ giúp bạn xây dựng mã nguồn TypeScript chất lượng và dễ bảo trì trong các dự án của mình. Chúc bạn thành công trong việc áp dụng những kỹ thuật này vào công việc hàng ngày của mình!