타입스크립트

commonJS, ESM 둘 다 지원하는 package.json 설정법 (feat. rollup)

알다시피, JS 런타임은 크게 브라우저와 Node.js가 있다.그리고 각각 ESM, CJS의 모듈 방식이 있다. 요즘 개발 환경은 웹 개발을 할 때에도 node가 필요한 경우가 많기에, 라이브러리를 구성한다면 두 환경 모두에서 작동할 수 있도록 작성하는 것이 좋다. 이번에 개인적으로 라이브러리를 만져보면서 rollup을 사용하여 mjs, cjs를 생성하고 어떻게 설정했는지, 기록을 남기고자 했다. ✨ rollup.config.js 설정하기import { defineConfig } from 'rollup';import typescript from '@rollup/plugin-typescript';export default defineConfig({ input: { index: 'index.ts', ..

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

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

React Context API 잘 사용하기 (re-render 방지법 - selector & atom)

React의 Context API를 사용하면, Provider 하위의 어떤 컴포넌트에서나 함께 공유하는 데이터를 사용할 수 있는 장점이 있다.👻 그러나 Context API를 사용할 때 발생할 수 있는 문제 중 하나는 빈번한 리렌더링이다.이 re-render 문제 때문에 Context API는 종종 사용되는 것이 꺼려지는데, 어떻게 하면 이를 최적화하여 잘 사용할 수 있을지 알아보았다. 내가 알아본 방법은 두 가지로, selector와 atom을 사용하는 두 가지 방법이다.타입스크립트로 작성한 예제와 함께 어떻게 하면 re-render 문제를 해결하여 Context API를 사용할 수 있을지 확인해보았다. Context API의 리렌더링 문제Context API를 사용하면 Provider로 데이터를 전..

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

Typescript에서 Decorators 사용하기

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

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가 제대로 지워지지 않아 오류가 발생하는 경우..

Typescript에서 Error 처리하기

자바스크립트는 Error 객체를 통해서 에러를 발생시킬 수 있다. throw new Error("Error !!!"); // or throw Error("에러 !!!"); ➡️ new 키워드 없이 Error 객체를 호출해도, new 키워드를 사용한 것과 동일한 결과가 나타난다. 자바스크립트에서 발생한 에러는 try catch문을 통해서 에러를 탐지하고, 핸들링할 수 있다. function errorTest() { throw new Error("에러입니다. 🍌"); } try { errorTest(); console.log("성공!"); // 미출력 } catch(error) { console.log(error, "발생!"); // 출력 } finally { console.log("성공/실패 상관없이 반드..