<div id="readability-page-1" class="page"><div><img src="https://velog.velcdn.com/images/2taesung/post/ad9c8d07-32ec-4860-b9ec-fc935c99b215/image.png">
=&gt; 배열 안의 요소들 타입이 변경이 될 수 있음 
=&gt; 이럴때 Union type을 추가하면 되긴 함 
=&gt; 그런데, 추가될 때마다 Union type을 추가하면 너무너무 안예쁨
<img src="https://velog.velcdn.com/images/2taesung/post/91bc6b5a-1c75-4fa1-9a63-a7e7404aee27/image.png">
<h2 id="generic">Generic</h2>
<img src="https://velog.velcdn.com/images/2taesung/post/2f68ef44-74c3-432e-a3ff-31e091c72293/image.png">
=&gt; 타입 매개변수 라고도 함 
=&gt; T, A 뭐 상관은 없는데 일반적으로 Type의 T
<img src="https://velog.velcdn.com/images/2taesung/post/7099363b-2abc-4aed-8b3d-1c7bc6805c0f/image.png">
=&gt; 명시적으로 타입을 안써줘도 ts가 알아서 알아채긴 함.
<h2 id="2-interface에서-활용하기">2. interface에서 활용하기</h2>
<pre><code>interface Mobile&lt;T&gt; {
 name: string;
 price: number;
 option: T;
}

const m1: Mobile&lt;object&gt; = {
 name: 's21',
 price: 1000,
 option: {
 color: "red",
 coupon: false,
 }
}

console.log(m1);

const m2: Mobile&lt;string&gt; = {
 name: 's21',
 price: 1000,
 option: 'Noting'
}

console.log(m2);</code></pre>
<h2 id="3">3.</h2>
<img src="https://velog.velcdn.com/images/2taesung/post/9cc001d1-439c-44d1-a829-e786dd3d10bd/image.png">
=&gt; 지금 이 부분만 보고 name이 있다고 장담할 수 없다. 
=&gt; 그치 .. 내가 조금 헷갈렸던건 interface가 뭔가 object 처럼 받아들여서 그럼 
=&gt; interface는 ts가 이해하기 좋게 알려주는 것일 뿐.
=&gt; 제네릭을 사용해 T를 활용한 지금 코드만으로 data object에 name 속성이 있다고 장담할 수 없음
=&gt; 이건 좀 아직 온전히 이해가 안됨. =&gt; 추후 고민
<pre><code>interface User {
 name: string;
 age: number;
}

interface Car {
 name: string;
 color: string;
}

const user: User = { name: "a", age: 10}

function showName&lt;T extends { name: string }&gt;(data: T): string {
 return data.name;
}

console.log(showName(user));</code></pre>
=&gt; 아무튼 다음과 같이 확장해서 name을 string으로 특정함</div></div>

2taesung.log

Taesung Lee

=> 배열 안의 요소들 타입이 변경이 될 수 있음
=> 이럴때 Union type을 추가하면 되긴 함
=> 그런데, 추가될 때마다 Union type을 추가하면 너무너무 안예쁨
Generic
=> 타입 매개변수 라고도 함
=> T, A 뭐 상관은 없는데 일반적으로 Type의 T
=> 명시적으로 타입을 안써줘도 ts가 알아서 알아채긴 함.
2. interface에서 활용하기
interface Mobile<T> {
 name: string;
 price: number;
 option: T;
}
const m1: Mobile<object> = {
 name: 's21',
 price: 1000,
 option: {
 color: "red",
 coupon: false,
 }
}
console.log(m1);
const m2: Mobile<string> = {
 name: 's21',
 price: 1000,
 option: 'Noting'
}
console.log(m2);
3.
=> 지금 이 부분만 보고 name이 있다고 장담할 수 없다.
=> 그치 .. 내가 조금 헷갈렸던건 interface가 뭔가 object 처럼 받아들여서 그럼
=> interface는 ts가 이해하기 좋게 알려주는 것일 뿐.
=> 제네릭을 사용해 T를 활용한 지금 코드만으로 data object에 name 속성이 있다고 장담할 수 없음
=> 이건 좀 아직 온전히 이해가 안됨. => 추후 고민
interface User {
 name: string;
 age: number;
}
interface Car {
 name: string;
 color: string;
}
const user: User = { name: "a", age: 10}
function showName<T extends { name: string }>(data: T): string {
 return data.name;
}
console.log(showName(user));
=> 아무튼 다음과 같이 확장해서 name을 string으로 특정함

[ts] Generic

댓글