타입스크립트 맵드타입을 알아보겠습니다. 맵드타입이란 기존에 정의가 되어 있는 타입을 새로운 타입으로 변환해 주는 것을 의미 합니다. 자바스크립트의 map 이라는 함수를 이용하는 것과 비슷합니다. const a = [1, 2, 3]; const b = a.map(item => item * 2); console.log(b); // [2, 4, 6] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map 자바스크립트의 맵은 오브젝트, 배열 등의 객체를 순회하면서 새로운 객체로 반환하는 함수 입니다. Array.prototype.map() - JavaScript | MDN map() 메서드는 배열 내의 모든 요..

유틸리티 타입을 구현하는 방법 아래의 문법이 생성되기까지 나온 과정 [p in keyof T]?: T[p]

유틸리티 타입이란 이미 정의해 놓은 타입의 문법을 변환할 때 사용하는 문법 입니다. 유틸리티 문법을 사용하지 않아도 타입스크립트를 사용하는데 크게 문제는 없지만 사용을 하게 된다면 타입을 좀 더 간결하게 사용할 수 있습니다. Partial 특정 인터페이스에서 다른 인터페이스로 받을 때 옵셔널로 처리하는 것을 의미한다. interface로 정의한 것과 type으로 정의한 동작방식이 같다. 즉 인터페이스 Product를 생성하고 일부분만 사용하고 싶을 때 Partial을 이용하면 된다. 하지만 너무 남용해서 사용하다보면 속성이 어떻게 들어오는지 헷갈릴수도 있으니 주의해서 사용하자. interface Product { id: number; name: string; price: number; brand: str..

두개의 비슷한 인터페이스와 클래스가 있을 경우에 사용하는 방식이며 아래의 예제를 살펴보자 인터페이스 타입호환 developer = person 오류가 나지만 person = developer 는 정상적으로 수행이 된다. 이유를 살펴보자면 타입스크립트는 좌측 변수와 우측 변수가 같은지 확인을 하게 된다. Developer1과 Person1은 타입이 다르다.(속성이 다르다) Developer1은 name, skill 속성이 있고 Person은 name 속성만 있다. 우측에서 좌측으로 변수를 담을 때 우측의 있는 변수가 더 큰 범위일 경우에는 좌측에 담을 수 있다. developer가 {name, age} 를 가지고 있고 person은 { name }을 가지고 있기 때문에 person = developer 가..

타입 단언은 타입이 명시적으로 해주지 않았을 경우 as 키워드로 명확하게 해주는 것을 의미 한다. 타입 가드는 is 키워드를 이용하여 해당 타입이 맞는지 여부를 체크할 때 주로 사용한다.

타입추론이란 사용자가 명시적으로 타입을 적어주지 않았을 경우 타입스크립트가 자체적으로 타입을 추론하는 것을 의미 한다. 아래의 예제를 확인해보자. 일반 함수 sum 이라는 함수는 인자값 b와 c의 값을 더하는 함수이다. 잘보면 b는 number이고 c는 string 이다. 자바스크립트를 해보신 분들은 아시겠지만 숫자+문자 = 문자로 반환되게 되어진다. 그러므로 타입스크립트는 b는 숫자라고 인식하고 반환값은 string이라고 사용자가 명시적으로 입력하지 않아도 알아서 추론하게 된다. 인터페이스 제네릭 사용시 제네릭을 사용할 때에도 마찬가지 이다. Dropdown의 경우 T는 선언 당시 어떤 타입인지 알 수가 없다. 아래에서 객체를 생성할 때 number라고 명시적으로 선언을 해주었기 때문에 인터페이스 제네..