맵드 타입(Mapped Type) 맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미합니다. 마치 자바스크립트 map() API 함수를 타입에 적용한 것과 같은 효과를 가집니다. 다음은 유니온 타입을 맵드 타입으로 변환하는 예제입니다. interface Person { name: string; age: number; } type PersonPartial = { [P in keyof Person]?: Person[P]; }; // 선택적으로 설정한 속성은 생략 가능 const person1: PersonPartial = { name: "Jane", }; type PersonReadonly = { readonly [P in keyof Person]: Person[P]; }; ..
유틸리티 타입 이란 타입스크립트에서는 유틸리티 타입이라는 것을 사용하여 타입을 쉽게 정의할 수 있습니다. 유틸리티 타입은 다양한 타입을 조작하고 결합하는 데 사용됩니다. Pick Pick 은 주어진 Type에서 지정된 속성만 선택하여 새로운 Type을 만듭니다. interface Person { name: string; age: number; address: string; } // bad type PersonNameAndAddress = { name: string; address: string; } // good type PersonNameAndAddress = Pick; const person: PersonNameAndAddress = { name: "John", address: "123 Main St..
타입스크립트를 사용하면서 제네릭에서 사용하는 extends와 인터페이스에서 사용하는 extends의 개념이 다르다는 점을 알고는 있었지만, 시간이 부족한다는 핑계로 자세히 알아보지 못한 것을 반성하며, 이에 대해 좀 더 자세히 알아보기로 마음먹었습니다. 지속적인 학습을 통해 더 나은 개발자로 성장하고자 하는 마음으로 글을 남깁니다. 🙏 제네릭에서의 extends 제네릭에서 extends 키워드는 타입 매개변수의 상한 경계(upper bound)를 지정하는 데 사용됩니다. 상한 경계는 특정 타입으로 제한하여 제네릭 타입이 해당 타입을 상속받거나 해당 인터페이스를 구현해야 한다는 제약을 설정합니다. 예를 들어, 와 같이 사용하여 타입 변수 T가 SomeClass를 상속받는 클래스일 수 있도록 제한할 수 있습..
1. 타입 추론의 기본 let x = 3; 위와 같이 x에 대한 타입을 따로 지정하지 않더라도 일단 x는 number로 간주됩니다. 이렇게 변수를 선언하거나 초기화할 때 타입이 추론됩니다. 이외에도 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 타입 추론이 일어납니다. 2. 인터페이스와 제네릭을 이용한 타입 추론 방식 interface Dropdown { value: T; title: string; } var items: Dropdown = { value: 10, title: "a", }; 인터페이스 Dropdown의 value는 타입파라미터를 참조하고 있고 실제 타입 파라미터에는 number을 넘겨주고 있기 때문에 value의 타입은 number로 추론되고 있습니다. 3. 복잡한 구조..
1. 제네릭 소개 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 개념입니다. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용됩니다. 그렇다고 타입스크립트의 제네릭이 C#, Java에서 사용되는 제네릭과 메커니즘이 같다는 의미는 아닙니다. 2. 제네릭의 기본 문법 function logText(text: T): T { return text; } logText('hi'); logText(10); logText(true); 3. 기존 타입 정의 방식과 제네릭의 차이점 제네릭을 사용하지 않고 기존 타입 정의 방식대로 하면 비슷한 기능의 함수를 구현하기위해 또 다른 함수를 만들어야 돼서 중복 코드가 생성됩니다. function logTe..
1. 숫자형 이넘 enum Response { No = 0, Yes = 1, TEST } function respond(message: Response): void { console.log(message) } respond( Response.Yes); 위와 같이 숫자형 이넘을 선언할 때 초기 값을 주면 초기 값부터 차례로 1씩 증가합니다. 초기 값을 주지 않으면 0부터 차례로 1씩 증가합니다. 2. 문자형 이넘 enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", } 문자형 이넘은 이넘 값 전부 다 특정 문자 또는 다른 이넘 값으로 초기화해줘야 합니다. 문자형 이넘에는 숫자형 이넘과는 다르게 auto-incrementing이..
1. 타입 별칭 이란 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다 // string 타입을 사용할 때 const name: string = 'capt'; // 타입 별칭을 사용할 때 type MyName = string; const name: MyName = 'capt'; //interface 레벨의 복잡한 타입도 가능 type Developer = { name: string; skill: string; } //타입 별칭에 제네릭도 사용할 가능 type User = { name: T } 2. type vs interface type 진영 타입스크립트에서 type과 interface는 객체를 선언할 때 매우 유사한 구조입니다. 논란의 여지가 있지만 대부분의 경우 일관되게 ..
1. 인터페이스란 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터 & 반환 타입 등) 배열과 객체를 접근하는 방식 (인덱싱 & 딕셔너리 패턴) 클래스 객체의 스펙 interface User { name: string; age: number; } const user:User { name: '오일'; age: number; } 함수의 파라미터 function getUser(user: User) { console.log(user); } 함수의 스펙 interface SumFunction { (a: number, b: number): num..
