TS의 런타임과 interface type

 

TypeScript의 런타임에 대한 이해 

No, TypeScript Types Don't Exist At Runtime

TypeScript의 타입은 runtime에 존재하지 않으며 컴파일 단계에서 사용되며 이후 JavaScript로 컴파일 되도록 설계 되었다. 코드가 JavaScript로 컴파일되면 type이 사라지는 셈이다. 

 

런타임시 타입스크립트 인터페이스가 존재하지 않는 이유는 뭔가요?? - 인프런 | 커뮤니티 질문&

제로초(조현영)지식공유자2023. 07. 27. 23:15

네 맞습니다. 노드는 자바스크립트를 실행하지 타입스크립트를 실행하지 않습니다. 타입스크립트 코드는 전부 자바스크립트로 변환되며 변환 과정에는 타입스크립트 고유 문법인 인터페이스는 삭제됩니다. 그래서 자바스크립트에서는 인터페이스를 가질 수 없습니다. 그래서 클래스를 대신 사용하는 것이고요.

 

Interface SBT {
	to: string;
	tokenId: string;
	metadataJSON_url: string;
}

 

위와 같이 인터페이스를 정의하고 빌드를 시작하면 런타임에는 사용할 수 없다. 런타임에서도 타입을 검증할 수 있도록 도와주는 라이브러리를 사용한다면 실행 중에더 데이터 검증이 가능하다. 

 

 

Zod 

 

z.object를 통해서 3개 필드를 포함하는 객체 스키마를 생성한다.

생성한 Zod 스키마를 기반으로 TypeScript 타입으로 추출하여 사용할 수 있다. 

import { z } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

export const schemaSBTMinter = z.object({
  to: z.string().min(1), //property not empty 최소 1
  tokenId: z.string().min(1),
  metadataJSON_url: z.string().min(1),
});

export type FormTypeSBTMinter = z.infer<typeof schemaSBTMinter>;

export const useFormSBTMinter = () =>
  useForm<FormTypeSBTMinter>({
    resolver: zodResolver<FormTypeSBTMinter>(schemaSBTMinter),
  });

const { register, handleSubmit } = useFormSBTMinter();