📌 코드 해석

⭐ 제네릭(Generic)

😁 getSize 함수

• 제네릭 함수 getSize는 배열의 길이를 반환합니다.
• arr 파라미터는 T 타입의 배열입니다.
• T는 getSize를 호출할 때 타입 인자로 결정됩니다.

// 제네릭 함수 `getSize`는 배열의 길이를 반환합니다.
function getSize<T>(arr: T[]): number {
  return arr.length;
}

// `arr1`은 `number` 타입의 배열입니다.
const arr1: number[] = [1, 2, 3];
getSize<number | string>(arr1);

// `arr2`는 `string` 타입의 배열입니다.
const arr2: string[] = ["a", "b", "c"];
getSize<string>(arr2);

// `arr3`은 `boolean` 타입의 배열입니다. 타입 인자 생략 가능합니다.
const arr3 = [false, true, true];
getSize(arr3);

// `arr4`는 객체 타입의 배열입니다.
const arr4 = [{}, {}, { name: "Tim" }];
getSize(arr4);

😁 Mobile 인터페이스

• Mobile 인터페이스는 모바일 기기를 나타냅니다.
• T는 option 속성의 타입입니다.
• m1과 m2는 Mobile 객체입니다.

// 모바일 기기를 나타내는 `Mobile` 인터페이스
interface Mobile<T> {
  name: string;
  price: number;
  option: T;
}

// `m1`은 `{ color: string; coupon: boolean }` 타입의 `option` 속성을 가진 `Mobile` 객체입니다.
const m1: Mobile<{ color: string; coupon: boolean }> = {
  name: "s21",
  price: 1000,
  option: {
    color: "red",
    coupon: false,
  }
};

// `m2`는 `string` 타입의 `option` 속성을 가진 `Mobile` 객체입니다.
const m2: Mobile<string> = {
  name: "s20",
  price: 900,
  option: "Good",
};

😁 showName 함수

• 제네릭 함수 showName은 name 속성을 갖는 타입의 인자를 받아 name 속성을 반환합니다.
• data 파라미터는 { name: string } 타입을 확장한 타입입니다.
• showName을 호출할 때 data 파라미터의 타입이 결정됩니다.

// `User` 인터페이스
interface User {
  name: string;
  age: number;
}

// `Car` 인터페이스
interface Car {
  name: string;
  color: string;
}

// `Book` 인터페이스
interface Book {
  price: number;
}

// 제네릭 함수 `showName`은 `name` 속성을 갖는 타입의 인자를 받아 `name` 속성을 반환합니다.
function showName<T extends { name: string }>(data: T): string {
  return data.name;
}

const user: User = { name: "a", age: 10 };
const car: Car = { name: "bmw", color: "red"};
const book: Book = { price: 3000 };

showName(user); // "a"
showName(car); // "bmw"
// showName(book); // 에러: 'Book'에는 'name' 속성이 없습니다.