TypeScript의 불편함을 해결하는 @total-typescript/ts-reset 도입하기

TypeScript의 불편함을 해결하는 @total-typescript/ts-reset 도입하기

TypeScript의 문제점

TypeScript의 타입 시스템은 강력하지만, 의도한 타입을 제대로 추론하지 못하는 경우가 종종 있습니다.

 

이런 상황에서는 어쩔 수 없이 any 타입이나 타입 단언(type assertion)을 사용하게 되는데, 이는 타입 안전성을 잃게 만들어 원래 컴파일 에러로 발견되어야 할 문제가 실행 시 에러로 이어질 수 있습니다.

 

컴파일 에러는 개발 시점에서 바로 수정할 수 있지만, 실행 시 에러는 실제 운영 환경에서 큰 문제를 일으킬 수 있기 때문에 반드시 피하고 싶을 것입니다.

any 타입과 타입 단언의 문제점

• any 타입: 모든 타입을 허용하므로 잘못된 타입 사용으로 인한 에러를 놓칠 수 있습니다.
• 타입 단언: 예를 들어 as string과 같이 사용하면 TypeScript의 타입 체크를 무시하고 타입을 덮어쓰므로 안전성이 보장되지 않습니다.

@total-typescript/ts-reset 소개

@total-typescript/ts-reset 라이브러리는 아래와 같은 기능들을 제공합니다:

1. JSON.parse의 반환 값을 unknown 타입으로 처리
2. .filter(Boolean)으로 타입에서 falsy 값을 제거
3. includes 메서드 사용 시 원본 배열에 없는 타입 전달 가능

각 기능이 해결하는 문제를 하나씩 살펴보겠습니다.

도입 방법

설치

npm i -D @total-typescript/ts-reset

설정

프로젝트의 src 폴더 아래에 reset.d.ts 파일을 생성하고 아래 내용을 추가합니다.

// 모든 기능을 사용하는 경우
import '@total-typescript/ts-reset';

// JSON.parse만 사용하는 경우
import '@total-typescript/ts-reset/dist/json-parse';

// .filter(Boolean)만 사용하는 경우
import '@total-typescript/ts-reset/dist/filter-boolean';

// includes만 사용하는 경우
import '@total-typescript/ts-reset/dist/array-includes';

JSON.parse의 반환 값을 unknown으로 처리

기존에 JSON.parse를 사용하면 any 타입이 반환되어 존재하지 않는 프로퍼티에 접근할 수 있게 되며, 이는 타입 안전성을 해칩니다.

@total-typescript/ts-reset을 사용하면 JSON.parse의 결과가 unknown 타입으로 반환되어 타입 안전성이 향상됩니다.

 

아래는 예시 코드입니다.

interface User {
  name: string;
  age: number;
}

function isUser(value: unknown): value is User {
  return (
    typeof value === 'object' &&
    value !== null &&
    'name' in value &&
    'age' in value
  );
}

const jsonString = '{"name": "Alice", "age": 25}';
const parsedData = JSON.parse(jsonString);

if (isUser(parsedData)) {
  console.log(parsedData.name);
  console.log(parsedData.age);
} else {
  console.log('Invalid User data');
}

.filter(Boolean)으로 타입에서 falsy 값 제거

기존에 .filter(Boolean)을 사용하면 배열에서 falsy 값을 제거하지만, 타입 추론에서는 여전히 falsy 값들이 포함됩니다.

 

@total-typescript/ts-reset을 사용하면 올바르게 타입이 추론됩니다.

const data = [1, null, 2, undefined, 3, '', 4, false] as const;
const cleanedData = data.filter(Boolean); // (1 | 2 | 3 | 4)[]

includes 사용 시 원본 배열에 없는 타입 전달 가능

기존에는 includes 메서드 사용 시 원본 배열에 없는 타입의 값을 전달하면 컴파일 에러가 발생했습니다.

@total-typescript/ts-reset을 사용하면 이를 해결할 수 있습니다.

const array = ['foo', 'bar'] as const;
type Array = (typeof array)[number];

const [array, setArray] = useState<Array>('foo');

function isArray(value: string): value is Array {
  return array.includes(value);
}

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const value = e.target.value;
  if (isArray(value)) {
    setArray(value);
  }
};

 

끝.

---