TypeScript Mapped Types 완벽 정복: 기본부터 고급 활용까지

TypeScript Mapped Types 완벽 정복: 기본부터 고급 활용까지 Mapped type은 키(key)들을 순회하며 객체(object)나 튜플(tuple) 타입을 생성하는 기능으로, 다음과 같은 형태를 가집니다.{[PropKey in PropKeyUnion]: PropValue} 이번 포스트에서는 mapped types가 어떻게 작동하는지 자세히 살펴보고 사용하는 예시를 알아보겠습니다. Mapped types의 가장 중요한 사용 사례는 객체 변환과 튜플 매핑입니다. 소스 코드에서 계산되거나 추론된 타입을 보여주기 위해 npm 패키지인 asserttt를 사용하는데요. 예를 들면 다음과 같습니다.// 값의 타입assertType('abc');assertType(123);// 타입의 동등성type ..

• format_list_bulleted Javascript
• · 2025. 3. 13.
• textsms

TypeScript의 infer 키워드로 복합 타입에서 원하는 부분만 깔끔하게 추출하기

TypeScript의 infer 키워드로 복합 타입에서 원하는 부분만 깔끔하게 추출하기안녕하세요. 오늘은 TypeScript의 조건부 타입(Conditional types)에서 등장하는 infer라는 키워드에 대해 자세히 알아볼까 합니다. 이 infer 키워드를 활용하면 다소 복잡한 복합(Compound) 타입 안에서 원하는 부분의 타입만 쏙쏙 뽑아서 깔끔하게 사용할 수가 있는데요.이 글에서 사용하는 표기법이 글에서는 타입의 정확성이나 추론된 타입을 간편하게 확인하기 위해 asserttt라는 npm 패키지를 사용한 코드 예제를 활용할 건데요. 예를 들면 이런 식입니다.// 값의 타입 확인assertType('abc');assertType(123);// 타입의 동등성 확인type Pair = [T, T];..

• format_list_bulleted Javascript
• · 2025. 3. 13.
• textsms

TypeScript satisfies 연산자 완벽 정리: 타입 체크의 새로운 강자

TypeScript satisfies 연산자 완벽 정리: 타입 체크의 새로운 강자 안녕하세요, 여러분!오늘은 TypeScript의 satisfies 연산자가 뭔지, 어떻게 동작하는지 알아볼까요?이 연산자는 값의 타입을 체크하면서도 (대부분) 타입에 영향을 주지 않는 멋진 기능인데요.어디에 유용한지도 함께 살펴볼게요.이 글에서 사용할 표기법소스 코드에서 계산된 타입이나 추론된 타입을 보여주기 위해 asserttt라는 npm 패키지를 사용합니다.예를 들어:// 값의 타입assertType('abc');assertType(123);// 타입의 동등성type Pair = [T, T];type _ = Assert, [string,string]>>;satisfies 연산자는 뭘까요? satisfies 연산자는 컴파..

• format_list_bulleted Javascript
• · 2025. 3. 3.
• textsms

TypeScript에서 읽기 전용 속성 완벽 정리: readonly 키워드 활용법

TypeScript에서 읽기 전용 속성 완벽 정리: readonly 키워드 활용법안녕하세요, 여러분!오늘은 TypeScript에서 "읽기 전용" 기능을 어떻게 활용할 수 있는지 알아볼까요?주로 readonly 키워드를 중심으로 다뤄볼 건데요.이 글에서 사용할 표기법소스 코드에서 계산된 타입이나 추론된 타입을 보여주기 위해 asserttt라는 npm 패키지를 사용합니다.예를 들어:// 값의 타입assertType('abc');assertType(123);// 타입의 동등성type Pair = [T, T];type _ = Assert, [string,string]>>;const 변수 선언: 바인딩만 불변JavaScript에서는 const로 변수를 선언하면 바인딩은 불변이지만, 바인딩된 값 자체는 변경 가능합..

• format_list_bulleted Javascript
• · 2025. 3. 3.
• textsms

TypeScript로 구현하는 최신 ESM 기반 npm 패키지 퍼블리싱 가이드

TypeScript로 구현하는 최신 ESM 기반 npm 패키지 퍼블리싱 가이드 안녕하십니까?오늘은 TypeScript와 함께 ESM 기반의 npm 패키지를 퍼블리싱하는 최신 방법에 대해 알아볼까 합니다.지난 2년 동안 TypeScript, Node.js, 그리고 브라우저에서 ESM 지원이 크게 발전하였는데, 과거에 우리가 사용하던 번거로운 설정과 비교하면 상당히 간단한 구성이 가능해졌습니다.이제부터 그 설정 방법을 차근차근 소개하겠습니다.개요이 튜토리얼은 하위 버전과의 호환성을 무시할 수 있는 패키지를 대상으로 합니다.이 설정은 TypeScript 4.7(2022-05-24) 이후로 저에게 꾸준히 잘 작동하고 있습니다.Node.js가 이제 CommonJS 모듈에서 ESM 라이브러리를 require(esm..

• format_list_bulleted Javascript
• · 2025. 3. 3.
• textsms

JavaScript Temporal, 날짜와 시간을 다루는 새로운 방법

JavaScript Temporal, 날짜와 시간을 다루는 새로운 방법JavaScript의 새로운 Temporal 객체가 브라우저 실험 버전에 드디어 등장하기 시작했는데요. 이 소식은 웹 개발자들에게 무척 반가운 소식입니다. 왜냐하면 JavaScript에서 날짜와 시간을 다루는 일이 앞으로 획기적으로 간편해지고 현대적으로 바뀔 예정이기 때문인데요. 스케줄링, 국제화, 시간에 민감한 데이터를 다루는 애플리케이션은 이제 내장 기능으로 효율적이고 정확하며 일관된 날짜, 시간, 기간(duration), 달력(calendar)을 사용할 수 있습니다. 물론 안정적이고 모든 브라우저에서 지원되기까지는 다소 시간이 걸릴 것이고, 구현 중에 바뀔 수 있지만, 지금 바로 Temporal이 왜 매력적인지, 어떤 문제를 해결..

• format_list_bulleted Javascript
• · 2025. 3. 2.
• textsms