React: ES 6, Import và Export - Day 4.2

Trong TypeScript, import và export default là cách để chia sẻ mã giữa các file và các module trong ứng dụng. Đây là các tính năng cơ bản của ES6 (ECMAScript 6) và được TypeScript hỗ trợ hoàn toàn.

ECMAScript 6

JavaScript ES6 (còn được gọi là ECMAScript 2015 hoặc ECMAScript 6) là phiên bản JavaScript mới hơn được giới thiệu vào năm 2015.

ECMAScript là tiêu chuẩn mà ngôn ngữ lập trình JavaScript sử dụng. ECMAScript cung cấp đặc điểm kỹ thuật về cách thức hoạt động của ngôn ngữ lập trình JavaScript. Các tính năng mới như class, inherit, ...

• let và const để khai báo biến
• Arrow functions để viết các hàm ngắn gọn hơn
• Spread (…) operator để mở rộng một iterable thành các phần tử riêng lẻ
• For/of loop để lặp qua các giá trị của một đối tượng iterable
• Classes để định nghĩa các lớp
• Promises để xử lý bất đồng bộ
• Template literals để tạo chuỗi có thể chứa biểu thức

let và const

let và const dùng để khai báo biến.  

let tương tự với var trong C#, tuy nhiên có 1 điểm khác biệt

let age: number = 30;
if (true) {
  let age: number = 40;
  console.log('Age inside block:', age); // Output: Age inside block: 40
}
console.log('Age outside block:', age); // Output: Age outside block: 30

const là hằng, tương tự như C#, tuy nhiên các property trong object được phép thay đổi

const pi: number = 3.14;
// pi = 3.1415; // Error

const person = {
  name: 'John',
  age: 25,
};
person.age = 30; // no problem

Bạn nên hạn chế sử dụng từ khóa var vì var có scope là function, còn let và const có scope là block

var declarations are globally scoped or function scoped while let and const are block scoped. var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared. They are all hoisted to the top of their scope

Arrow function

Arrow function trong TypeScript là một cú pháp viết ngắn gọn để tạo hàm (function). Được giới thiệu trong ECMAScript 6 (ES6), nó cho phép bạn viết các hàm một cách dễ dàng hơn và giữ ngữ cảnh (lexical context) của this trong hàm, giúp tránh một số vấn đề thường gặp khi sử dụng anonymous function.

// Arrow function
const add = (a: number, b: number): number => {
  return a + b;
};

// Arrow function with implicit return (one-liner)
const multiply = (a: number, b: number): number => a * b;

// Using arrow function as callback
const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((num: number) => num * num);

Trường hợp arrow function có thân hàm chỉ có 1 dòng, bạn không cần return

// Arrow function
const add = (a: number, b: number): number => {
  a + b;
};

Import

import: Được sử dụng để nhập các thành phần (biến, hàm, lớp, hằng số, hoặc module) từ một tệp khác vào tệp hiện tại. Nó cho phép bạn sử dụng các thành phần đã được xuất từ file khác trong file hiện tại.

Spread

The spread operator is a new addition to the features available in the JavaScript ES6 version. The spread operator is used to expand or spread an iterable or an array in Typescript or Javascript.

Spread (...) operator là một cú pháp giúp bạn mở rộng một iterable (như một mảng hoặc đối tượng) thành các phần tử riêng lẻ. Điều này cho phép bạn sao chép hoặc kết hợp các giá trị của một iterable vào một iterable khác hoặc giải nén các giá trị của iterable thành các phần tử riêng lẻ.

Ví dụ về Spread operator với mảng:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6]

Trong ví dụ trên, chúng ta sử dụng Spread operator (...) để kết hợp các phần tử của hai mảng arr1 và arr2 thành một mảng mới combinedArray.

Ví dụ về Spread operator với đối tượng:

const person = { name: 'John', age: 30 };
const additionalInfo = { city: 'New York', country: 'USA' };

const personWithAdditionalInfo = { ...person, ...additionalInfo };
console.log(personWithAdditionalInfo);
// Output: { name: 'John', age: 30, city: 'New York', country: 'USA' }

Spread operator rất hữu ích khi bạn muốn sao chép các giá trị của một iterable vào một iterable mới hoặc kết hợp các giá trị từ nhiều iterable thành một iterable duy nhất. Nó giúp làm cho code dễ đọc và ngắn gọn hơn và được sử dụng phổ biến trong TypeScript và JavaScript.

Cập nhật giá trị trong object

Giả sử bạn có đoạn code React sau

const [formData, setFormData] = useState(data);
//...
const handleInputChange = (e) => {
  const { name, value } = e.target;
  setFormData({
    ...formData,
    [name]: value,
  });
};

Yêu cầu đặt ra là bạn cần update lại value cho formData với giá trị từ e.target

Giả sử chúng ta có input đầu vào

• name: giá trị name của input, ví dụ username
• value: giá trị mà người dùng nhập vào, ví dụ tutruong

Bạn dùng hàm setFormData() để thay đổi giá trị của formData. Câu lệnh {...formData} sẽ tạo ra object dựa trên formData. Sử dụng ngoặc vuông [name] cho phép bạn sử dụng giá trị của biến name như một biến động để tạo tên thuộc tính trong đối tượng. Điều này rất hữu ích khi bạn muốn đặt tên thuộc tính dựa vào dữ liệu động.

