우선, html에 js파일을 넣을때 type="module" 로 해야한다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8' />
<script type="module" src="./client.js"></script>
</head>
</html><div onclick="click(this)"> </div>client.js
function click(element) {
alert("click");
};이렇게 작성될 경우
Uncaught ReferenceError: click is not defined
at DIVElement.onclick 이런 오류를 마주치게 된다.
이 문제는 ES6 모듈의 스코프와 HTML 인라인 onclick 속성이 서로 다르게 동작하기 때문에 발생한다.
HTML의 onclick은 전역 스코프에서 함수를 찾으려고 하지만, ES6 모듈은 자체 스코프를 가지고 있습니다.
그래서, onclick 속성은 click 함수를 찾을 수 없어서 Uncaught ReferenceError 오류가 발생합니다.
방법 : 전역 객체에 함수 추가
client.js 내에서 다음과 같이 작성하여 전역 객체에 함수를 추가하기.
window.click = function(element) {
alert("click");
};TypeScript에서의 해결
(window as any).click = function(element: Element) {
alert("click");
}하지만, 이렇게 해결함에도 여러개의 함수를 추가할때 타입스크립트 에러가 발생한다.
TS2339: Property 'click' does not exist on type 'void'.이 문제를 해결하기 위해 먼저 window 객체에 대한 타입 확장을 할 수 있다.
interface MyWindow extends Window {
click1?: (element: Element) => void;
click2?: (element: Element) => void;
click3?: (element: Element) => void;
}
declare var window: MyWindow;
window.click1 = function(element: Element) {
alert("click1");
}
window.click2 = function(element: Element) {
alert("click2");
}
window.click3 = function(element: Element) {
alert("click3");
}
Better Tomorrow