TypeScript에서 __brand 패턴 알아보기 ✈️ (타입 안정성 높이기)

보통 객체 데이터는 Id 값을 가진다.그리고 때때로 각 데이터는 특정 Id값이나 카테고리에서 좀 다른 데이터 패턴을 보일 때가 있다.또는, 하나의 객체에서 여러 Id값을 지닐때 같은 number 타입의 Id긴 하지만 굳이 따지면 다른 데이터값이기는 하는... 이런 경우도 종종 있다. 이런 경우 타입을 짜는게 참으로 곤란한데, 이때 __brand 라는 걸 사용해서 더 구체적으로 타입을 구별하는 기법을 사용한다고 한다 👻+ 객체가 아닌 타입에도 intersection을 통해서 객체로 __brand 타입을 집어넣어 같은 number지만 같지 않은 그런 타이핑이 가능하다 ! 요약하자면, 좀 더 엄격하게 객체들의 타입을 구분할때 고려할 수 있는 방법이다.(+ 런타임에서는 영향이 없고, 컴파일 타임에서만 타입을 ..

• format_list_bulleted TypeScript
• · 2025. 3. 30.
• textsms

TypeScript에서 객체 타입 비교 및 extends 활용하기 🏘️

TypeScript는 구조적 타이핑(structural typing) 을 기반으로 동작한다. 즉, 객체의 타입을 비교할 때 객체가 가진 속성들을 기준으로 판단하게 된다 🫰이를 활용하면 extends 키워드를 통해 타입 간의 관계(할당 가능 여부)를 쉽게 판별할 수 있다. 이번에는 타입스크립트에서 객체를 비교하는 다양한 예제를 테스트해보는 글을 남겨보기로 했다.(extends와 함께하는... ⭐)구조적 타이핑과 객체 타입 비교 먼저, 간단한 두 객체 타입을 예제로 들어보자. 아래와 같은 예제, 기본 데이터 구조를 나타내는 BasicRecord와 추가 정보를 담은 DetailedRecord로 구조적 타이핑에 대해서 살펴보자.type BasicRecord = { values: string[] };type D..

• format_list_bulleted TypeScript
• · 2025. 3. 21.
• textsms

[typescript] Record를 사용하여 객체 Key 타입 설정하기 🍎

객체의 타입을 설정할 때 있었던 일이다. const winner = { "One": false, "Two": false, "Three": true,}; 이런 객체가 있다고 가정해보자. 객체의 Key값은 One, Two, Three만 될 수 있기에, 타입으로 제한해보자 👻 가장 처음 떠올릴 수 있는 방법은 다음과 같다! type KeyExample = "One" | "Two" | "Three";const winnerFail: { [key: KeyExample]: boolean } = { "One": false, "Two": false, "Three": true,} 이렇게 하면 될 것 같지만! 에러가 발생한다. 타입 에러에 따르면, 인덱스 시그니쳐 파라미터 타입은 liter..

• format_list_bulleted TypeScript
• · 2024. 11. 1.
• textsms

타입스크립트에서 기존 코드로부터 타입을 가져오는 법 ReturnType, ComponentProps

타입스크립트를 잘 사용하기 위한 여러 유틸 타입이 있다. 그중에서도 이미 잘 사용중이던 함수를 사용한다면, ReturnType을 통해서 해당 함수의 반환값 타입을 쉽게 얻을 수 있다. ReturnType function getUser() { return { name: "Alice", age: 30, };} 이런 함수가 있을 때, 이 함수의 리턴값 타입을 재사용하고자 하는 경우를 생각해보자.interface getUserReturnValue { name: string; age: number;} 이렇게 타입을 직접 작성할 수도 있지만, 만약 getUser 함수의 리턴값이 바뀌는 작업이 일어나면 타입도 직접 바꿔줘야 한다.그리고 사람이 작성하는 코드이기에, 실수가 일어나기 더 쉬워보인다. 때..

• format_list_bulleted TypeScript
• · 2024. 9. 18.
• textsms

타입가드 사용하여 안전하게 타입스크립트 타이핑하기

타입스크립트에서 타입 가드는 런타임에 변수의 타입을 확인하고, 이를 통해 타입스크립트가 해당 변수의 타입을 특정 블록 안에서 더 정확하게 추론할 수 있도록 돕는 방법이다. 타입 가드를 잘 활용하면 코드의 타입 안전성을 높이고, 가독성과 유지보수성을 향상시킬 수 있다. 때문에 타입가드를 잘 사용하는 것은 타입스크립트에서 중요하다.타입가드에 어떤 방법들이 있는지 확인하고, 어떤 방법을 사용하는 것이 좋을지 알아보았다. 1. 타입 단언(`as` 키워드) - 추천하지 않음타입 단언은 변수의 타입을 명시적으로 지정하는 방법이다.let str: string | undefined;str = "Hi" as string; 그러나 런타임에 아무런 검사를 하지 않기 때문에 잘못된 단언으로 인해 런타임 에러를 유발할 수 있다..

• format_list_bulleted TypeScript
• · 2024. 8. 4.
• textsms

TypeScript에서 enum 사용하기: const enum vs as const 객체

TypeScript에서 열거형(enum)은 선호되지 않는다. 어째서일까? TypeScript에서 열거형의 데이터를 표현하는 방법은 여러 가지가 있지만, 최신 버전의 TypeScript에서는 as const 객체를 사용하는 것이 일반적이다. 다만, 다른 언어에서 많이 사용되는 enum 방식의 사용은 공식문서에서도 추천되지 않는데, 이번 글에서는 이 두 가지 방법의 차이와 각각의 장단점을 알아보고 어째서 enum이 추천되지 않는 방식인지 알아보았다. const enum과 일반 enum의 차이 🙌 enum을 표현하는데도 그냥 enum과 const enum이 존재하며 차이점이 있다. 일반 enum은 컴파일된 JavaScript 코드에서도 그대로 존재하며(번들링 사이즈 증가), reverse mapping을 지원..

• format_list_bulleted TypeScript
• · 2024. 4. 1.
• textsms