프론트엔드/TypeScript
[TypeScript] 유틸리티 타입 구현하기 (Utility Types)
TypeScript이 제공하는 다양한 유틸리티 타입에 대해 정리하고자 합니다. 내부 로직 크게 어렵지 않기 때문에 자주 쓰이는 유틸들은 직접 구현해보는 것을 추천합니다. (면접 때 물어봐서 당황했던 기억이 나네요 😅) 💡 용어 정리 T : 타입 U : 또 다른 타입 K : 속성(key) Partial T의 모든 프로퍼티를 선택적 프로퍼티로 변경한 새로운 타입을 반환합니다. 구현 type Partial = { [P in keyof T]?: T[P]; }; keyof T는 T의 모든 키 값을 가지는 유니온 타입을 의미합니다. 인덱스 시그니처 문법이 아직 익숙지 않으면 이 글을 참고하면 좋습니다. 예시 interface User { name: string; age: number; } interface Part..
[TypeScript] 제네릭 (Generic)
제네릭은 타입을 일반화하여 재사용성을 높이는 프로그래밍 기법입니다. 이를 통해 함수, 클래스 등을 다양한 타입에 대해 범용적으로 사용할 수 있게 됩니다. 제네릭 (Generics) 제네릭은 타입을 선언 시점이 아닌 생성 시점에 결정하는 프로그래밍 기법입니다. 이를 통해 함수, 클래스, 인터페이스 등을 다양한 타입에 대해 재사용할 수 있습니다. 제네릭의 기본 구조와 호출 방식은 다음과 같습니다. T는 Type의 약자로써 주로 관용적으로 사용하는 타입 변수입니다. function getValue(value: T): T { return value; } getValue('hello'); getValue(10); getValue(true); 둘 이상의 타입 변수는 주로 T 다음의 알파벳 순서대로 표현합니다. fu..
[TypeScript] Interface와 Type Alias의 차이점
인터페이스와 타입 앨리어스는 직접 타입을 정의할 수 있다는 점에서 유사합니다. 하지만 각각의 특징과 차이점이 존재하기 때문에 제대로 알고 사용하는 것이 좋습니다. 이 글을 통해 인터페이스와 타입 앨리어스, 그리고 둘의 차이점에 대해 알아보겠습니다. 인터페이스 (Interface) 객체는 넓게 묶으면 Object 타입이 되지만 사실 객체의 내부 구조는 제각각 다릅니다. 인터페이스는 객체가 가질 수 있는 다양한 구조들을 직접 타입으로 만들 수 있는 방법입니다. 이를 통해 객체 타입을 구체화할 수 있고, 인터페이스를 재사용할 수 있다는 장점이 있습니다. 기본 구조 interface 키워드를 통해 인터페이스를 정의할 수 있습니다. 인터페이스 내부는 단지 프로퍼티와 메서드의 타입에 대해서 정의만 합니다. (구현 ..
[TypeScript] 타입 가드 (Type Guard)
타입 가드는 조건문 안에서 타입 범위를 한정시켜줄 수 있는 방법입니다. 이 글을 통해 타입 가드의 등장 배경, 개념, 사용 방법에 대해 알아보겠습니다. 등장 배경 interface Developer { name: string; skill: string; } interface Person { name: string; age: number; } const introduce = (): Developer | Person => { return { name: 'Kim', age: 20, skill: 'React' }; }; let kim = introduce(); console.log(kim.skill); // Error 유니온 타입은 공통된 속성(name 프로퍼티)에만 접근할 수 있습니다. 그래서 skill 속성..
[TypeScript] 타입 단언 (Type Assertion)
종종 실제 타입이 컴파일러가 추론한 타입보다 구체적인 상황이 발생합니다. 이러한 상황에서 타입 단언을 쓰면 컴파일러에게 특정 타입을 단언할 수 있습니다. 타입 단언 (Type Assertion) 종종 컴파일러보다 개발자가 타입을 더 잘 알 때가 있습니다. 주로 데이터의 실제 타입이 컴파일러가 추론한 타입보다 구체적인 상황이 됩니다. 타입 단언은 컴파일러에게 특정 타입을 명시적으로 단언하는 개념입니다. 타입 단언은 런타임에 영향을 미치지 않습니다. 즉 특별한 검사나 데이터의 재구성이 발생하지 않습니다. 그저 타입 체커의 에러를 없애기 위해 컴파일 과정에서 사용하는 문법입니다. let a; a = 20; a = 'hello'; let b = a; // b: any let b = a as string; // ..
[TypeScript] 타입 종류
TypeScript에 대해 본격적인 포스팅을 남기고자 합니다. 이 글을 통해 먼저 TypeScript의 기본 타입의 종류에 대해 알아보겠습니다. Boolean Boolean 타입은 참(true)과 거짓(false) 값을 가질 수 있습니다. let isBoolean: boolean; let isDone: boolean = false; Number Number 타입은 모든 부동 소수점 값을 가질 수 있습니다. ES6의 2진수 및 8진수 리터럴 값 또한 지원합니다. let num: number; let integer: number = 6; let float: number = 3.14; let hex: number = 0xf00d; // 61453 let binary: number = 0b1010; // 10 ..