Khóa học Frontend NextJS + React

function identityJS(arg) {
  return arg;
}

function identityAny(arg: any): any {
  return arg;
}

let numberResult = identityAny(123); // Kiểu là 'any'
let stringResult = identityAny("hello"); // Kiểu là 'any'

// Khi kiểu là 'any', TypeScript không thể kiểm tra lỗi nếu bạn cố gắng
// gọi một phương thức không tồn tại trên kiểu gốc:
// numberResult.toFixed(); // OK (vì numberResult có thể là number)
// numberResult.toUpperCase(); // Sẽ không báo lỗi ở compile-time, nhưng lỗi ở runtime!

function identityTS<T>(arg: T): T {
  return arg;
}

// Sử dụng hàm identityTS:

// Cách 1: TypeScript tự suy luận kiểu T
let numberResultTS = identityTS(123); // TypeScript suy luận T là 'number'
console.log(typeof numberResultTS); // Output: number

let stringResultTS = identityTS("hello"); // TypeScript suy luận T là 'string'
console.log(typeof stringResultTS); // Output: string

let booleanResultTS = identityTS(true); // TypeScript suy luận T là 'boolean'

// Bây giờ, TypeScript sẽ kiểm tra kiểu chặt chẽ hơn:
// numberResultTS.toUpperCase(); // Lỗi compile-time: Property 'toUpperCase' does not exist on type 'number'. Tuyệt vời!

// Hàm lấy phần tử đầu tiên của một mảng bất kỳ
function getFirstElement<T>(arr: T[]): T | undefined {
  if (arr.length === 0) {
    return undefined;
  }
  return arr[0];
}

let numbers = [10, 20, 30];
let firstNumber = getFirstElement(numbers); // TypeScript suy luận T là 'number', firstNumber có kiểu 'number | undefined'
console.log(firstNumber); // Output: 10

let strings = ["apple", "banana", "cherry"];
let firstString = getFirstElement(strings); // TypeScript suy luận T là 'string', firstString có kiểu 'string | undefined'
console.log(firstString); // Output: apple

let emptyArray: number[] = [];
let resultFromEmpty = getFirstElement(emptyArray); // TypeScript suy luận T là 'number', resultFromEmpty có kiểu 'number | undefined'
console.log(resultFromEmpty); // Output: undefined

interface Box<T> {
  value: T;
}

// Sử dụng interface Box:

let numberBox: Box<number> = { value: 123 };
console.log(numberBox.value); // Output: 123 (Kiểu là number)

let stringBox: Box<string> = { value: "hello generics" };
console.log(stringBox.value); // Output: hello generics (Kiểu là string)

// Bạn không thể gán một kiểu khác với kiểu đã khai báo:
// let booleanBox: Box<boolean> = { value: "true" }; // Lỗi compile-time: Type 'string' is not assignable to type 'boolean'.

interface Container<T> {
  id: number;
  item: T;
  description: string;
}

let productContainer: Container<{ name: string, price: number }> = {
  id: 1,
  item: { name: "Laptop", price: 1200 },
  description: "A powerful laptop"
};

console.log(productContainer.item.name); // Output: Laptop (Kiểu của item là { name: string, price: number })

let statusContainer: Container<string> = {
  id: 2,
  item: "Pending",
  description: "Current order status"
};

console.log(statusContainer.item.toUpperCase()); // Output: PENDING (Kiểu của item là string)

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    // Lưu ý: removeItem hoạt động tốt với primitive types (string, number, boolean)
    // Đối với objects, nó sẽ chỉ xóa instance *giống hệt* về mặt tham chiếu
    const index = this.data.indexOf(item);
    if (index > -1) {
      this.data.splice(index, 1);
    }
  }

  getItems(): T[] {
    // Trả về bản sao để tránh thay đổi mảng gốc từ bên ngoài
    return [...this.data];
  }
}

// Sử dụng lớp DataStorage:

// Storage cho số
const numberStorage = new DataStorage<number>();
numberStorage.addItem(10);
numberStorage.addItem(20);
// numberStorage.addItem('30'); // Lỗi compile-time! Phải là number

console.log("Number storage:", numberStorage.getItems()); // Output: Number storage: [ 10, 20 ]
numberStorage.removeItem(10);
console.log("Number storage after remove:", numberStorage.getItems()); // Output: Number storage after remove: [ 20 ]


