웹/TypeScript

[이펙티브 타입스크립트] 1장 타입 스크립트 알아보기 심화 (Feat. ZOD)

Judith Hopps 2023. 6. 7. 15:55
반응형

타입스크립트는 런타임에서의 에러를 잡아줄 수 없음

 

타입스크립트는 런타임에서의 에러를 잡아줄 수 없음

EXAMPLE

  const test = (value: string) => {
    console.log(value);
  };

// test 함수의 매개변수는 string인데 number를 넣어서 타입 에러이다
  test(1);

 test 함수의 매개변수는 string인데 number를 넣어서 타입 에러이다.

하지만, 위와 같은 코드가 자바스크립트로 변환되면

const test = (value) => {
    console.log(value);
};
test(1);

이렇게 되기 때문에 코드는 정상적으로 동작한다.

그래서 타입 체커는 에러를 화면에 띄워주지만 트랜스파일된 자바스크립트 파일은 아무런 문제가 없기 때문에 정상적으로 실행이 된다.

트랜스파일 vs 컴파일
트랜스파일: 비슷한 수준의 언어로 변경
컴파일: 다른 언어로 변경

결론: 런타임에서는 아무런 도움도 안된다.

런타임에서 아무런 도움이 안되는 이유는 단순...자바스크립트 코드를 실행하기 때문.

그러면 런타임 환경에서 값의 타입을 확인할 수는 없을까...?

 

 

 

ZOD

https://zod.dev/

 

GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference

TypeScript-first schema validation with static type inference - GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference

github.com

  • 타입스크립트는 런타임에서 타입에러를 잡아주지 못하지만 ZOD는 런타임시 미리 설정해둔 타입과 다르게 들어오면 런타임에서 에러 발생 위치와 함께 어떤 타입으로 잘못 들어온건지 잡아줌
    • 터지는걸 잡지는 못해도 어디에서 터졌는지 빠르게 파악 가능
    • 타입스크립트의 단점을 약간이나마 보완 가능하다
  • zod object를 만들면 해당 obejct의 스키마를 뽑아서 type처럼도 사용 가능하다
  • API 호출할 때 리턴받을 타입을 strict하게 체크하기 용이
    • 동작 원리 예상
      • typeof로 추론하는 과정을 모두 zod가 수행해주는듯
      • 모두 typeof 체크해서 맞지 않을 경우 throw error하고 뭐 그런거 아닐까
    • 예상 사용 예시
      • swagger같은데에 명시된 response format을 zod로 파일 하나에 몰아놓고 type 만들어서 쓰기
반응형