TypeScript

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

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

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

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

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을 지원..

TypeScript에서 객체 타입 체크하는 방법: in 키워드 활용하기

타입스크립트에서 객체의 타입을 체크하는 것은 종종 필요한 작업이다. 특히, Bird나 Human과 같은 특정한 타입(type alias / interface)을 가진 객체를 다룰 때는 더욱 중요한데, 타입스크립트에서 객체의 타입을 체크하는 방법 중 하나인 `in` 키워드에 대해 알아보았다. typeof로 타입 체크하기 JavaScript에서는 `typeof` 연산자를 사용하여 변수의 데이터 타입을 확인할 수 있다. 일반적으로 이 방법은 원시 타입 (예: 문자열, 숫자, boolean)을 체크할 때 사용된다. 🤷‍♂️ 하지만 객체의 경우 `typeof`는 단순히 `'object'`를 반환하므로 객체의 구체적인 타입을 알 수 없기에 유효하지 않다. const myObject: Bird | Human = ge..

unknown과 any 차이점 알아보기

unknown과 any 모두 유연하게 타입을 설정하기 위해서 사용된다. 🌧️ 다만, 타입 에러를 잡아내기 어렵기에 권장되지는 않는다. 다만, 이 둘의 차이점으로는 any가 더 유연하고 안전성이 낮은 반면, unknown은 타입 안정성을 유지하면서 유연함을 제공한다. unknown vs any 예제 // unknown 타입 let value1: unknown; value1 = 123; // 할당 가능 value1 = 'Hello'; // 할당 가능 // any 타입 let value2: any; value2 = 123; // 할당 가능 value2 = 'Hello'; // 할당 가능 기본적으로는 any와 unknown모두 다양한 타입을 할당할 수 있게 해준다. // unknown과 any의 차이 let n..

Typescript에서 Decorators 사용하기

타입스크립트는 데코레이터 문법을 지원한다. 다만, 현재 (v5.0.4) 버전에서는 실험적인 문법으로 이를 지원하기에 추후 변경될 가능성이 있다. 👍 타입스크립트에서는 데코레이터를 사용하여 메타데이터를 부여할 수 있다. (추가적인 설정이나 정보를 첨부한다) 🍉 실험적인 기능이기에 데코레이터 문법을 사용하기 위해서는 tsconfig.json 설정이 필요하다. { "compilerOptions": { "target": "ES5", "experimentalDecorators": true } } target이 ES5 이하 버전이 되면, 일부 문법이 제대로 작동하지 않을 수도 있다. 데코레이터의 종류로는 클래스 데코레이터 (Class Decorator), 메서드 데코레이터 (Method Decorator), 프로퍼..

typescript) 문자열 배열의 원소들의 값을 Union type으로 가지는 type 생성하기

내가 겪은 케이스는 다음과 같다. const transportations = ["taxi", "bus", "subway", "bicycle", "walk"]; 위와 같이 상수로 사용할 교통 수단의 경우의 수를 미리 정의해 놓을 수 있다. 그리고, 파티의 참석자 정보를 객체로 표현한다고 했을 때, 아래와 같은 데이터를 상정할 수 있다. const participant = { nickname: "park"; age: 43; transportation: "airplane"; } 위의 객체의 타입을 interface로 표현하면, 다음과 같을 것이다. interface Participant { nickname: string; age: number; transportation: string; } 물론, 이대로도 훌..

Type only import, export에 대해서

타입스크립트로 작성된 오픈소스를 보면, 종종 다음과 같은 코드를 직면하게 되는 순간이 있다. import type { Test } from "./Test"; export type { Test }; 해당 문법은 타입스크립트 버전 3.8에서 추가된 type only imports and exports 문법이다. 이는 타입만을 import하고 export하기에 타입스크립트에서 불필요하게 모듈을 불러오는 문제를 해결할 수 있다. 런타임 시 사용되지 않는 import를 구분할 수 있기에 컴파일 단계에서 사용되지 않는 import를 제거할 수 있다. ⭐️ 항상 완전히 지워지기 때문에, 런타임 실행 시 해당 코드는 남지 않는다. 때때로 타입에 대한 import/export가 제대로 지워지지 않아 오류가 발생하는 경우..