Ví dụ, nếu name có giá trị là "email", thì [name]: value sẽ tạo một thuộc tính có tên là "email" trong đối tượng:

const name = "email";
const obj = {
  [name]: "example@example.com"
};
console.log(obj); // { email: "example@example.com" }

for..of

Vòng lặp for...of để lặp qua các giá trị của một đối tượng iterable như mảng (Array), bộ đôi (Set), và chuỗi (String).

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  console.log(num);
}
// Output: 1 2 3 4 5

Lưu ý: Trong for...of, bạn có thể sử dụng break và continue để kiểm soát vòng lặp, trong khi forEach không hỗ trợ điều này.

Template literals

Template literals là một cú pháp cho phép bạn tạo các chuỗi có định dạng phức tạp bằng cách chèn các biểu thức vào trong chuỗi một cách dễ dàng. Cú pháp của Template literals sử dụng dấu backtick (`) và dấu đôi ngoặc nhọn

(${expression}) để chèn giá trị của biểu thức vào trong chuỗi.
const name = 'John';
const age = 30;

// Sử dụng Template literals
const message = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(message);
// Output: Hello, my name is John and I am 30 years old.

Template literals cũng hỗ trợ việc tạo chuỗi đa dòng một cách dễ dàng:

const multilineMessage = `
  Hello, 
  This is a multiline 
  message.
`;

console.log(multilineMessage);
// Output:
//   Hello, 
//   This is a multiline 
//   message.

Promises

Promises được sử dụng để xử lý các tác vụ bất đồng bộ (asynchronous) một cách dễ dàng và tiện lợi. Promise đại diện cho một giá trị hoặc kết quả có thể chưa có ngay lúc này, nhưng sẽ có trong tương lai.

Ví dụ

function fetchDataFromServer(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = "Data from the server";
      resolve(data); // get data successfully
    }, 2000); // suppose to get data in 2s
  });
}

// Sử dụng Promise
fetchDataFromServer()
  .then((data) => {
    console.log("Data received:", data);
  })
  .catch((error) => {
    console.error("Error:", error.message);
  });

Import và Export

Trong TypeScript, import và export default là cách để chia sẻ mã giữa các file và các module trong ứng dụng. Đây là các tính năng cơ bản của ES6 (ECMAScript 6) và được TypeScript hỗ trợ hoàn toàn.

import: Được sử dụng để nhập các thành phần (biến, hàm, lớp, hằng số, hoặc module) từ một file khác vào file hiện tại. Nó cho phép bạn sử dụng các thành phần đã được xuất từ file khác trong file hiện tại.

import { exportedItem } from './path/to/file';

export default: Được sử dụng để xuất một thành phần duy nhất từ file hiện tại để có thể được nhập một cách dễ dàng trong tệp khác mà không cần tên giống nhau.

export default exportedItem;

Ví dụ:

// fileA.ts
const message = "Hello, World!";
export default message;

// fileB.ts
import message from './fileA';
console.log(message); // Output: Hello, World!

Destructuring Assignment

Destructuring Assignment là một cú pháp cho phép tách dữ liệu được lưu trữ bên trong (nested) Objects hoặc Arrays (tổng quát hơn là các iterable values) và gán chúng cho các biến riêng biệt.
Từ định nghĩa trên chúng ta có thể chia Destructuring Assignment ra thành hai nhóm chính:

• Object Destructuring
• Array Destructuring

Trước khi tìm hiểu từng nhóm trên, chúng ta hay cùng xem qua một vài ví dụ đơn giản sau:

Array Destructuring

const colors = ['red', 'green', 'blue'];

Bạn có thể sử dụng destructuring assignment để trích xuất các giá trị từ mảng này và gán chúng vào các biến riêng lẻ:

const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor); // 'red'
console.log(secondColor); // 'green'
console.log(thirdColor); // 'blue'

Object destructing

const person = { name: 'John', age: 30, city: 'New York' };

const { name, age, city } = person;

console.log(name); // 'John'
console.log(age); // 30
console.log(city); // 'New York'

Destructuring assignment không chỉ áp dụng cho mảng và đối tượng, mà còn có thể được sử dụng trong nhiều tình huống khác nhau, như trích xuất các giá trị từ kết quả của một hàm hoặc từ một biểu thức phức tạp.

Rest Parameters

Khi kết hợp destructuring assignment với rest parameters (...), bạn có thể tách một số phần tử từ mảng và gán phần còn lại vào một biến duy nhất kiểu mảng. Điều này hữu ích khi bạn muốn trích xuất một số phần tử đầu tiên từ mảng và lưu lại các phần tử còn lại vào biến khác.
Ví dụ:

const numbers = [1, 2, 3, 4, 5];

const [first, second, ...rest] = numbers;

console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]

Kết hợp Destructuring Assignment với Giá trị Mặc định

Khi bạn sử dụng destructuring assignment, bạn cũng có thể gán giá trị mặc định cho các biến trích xuất từ cấu trúc dữ liệu nếu giá trị tương ứng không tồn tại.
Ví dụ:

const person = { name: 'John', age: 30 };

const { name, age, city = 'Unknown' } = person;

console.log(name); // 'John'
console.log(age); // 30
console.log(city); // 'Unknown' (do city không tồn tại trong đối tượng person)

Tham khảo

Imports và Exports trong JavaScript ES

Destructuring Assignment in ES6