// Storage cho chuỗi
const stringStorage = new DataStorage<string>();
stringStorage.addItem("Apple");
stringStorage.addItem("Banana");
// stringStorage.addItem(123); // Lỗi compile-time! Phải là string

console.log("String storage:", stringStorage.getItems()); // Output: String storage: [ 'Apple', 'Banana' ]
stringStorage.removeItem("Apple");
console.log("String storage after remove:", stringStorage.getItems()); // Output: String storage after remove: [ 'Banana' ]

// Storage cho đối tượng (cẩn thận với removeItem)
const objectStorage = new DataStorage<object>();
const obj1 = { name: "Max" };
const obj2 = { name: "Manu" };
objectStorage.addItem(obj1);
objectStorage.addItem(obj2);

console.log("Object storage:", objectStorage.getItems()); // Output: Object storage: [ { name: 'Max' }, { name: 'Manu' } ]

// remove obj1 (theo tham chiếu)
objectStorage.removeItem(obj1);
console.log("Object storage after remove obj1:", objectStorage.getItems()); // Output: Object storage after remove obj1: [ { name: 'Manu' } ]

// remove một đối tượng mới có cùng giá trị (sẽ không hoạt động vì khác tham chiếu)
objectStorage.removeItem({ name: "Manu" });
console.log("Object storage after remove {name: 'Manu'}:", objectStorage.getItems()); // Output: Object storage after remove {name: 'Manu' } : [ { name: 'Manu' } ] - Vẫn còn!

// Định nghĩa một interface mô tả thuộc tính cần có
interface Lengthwise {
  length: number;
}

// Hàm Generic chỉ chấp nhận các kiểu có thuộc tính 'length'
function loggingIdentityWithConstraint<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // OK vì T được đảm bảo có thuộc tính .length
  return arg;
}

// Sử dụng hàm với ràng buộc:

// Chuỗi có thuộc tính .length
loggingIdentityWithConstraint("hello constraint"); // OK. Output: 18

// Mảng có thuộc tính .length
loggingIdentityWithConstraint([10, 20, 30, 40]); // OK. Output: 4

// Số KHÔNG có thuộc tính .length
// loggingIdentityWithConstraint(3); // Lỗi compile-time: Argument of type 'number' is not assignable to parameter of type 'Lengthwise'. Tuyệt vời!

// Đối tượng không có thuộc tính .length
// loggingIdentityWithConstraint({ value: 10 }); // Lỗi compile-time tương tự

// Hàm lấy giá trị của một thuộc tính từ một đối tượng
// O là kiểu của đối tượng, K là kiểu của key (tên thuộc tính)
function getProperty<O, K extends keyof O>(obj: O, key: K): O[K] {
  return obj[key];
}

let person = { name: "Alice", age: 30, city: "New York" };

// Sử dụng getProperty:

// Lấy thuộc tính 'name' (string)
let personName = getProperty(person, "name"); // personName có kiểu 'string'
console.log(personName.toUpperCase()); // OK

// Lấy thuộc tính 'age' (number)
let personAge = getProperty(person, "age"); // personAge có kiểu 'number'
console.log(personAge.toFixed(2)); // OK

// Cố gắng lấy thuộc tính không tồn tại
// let personAddress = getProperty(person, "address"); // Lỗi compile-time: Argument of type '"address"' is not assignable to parameter of type '"name" | "age" | "city"'. Tuyệt vời!

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

let myTuple1 = pair("hello", 123); // TypeScript suy luận T là 'string', U là 'number'. myTuple1 có kiểu '[string, number]'
console.log(myTuple1); // Output: [ 'hello', 123 ]

let myTuple2 = pair(true, { status: "done" }); // TypeScript suy luận T là 'boolean', U là '{ status: string }'. myTuple2 có kiểu '[boolean, { status: string }]'
console.log(myTuple2); // Output: [ true, { status: 'done' } ]

// Bạn có thể truy cập các phần tử với type safety:
console.log(myTuple1[0].toUpperCase()); // OK, vì myTuple1[0] là string
console.log(myTuple1[1].toFixed(2)); // OK, vì myTuple1[1] là number

// console.log(myTuple1[0].toFixed()); // Lỗi compile-time! Property 'toFixed' does not exist on type 'string'.