개발새발

타입스크립트는 실무에서 자주 사용하는 패턴을 미리 정의한 유틸리티 타입(Utility Types) 을 제공한다. 그중 가장 널리 쓰이는 다섯 가지 타입이 Partial, Required, Readonly, Pick, Record이다. -  1. Partial: 모든 속성을 옵셔널로Partial는 객체 타입 T의 모든 속성을 optional로 바꾸는 유틸리티 타입이다.type MyPartial = { [P in keyof T]?: T[P];};type Original = { a: string; b: number };type Result = MyPartial;// 결과: { a?: string; b?: number } Partial은 특히 함수 인자로 부분 업데이트를 허용할 때 유용하다. 2. Requir..

타입스크립트는 자바스크립트 위에 얹힌 정적 타입 시스템이다. 그렇기 때문에 자바스크립트 생태계에 존재하는 수많은 외부 라이브러리들과의 호환성을 고려해야 한다. 특히, 타입 정보가 제공되지 않는 자바스크립트 코드에 타입을 추가해야 할 때 유용한 개념이 바로 앰비언트 선언이다. 또한, 타입스크립트는 동일한 이름을 가진 선언을 병합할 수 있는 강력한 기능도 제공한다. 이 글에서는 앰비언트 선언과 선언 병합이 어떻게 동작하며, 실제로 어떻게 활용할 수 있는지에 대해 설명한다. 1. 앰비언트 선언 (Ambient Declarations)1.1 앰비언트 선언이란?외부 자바스크립트 코드에 타입 정보를 부여하고자 할 때 사용하는 것이 앰비언트 선언이다. declare 키워드를 사용하여 타입만 정의하고 구현부는 생략한다..

타입스크립트 5.0부터 데코레이터(Decorator) 기능이 정식으로 채택되었다. 이전에는 실험적인 기능으로 사용해야 했으나, 이제는 안정적인 기능으로 클래스 및 클래스 요소의 동작을 확장할 수 있다.데코레이터는 클래스, 메서드, 필드 등 다양한 위치에 적용할 수 있으며, 코드의 중복을 줄이고 공통 로직을 추상화할 수 있는 강력한 도구이다. 1. 데코레이터란 무엇인가? 데코레이터는 클래스나 클래스 요소의 동작을 감싸거나 확장하는 함수이다. 아래와 같은 공통된 패턴이 여러 메서드에 반복되고 있다면 데코레이터를 고려할 수 있다.class A { eat() { console.log('start'); console.log('Eat'); console.log('end'); } work() {..

타입스크립트를 사용하다 보면 에러 메시지를 마주하게 되는 경우가 많다. 이때 에러 메시지 끝에 붙어 있는 숫자 코드를 활용하면 문제 해결에 큰 도움이 된다. 1. 에러 메시지 끝의 숫자는 무엇인가?타입스크립트에서 발생하는 에러 메시지의 마지막에는 항상 숫자 코드가 붙는다. 이 숫자는 해당 에러의 유형(type) 을 의미한다.예를 들어 다음 코드를 보자:const arr1: string[] = ['1', '2', '3'];const arr2: Array = [1, 2, 3];arr1.push(4); // ❌ 에러 발생Argument of type 'number' is not assignable to parameter of type 'string'. (2345) 여기서 (2345)는 타입스크립트가 할당 불가..

이 포스트에서는 지금까지 배운 타입스크립트의 개념들을 바탕으로 실전에서 유용하게 사용할 수 있는 타입들을 직접 만들어보려 한다. 타입 간의 관계를 판단하거나, 집합 연산처럼 타입을 조작하는 기법들을 통해 타입스크릡트의 특징을 알아보자 타입을 판단하는 유틸리티 타입 타입스크립트에서는 어떤 타입이 특정 조건을 만족하는지를 판단하는 것이 매우 중요하다. 이로 인해 조건부 타입 분기, 타입 제거, 혹은 타입 제한을 적용할 수 있다. 이 절에서는 any, never, array, tuple, union 여부 등을 판별하는 여러 유틸리티 타입을 정의해본다. 1.1 IsNevernever 타입은 분배법칙이 작동할 경우 의도치 않게 확산될 수 있기 때문에, 이를 방지하기 위해 배열로 감싸서 판단한다.type IsNev..

자바스크립트에서는 숫자 타입만 존재하기 때문에, 숫자 값이 킬로미터인지 마일인지를 구분할 수 없다. 예를 들어, 다음과 같은 함수가 있다고 하자.function kmToMile(km: number) { return km * 0.62;}const mile = kmToMile(3); 이 경우 3이라는 숫자가 킬로미터 단위인지 마일 단위인지 알 수 없다. 따라서 타입스크립트에서는 원시 자료형에 브랜딩(Branding) 기법을 적용하여 보다 세밀한 타입 구분을 할 수 있다. 브랜딩 기법 소개브랜딩 기법은 원래의 자료형에 추가적인 속성을 결합함으로써 새로운 타입을 만드는 방법이다. 이를 통해 number와 같은 원시 자료형도 단순한 숫자가 아니라 특정 단위를 갖는 타입으로 구분할 수 있다.브랜딩 타입은 다음과 ..

타입스크립트에서 에러를 캐치할 때, catch 블록의 error 변수는 기본적으로 unknown 타입이다. 즉, error를 그대로 사용하면 error.message와 같이 속성에 접근할 수 없으며, 강제로 as 연산자를 사용해 Error 타입으로 주장하더라도, 그 주장은 if문 평가 시점에만 일시적으로 적용된다.try { // ...} catch (error) { if (error) { error.message; // 에러: Property 'message' does not exist on type 'unknown' } if (error as Error) { error.message; // 여전히 에러 발생: 'error' is of type 'unknown' }} 위 코드에서 ..

satisfies 연산자의 개념satisfies 연산자는 객체 리터럴을 선언할 때, 타입 추론된 결과를 그대로 활용하면서 추가적인 타입 검사를 수행할 수 있도록 도와준다. 즉, 변수의 타입을 명시적으로 지정하지 않고도, 객체 리터럴의 각 속성이 원하는 타입을 만족하는지 검사할 수 있다. 기본 사용법과 문제 상황예를 들어, 아래와 같이 객체 리터럴을 선언할 때, 의도한 속성 중 하나에 오타가 발생한 경우를 생각해보자.const universe = { sun: "star", sriius: "star", // sirius 오타 earth: { type: "planet", parent: "sun" },}; 여기서 속성 키의 타입은 'sun' | 'sirius' | 'earth'여야 한다. 그런데 위와 같이..