맵드 타입(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. 클래스 문법 예제 class Person { private name: string; // private 접근 제한자를 사용하여 속성을 외부로부터 보호 protected age: number; // protected 접근 제한자를 사용하여 하위 클래스에서 접근 가능한 속성 constructor(name: string, age: number) { this.name = name; this.age = age; } public greet(): void { console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`); } } class Student extends Person { private studentId: number; con..
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. Union Type 유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다라는 의미의 타입입니다. 아래 코드를 보겠습니다. function logText(text: string | number) { // ... } 위 함수의 파라미터 text에는 문자열 타입이나 숫자 타입이 모두 올 수 있습니다. 이처럼 | 연산자를 이용하여 타입을 여러 개 연결하는 방식을 유니온 타입 정의 방식이라고 부릅니다. Union Type의 장점 // # Union 타입 문법 - `any` 보다는 명시적임 function logMessage(value: string | number) { console.log(value); } function logMessage(value: string..
