🚩: generic과 interface를 extends로 활용

Author: 4BFC

src/index.ts

@@ -1,29 +1,17 @@
 // Generic : 클래스나 타입을 재사용하기 위한 문법
 // interface와 Generic을 사용해서 활용할 수도 있다.
 
-import { Mobile } from "./utils/data.interface";
+import { myUser, myCar, myBook } from "./utils/data.interface";
 
-const m1: Mobile<object> = {
-  name: "s21",
-  price: 1000,
-  option: {
-    color: "red",
-    coupon: false,
-  }
-};
+const user: myUser = { name: "a", age: 10 };
+const car: myCar = { name: "bmw", color: "red" };
+const book: myBook = { price: 3000 };
 
-// object의 타입이 지정이 되어 있다면 아래와 같이 사용하면 된다.
-const m11: Mobile<{ color: string; coupon: boolean }> = {
-  name: "s21",
-  price: 1000,
-  option: {
-    color: "red",
-    coupon: false,
-  }
-};
+// 제네릭 T를 사용해보면 T가 name 속성을 가지고 있다는 보장이 없기 때문에 error가 뜬다. 따라서 name의 타입을 extends를 사용해서 확장 시키면 error가 사라진다.
+function showName<T extends { name: string }>(data: T): string {
+  return data.name;
+}
 
-const m2: Mobile<string> = {
-  name: "s20",
-  price: 900,
-  option: "good",
-};
+showName(user);
+showName(car);
+//showName(book); //error -> book은 name 객체가 없기 때문에 error가 발생한다. 이를 해결하기 위해서는 조건을 통해서 유연하게 대체를 할수 있다.

src/utils/data.interface.ts

@@ -80,4 +80,18 @@ export interface Mobile<T> {
   name: string;
   price: number;
   option: T;
+}
+
+export interface myUser {
+  name: string;
+  age: number;
+}
+
+export interface myCar {
+  name: string;
+  color: string;
+}
+
+export interface myBook {
+  price: number;
 }