[TypeScript] 외부 객체 undefined 에러를 해결해보자!(Feat. 자바스크립트와의 차이)

안녕하세요.

 

오늘은 자바스크립트 -> 타입스크립트에서 흔히 발생하는 문제인 객체 undefined 문제를 해결하는 방법에 대해 포스팅합니다.

제목을 두서없이 적긴 했으나, 정확하게는 외부 스크립트를 cdn 등의 방법으로 가져왔을 때, 해당 객체가 참조가 되지 않는 문제를 해결하는 방법이라고 보시면 되겠습니다.

 

오늘은 저번에 포스팅한 다음 우편번호 조회 API를 예로 들면서 자바스크립트와 타입스크립트의 차이를 알아봅시다.

 

 

 

---

자바스크립트 vs 타입스크립트

 

자바스크립트

 

자바스크립트에서는 참 간편합니다. 타입스크립트와 달리 인터프리터 언어이기 때문에, 미리 타입을 체크하지 않습니다.

그렇기 때문에 외부에서 다른 API를 꺼내쓰면서 객체를 가져와도, 이게 무슨 타입인지 전혀 신경쓰지 않는다는 것이죠!

즉 cdn으로(or 다른 방식으로) 스크립트만 불러오면 별도 선언 없이 바로 사용할 수 있습니다.

 

<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
...
<script>
	console.log(new daum.Postcode);
</script>

콘솔에 찍힌 모습(daum.Postcode 객체 정보)

daum 객체를 성공적으로 불러옵니다! html에 스크립트문으로 따로 작성하든, 다른 js파일을 참조하여 사용하든 똑같습니다.

이부분이 자바스크립트의 장점 중 하나이면서도, 

 

 

자바와 같이 강한 타입체크가 실질적이고 중요한 오류를 효율적으로 제거해주지 못하는 것이 검증되었기 때문입니다. 또한, 타입캐스팅에 대한 고민이 필요하지 않습니다.

 

 

타입스크립트가 등장한 배경이라고도 볼 수 있겠습니다.

 

하지만 우리의 타입스크립트는 어떨까요?

 

 

 

---

타입스크립트

 

 

타입스크립트에서도 마찬가지로 index.html에서 cdn으로 다음 우편번호 API 스크립트를 가져온 상태라고 가정해 보겠습니다.

 

index.ts 문서에 똑같이 작성해 봅시다.

 

 

애초에 타입스크립트는 컴파일 언어이기 때문에, IDE에서 바로 오류를 감지합니다. 정확히는 컴파일하면 자바스크립트가 되는 방식이죠.

그렇기 때문에 외부 객체(타입을 모르는)는 함부로 참조할 수가 없습니다. 우리는 타입스크립트에게 얘는 나쁜 친구가 아니야! 라는 확신(?)을 주어야 합니다. 그렇기 때문에 일종의 설계도의 역할을 하는 interface를 선언해 주어야 합니다.

 

declare global {
    interface Window {
      daum: any;
    }
  }

window 객체에 daum이라는 객체의 타입을 선언해줍시다. 타입스크립트는 자바스크립트와 달리 타입에 대한 선언이 필요하지만, 두 가지 이상 타입에 해당하거나 타입을 모를 경우 any로 선언해줄 수 있습니다. 이렇게 타입을 명시해 주고 나면 참조가 가능해집니다. 단, window에 daum 객체가 추가가 되는 형식이 되죠. 그렇기 때문에 콘솔에 찍어보려면

 

console.log(new window.daum.Postcode);

 

이렇게 사용을 해줘야 하겠습니다!

 

 

index.ts에서 정상적으로 콘솔에 찍히는 것을 확인할 수 있습니다.

 

예로 daum 우편번호 서비스 API를 들었지만, 다른 API를 확인하려면 마찬가지로 interface에 추가만 하면 되겠습니다.

declare global {
    interface Window {
      Kakao: any;
      daum: any;
      ...
    }
  }

 

추가로, 자바스크립트에서는 객체에 정의된 함수를 람다식으로 다음과 같이 받아왔을 텐데요.

 

 

oncomplete: function(data) { // JS
	...
}

 

역시나 타입스크립트에서는 전달될 'data'가 어떠한 타입인지 명시를 해주지 않으면 컴파일 에러가 발생할 것입니다.

이럴때도 any 타입을 붙여주면 해결되겠습니다.

 

oncomplete: function(data: any) { // TS
	...
}

 

(이전 우편번호 서비스 API 포스팅을 참고 바랍니다)

2020/09/08 - [Coding/JavaScript] - 내 홈페이지에 Daum 우편번호 서비스 API 붙이기! (반응형)

내 홈페이지에 Daum 우편번호 서비스 API 붙이기! (반응형)

 

 

---

 

결론

이렇게

 

엥? 어차피 any 타입으로 사용할 수 있으면 왜 굳이 귀찮고 더 까다로운 타입스크립트를 써야하는거죠? 🤫

 

라는 생각이 드실 수 있겠습니다. 하지만 타입스크립트는 자바스크립트와는 다른 고유한 장점이 존재합니다.

 

1. 확장성을 말할 수 있다. 강력한 구성요소를 구축하기 위해서 클래스, 모듈 및 인터페이스를 제공한다.
2. 자바스크립트를 응용해 개발할 수 있다.
타입스크립트를 이용하면 nodejs에서 작동하는 npm 설치를 통해서 다양한 프레임워크에 맞게 모듈을 다운로드해 개발할 수 있을 뿐더러 자바스크립트 코드를 사용하고 기존의 인기있는 라이브러리를 통합하여 호출해 개발할 수 있다. nodejs에서 모든 브라우저에서 작동하거나 ES6~7 호환환경에서 간단한 자바스크립트 코드를 깨끗하게 컴파일할 수 있다.
3. 대규모 응용프로그램 적용이 가능하다.

 

그 외에 많은 장점이 존재하나 양이 방대하기에 스터디가 더 필요할 것 같습니다 :(

이 부분은 다른 포스팅에서 더 중점적으로 다루도록 하겠습니다.

 

 

이상으로 포스팅을 마칩니다.

 

 

 

 

---

Reference

- 타입스크립트 공식문서

www.typescriptlang.org/docs/handbook/basic-types.html

- 책도 읽는 개발자님 블로그
https://wdevp.tistory.com/41