유틸리티 타입 - 타입을 정의할 때 간결한 문법을 사용할 수 있게 해준다. - 이미 정의해 놓은 타입을 변환할 때에 사용하기 좋은 타입 문법이다. - 유틸리티 타입을 꼭 쓰지 않아도 기존의 인터페이스, 제네릭 등으로 충분히 가능하긴 하다. 종류는 겁나 많지만 자주 쓸 것 같은 파셜, 픽, 오밋을 정리해보자. 🔵 파셜 (Partial) interface Address { email: string; address: string; } // Partial를 활용한 타입 type Email = Partial; const email1: Email = {}; // OK const email2: Email = { email: 'abc' }; // OK const email3: Email = { email: 'abc',..
타입추론, 타입단언, 타입가드, 타입호환 🔵 타입 추론 - 타입을 따로 지정하지 않아도 알아서 추론하는 것 기본적인 타입추론 // 기본적인 타입추론 var a; // 이미 any로 추론함 var b = 10; // number로 추론 var c = 'abc' // string으로 추론 함수에 타입추론 // 함수에 타입추론 function getA(a) { return a; } // ==> any를 받고 any를 리턴하도록 추론 function getB(b = 10) { var c = 'abc'; return b + c; } // ==> number를 받고 string를 리턴하도록 추론 제네릭으로 정의한 인터페이스에 타입추론 // 제네릭으로 정의한 인터페이스에 타입추론 interface Dropdown {..
제네릭 (Generics) - C#, Java 등 언어에서 재사용성이 높은 컴포넌트를 만들때 활용되는 특징 - 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 생성하는데 사용 - 타입을 마치 함수의 파라미터처럼 사용 🔵 함수에 제네릭 선언 제네릭이 아닌 유니온 타입으로 했을 때 문제점 function logMessage(text: string | number) { console.log(text); return text; } const res = logMessage('hi'); // string 메서드 사용 res.split(''); // ==> 에러! (string인지 number인지 몰라) - 유니온 타입을 활용하면 최종값의 타입이 정확하지 않음 - return한 값이 여전히 string | nu..
타입스크립트 🔵 연산자를 이용한 타입 정의 Union Type ('|') - 한가지 이상 타입을 쓰고 싶을 때 사용 (파이프 '|' 연산자 활용) - 내부적으로 타입들을 구분할 수 있음 (타입가드에 활용) * 타입가드 : 특정 타입으로 타입의 범위를 좁혀나가는(필터링) 과정 - 타입스크립트 관점에선 어떤 값이 들어올 지 모르기 때문에 공통의 보장된 속성만 사용 가능 (1) 타입가드의 역할 function logAge(value: string | number) { console.log(value); // 타입가드 (number) if (typeof value === 'number') { // 이 스코프에서는 자연스럽게 number로 인식된다 console.log(typeof value); // number..
인덱싱 패턴과 딕셔너리 패턴 안녕하세요. 오늘은 타입스크립트 카테고리에 올리기는 하지만 사실 타입스크립트에만 국한되는 개념이 아닌 인덱싱과 딕셔너리 패턴에 대해 정리해보겠습니다. 인덱싱 패턴과 딕셔너리 패턴 특징 및 차이점 - 두 패턴 모두 타입스크립트에만 국한되는 개념이 아니다 - 차이점으로는 접근 방식에서 있다. - 또한 각각 데이터 구조가 다르다. 근데 내 생각엔 걍 비슷한 것 같다 ㅠ 모가몬지 🔵 인덱싱 패턴 - '배열'을 기반으로 데이터를 저장한다. - 인덱스를 사용하여 각 요소에 접근한다. - 즉, 순서가 있는 컬렉션 (1) 인터페이스 정의 interface Indexing { [index: number]: string; } - number타입의 index와 string을 반환하는 인터페이스 ..