타입스크립트에서 기존 코드로부터 타입을 가져오는 법 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

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

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

• format_list_bulleted TypeScript
• · 2024. 3. 16.
• textsms

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..

• format_list_bulleted TypeScript
• · 2023. 8. 19.
• textsms

Typescript에서 Decorators 사용하기

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

• format_list_bulleted TypeScript
• · 2023. 8. 12.
• textsms