타입스크립트 타입 검사의 허점

개요

타입스크립트는 자바스크립트의 자동 형 변환으로 발생하는 문제점들을 다수 해결해 준다. 이번 포트폴리오 사이트 개발에 사용하면서 타입스크립트를 처음 프로젝트에 적용해 보았는데, 공부할 때에는 그런가 보다 하고 넘어갔던 부분들이 문제로 나타나면서 이를 문서로 정리해 보게 되었다.

문제 설명

타입스크립트는 ts파일을 js파일로 컴파일하는 방식으로 돌아간다. 사실상 자바스크립트랑 기본적인 부분은 거의 차이가 없다. 그런데 ts파일을 js파일로 컴파일 한다는 점에서 문제가 생긴다. 바로 실제 런타임 중에는 타입검사가 이루어지지 않는다는 점이다. 이런 점 때문에 발생한 오류는 다음과 같다.

문제

function changeStringToDate() {
	const date : string = '2022-8-29'
	return date as Date
}
console.log(changeStringToDate().toLocaleDateString());

위 코드는 올바르게 동작할까?

그렇지 않다. 위 코드는 ts 컴파일 중 오류가 발생한다.

'string' 형식을 'Date' 형식으로 변환한 작업은 실수일 수 있습니다. 두 형식이 서로 충분히 겹치지 않기 때문입니다. 의도적으로 변환한 경우에는 먼저 'unknown'으로 식을 변환합니다.ts(2352)

그렇다면 이 코드는 어떠할까?

interface testType {
	date : Date
}
function changeStringToDate() {
	const res : any = {
		date : '2022-8-29'
	}	
	return res as testType
}
console.log(changeStringToDate().date.toLocaleDateString());

놀랍게도 에러가 나지 않는다. any는 말 그대로 아무 타입이라 ts의 타입 검사의 도움을 받을 수 없다. 그렇다면 위 코드는 올바르게 동작할까?

Uncaught (in promise) TypeError: changeStringToDate(...).date.toLocaleDateString is not a function

in promise는 내가 async함수에서 위 코드를 실행해서 발생한 문구이다.

보다시피 타입 에러가 발생한다. string을 date로 변환할 수 없었기에 발생한 문제이다.

위 코드를 보고 에이, 누가 any타입으로 객체를 다뤄? 처음부터 타입을 명시하면 되는 문제 아니야? 라고 생각할 수 있다. 나도 그렇게 생각했다. 그런데 fetch를 통해 가져온 json 객체를 다룰 때 문제가 발생한다.

다음은 내 포트폴리오 사이트에 적용된 interface이다.

export type ProjectDetail = {
	projectid: Number
	contents: string
	title: string
	image: string
	url: string
	startdate: Date
	enddate: Date
	discription: string
}

이를 객체를 fetch의 body로 받아서 as로 형 변환을 하게되면? 위와 같은 오류가 발생하게 되는 것이다.
fetch의 body는 any타입이기 때문이다.

결론

any타입을 as로 변환할 때에는 항상 조심 또 조심해야 한다. ts도 결국에는 js로 변환되기에 런타임 중에는 강력한 타입 검사를 받지 못한다.
될 수 있다면 any타입 자체를 쓰지 않는 것을 권장한다. 아니면 constructor로 처음부터 객체를 초기화 해줄 수 있다면 더 좋다.