TS

TypeScript에서 두 개의 타입이 겉보기에는 동일하지만, 실제로 비교하면 다르게 평가되는 경우가 있다. 예를 들어, 다음 두 타입을 비교해보자.type A = { x: string, y: string };type B = { x: string } & { y: string }; 두 타입 A와 B는 직관적으로 같아 보인다. 하지만 TypeScript는 { x: string, y: string }과 { x: string } & { y: string }을 동일한 타입으로 간주하지 않는다. 이를 확인하기 위해 두 타입이 완전히 동일한지 판별하는 유틸리티 타입 IsEqual을 만들어보자.type IsEqual = (() => T extends X ? 1 : 2) extends (() => T extends Y..

객체지향 프로그래밍(OOP)에서 추상 클래스와 인터페이스는 코드의 구조를 명확히 하고 재사용성을 높이기 위해 사용된다. 두 개념 모두 클래스 간의 일관성을 유지하고, 개발자들이 특정 규칙을 따르도록 강제하는 데 사용되지만 그 역할과 사용 목적에는 분명한 차이가 있다. abstract class객체지향에서 추상 클래스는 인스턴스화할 수 없으며 상속만 가능하다. 즉, new 예약어를 통해 추상 클래스의 객체를 정의할 수 없는 것이다. 추상 클래스는 공통적인 속성과 동작을 정의하면서도, 일부 메서드는 구현하지 않아 자식 클래스에서 구현하도록 강제한다. 이를 통해 공통 기능을 공유하면서도 유연하게 세부 동작을 다르게 가져갈 수 있다. 또한 속성(상태)를 포함할 수 있기에 클래스 간 기본 데이터를 제공할 수 있다..

아래는 전역 상태 관리 라이브러리 Caro-kann의 persist 미들웨어가 사용하는 유틸리티 함수의 타입이다. 각각의 함수는 모두 동일한 파라미터인 storageKey와 storageType을 필요로 하고 있다. GetStorage와 SetStorage는 그 이름 덕분에 무슨 동작을 하는지 쉽게 알 수 있다. 하지만 ExecMigration 타입은 정확히 뭘 하는지, GetStorage와 SetStorage 타입과는 무슨 관련이 있는지 알기 어렵다. 모르는 개발자가 처음 이 타입들을 본다면 ExecMigration와 나머지 두 타입이 관계가 없다고 생각할 지도 모르겠다.type GetStorage: (props: { storageKey: string; storageType: keyof Storag..

라이브러리를 개발하다보면 특정 객체 타입의 프로퍼티는 유지하되, 일부 프로퍼티 값의 타입을 바꿔줘야 하는 경우가 생긴다. 특히 오버라이드 패턴을 사용해 메서드의 일부 동작이 변경되는 경우가 여기 포함된다. 타입스크립트에서는 주로 Omit Pick Partial 등의 유틸리티 타입을 사용해 이런 오버라이드를 구현한다.type ReducerStore = Omit, "setStore"> & { setStore: Dispatcher }하지만 Omit과 & 연산자 등을 사용해 타입을 선언하다보니 이 타입이 뭘 하고 있는 건지 한 눈에 알기가 어렵다. 나는 이러한 문제를 해결하기 위해 ReplacePropertyValue라는 유틸리티 타입을 라이브러리에 도입했다.type ReplacePropertyValue = O..

리액트 프로젝트를 하다보면 Context API를 사용하여 외부에서 의존성을 주입해야 하는 경우가 종종 있다. 이때 주입하는 의존성은 크게 값, mutate, 그 외 로직의 세 가지로 분류할 수 있을 것 같다. 자바스크립트에서라면 이 세 경우를 굳이 나눠서 생각할 이유가 없다. createContext로 생성한 context의 provider value props에는 무슨 값이던 넣을 수 있고, 그 아래 노드에서는 무슨 값이든 빼서 쓸 수 있다. 물론 이렇게 쓰면 런타임 에러가 발생하고, 그래서 보통은 커스텀 훅으로 감싸게 되지만, 할 수 있다는 게 중요하다.타입스크립트에서 Context API를 사용할 때는 몇 가지 제약 사항이 뒤따른다. 반드시 default value를 제공해야 하는데, 이는 pro..

자바스크립트에서 템플릿 리터럴이란 변수를 문자열 내에 삽입할 수 있도록 하는 문법을 지칭한다. 타입스크립트에서도 이와 유사하게 템플릿 리터럴 타입이 존재한다. 기존의 리터럴 타입 및 유니언 타입을 변수처럼 사용하여 새로운 문자열 타입을 구성하는 방식이다. 이를 통해 문자열을 결합하거나 변형한 새로운 타입을 정의할 수 있으며, 타입스크립트의 강력한 타입 시스템과 결합하여 타입 안전성을 유지하면서도 유연하게 문자열 기반 타입을 다룰 수 있다.// 일반적인 템플릿 리터럴 타입의 사용법type VerticalAlignment = "top" | "middle" | "bottom";type HorizontalAlignment = "left" | "center" | "right";// type Alignment =/..

조건부 타입타입스크립트는 특정 조건에 따라 타입을 다르게 정의할 수 있도록 하는 '조건부 타입'을 지원한다. 자바스크립트의 삼항 연산자와 유사하게 타입 수준에서 조건을 평가하며, 그 결과에 따라 다른 타입을 선택할 수 있다. infer 키워드와 함께 사용하면 함수나 배열, 객체 등에서 특정 타입을 추출하거나 분해하는 데 도움이 된다.아래의 예시 타입은 배열을 인자로 받아서 해당 배열의 첫번째 아이템을 리턴하는 함수의 타입을 조건부 타입과 infer 키워드를 사용해 설계한 것이다. type FirstElement = (arr: T) => T extends [infer First, ...any[]] ? First : never;const getFirstElement: FirstElement = (arr) =..

form 관리 라이브러리 sicilian을 만들면서 여러 타입을 작성하다가 아래와 같은 타입을 만들었다. 여기서 사용되는 Input 타입은 handleChange 함수의 인자로 들어오는 이벤트 객체의 타겟 이름이 특정한 K를 만족시키도록 강제한다. 아래의 스크린샷에서 확인할 수 있는 것처럼 이 타입의 추론은 두 개의 타입이 인터섹션되어있는 것으로 표시된다.export type Input = ChangeEvent & { target: { name: K; value: string } }; 그러다 지인의 추천으로 네이버 사내 기술 교류 행사에서 발표된 타입스크립트 세션 영상을 보게되었다. 다양한 테크닉을 배울 수 있는 좋은 기회였지만, 그 중에서 내 눈을 사로잡은 건 유틸리티 타입 Role의 동작이었다. Ro..

이 포스트는 Dominik Dorfmeister가 자신의 블로그에 올린 Array types in TypeScript 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다. 올해(23년) 초에 있었던 일입니다. Total TypeScript의 저자이자 과거 vercel에서도 근무하던 개발자 Matt Pocock 씨가 트위터를 통해 한 가지 설문 조사를 진행하더군요. 그런데 설문 결과가 저를 꽤 당혹스럽게 했습니다.해당 설문은 타입스크립트에서 Array 타입을 지정할 때 Array 과 string[] 중 어떤 방식을 선호하는지에 대한 것이었습니다. 전자는 제네릭 구문이고 후자는 Array 구문이죠. 그리고 그 결과는 아래와 같았습니다. What ..