이 문서는 Google Cloud Translation API를 사용해 자동 번역되었습니다.
어떤 문서는 원문을 읽는게 나을 수도 있습니다.
TypeScript의 유형 안전 이벤트 처리: 이벤트 핸들러가 올바른 인수를 받도록 하는 방법
TypeScript는 개발자가 확장 가능하고 유지 관리 가능한 코드를 작성할 수 있도록 JavaScript에 유형 주석을 추가하는 강력한 프로그래밍 언어입니다. TypeScript의 가장 일반적인 사용 사례 중 하나는 복잡한 웹 애플리케이션을 만드는 데 사용되는 웹 개발입니다. 웹 개발의 과제 중 하나는 버튼을 클릭하거나 텍스트 상자에 입력하는 것과 같은 사용자 입력에 대한 응답으로 발생하는 작업인 이벤트를 처리하는 것입니다. 이 게시물에서는 이벤트 핸들러가 TypeScript를 사용하여 올바른 인수를 받는지 확인하는 방법을 살펴보겠습니다.
JavaScript에서 이벤트를 처리할 때 이벤트에 대한 정보에 액세스하기 위해 event
매개변수를 사용하는 것이 일반적입니다. 예를 들어 다음 코드 스니펫은 버튼에 이벤트 리스너를 추가하고 버튼을 클릭할 때 클릭한 버튼의 ID를 콘솔에 기록합니다.
const button = document.getElementById("myButton");
button.addEventListener("click", event => {
console.log(event.target.id);
});
그러나 이 방식에는 문제가 있습니다. event
개체는 강력한 형식이 아닙니다. 즉, 발생한 이벤트 유형이나 이벤트 개체에서 사용할 수 있는 속성에 대한 정보를 제공하지 않습니다. 이벤트 객체에 존재하지 않는 속성에 액세스하거나 이벤트 핸들러에 잘못된 인수를 전달하려고 하면 오류가 발생할 수 있습니다.
예를 들어 텍스트 입력과 양식을 제출하는 버튼이 있는 양식이 있다고 가정합니다. 양식을 제출하기 전에 입력의 유효성을 검사하기를 원하므로 입력 값을 확인하고 양식이 유효하지 않은 경우 양식 제출을 방지하는 이벤트 리스너를 만듭니다.
const form = document.getElementById("myForm");
const input = document.getElementById("myInput");
const submitButton = document.getElementById("submitButton");
submitButton.addEventListener("click", event => {
if (input.value === "") {
event.preventDefault();
console.log("Input is invalid");
}
});
이 코드는 잘 작동하는 것 같지만 input
요소의 유형을 체크박스로 변경하면 어떻게 될까요? 이벤트 리스너는 계속 실행되지만 input.value
속성은 undefined
이므로 오류가 발생합니다. 이는 event
개체에 보장되지 않는 HTMLInputElement
유형의 target
속성이 있다고 가정하기 때문입니다.
이 문제를 해결하기 위해 TypeScript에서 유형 주석을 사용하여 이벤트 핸들러가 올바른 인수를 받도록 할 수 있습니다. 유형 주석은 코드에서 변수 유형, 함수 매개변수 및 반환 값을 지정하는 방법을 제공합니다. 이벤트 핸들러에 대한 유형 주석을 사용하여 이벤트 객체가 올바른 유형과 속성을 갖도록 보장할 수 있습니다.
예를 들어 텍스트 입력과 양식을 제출하는 버튼이 있는 양식이 있다고 가정합니다. 양식 제출 이벤트의 속성을 설명하는 인터페이스를 정의할 수 있습니다.
interface FormSubmitEvent extends Event {
target: HTMLFormElement;
}
이 인터페이스는 Event
인터페이스를 확장하고 HTMLFormElement
유형인 target
속성을 추가합니다. 그런 다음 이 인터페이스를 사용하여 이벤트 리스너에서 event
매개변수에 주석을 달 수 있습니다.
const form = document.getElementById("myForm") as HTMLFormElement;
const input = document.getElementById("myInput") as HTMLInputElement;
const submitButton = document.getElementById("submitButton");
submitButton.addEventListener("click", (event: FormSubmitEvent) => {
if (input.value === "") {
event.preventDefault();
console.log("Input is invalid");
}
});
이 코드에서 우리는 TypeScript에 form
및 input
변수가 각각 HTMLFormElement
및 HTMLInputElement
유형임을 알리기 위해 유형 주장(as
)을 사용하고 있습니다. 또한 이벤트 리스너에서 event
매개변수에 주석을 추가하기 위해 FormSubmitEvent
인터페이스를 사용하고 있습니다. 이렇게 하면 event
객체가 HTMLFormElement
유형의 target
속성을 갖게 되어 양식 요소의 속성과 메서드에 안전하게 액세스할 수 있습니다.
이벤트 처리에서 유형 안전성을 보장하는 또 다른 방법은 제네릭 유형을 사용하는 것입니다. 일반 유형은 다양한 유형의 데이터와 함께 작동할 수 있는 함수와 클래스를 정의할 수 있게 해주는 TypeScript의 강력한 기능입니다. 이벤트 핸들러에서 일반 유형을 사용하면 각 이벤트 유형에 대해 별도의 인터페이스를 정의하지 않고도 이벤트 객체가 올바른 유형을 갖도록 할 수 있습니다.
예를 들어 클릭 시 맞춤 이벤트를 트리거하는 버튼이 있다고 가정합니다. 이벤트가 실행될 때 이벤트 이름과 데이터를 콘솔에 기록하는 이벤트 리스너를 생성하려고 합니다. CustomEvent<T>
유형의 이벤트 개체를 사용하고 이벤트 이름과 데이터를 콘솔에 기록하는 일반 함수를 정의할 수 있습니다.
function logCustomEvent<T>(event: CustomEvent<T>) {
console.log(`Event name: ${event.type}`);
console.log(`Event data: ${event.detail}`);
}
이 코드에서는 일반 유형 매개변수 'T'를 사용하여 맞춤 이벤트에 포함된 데이터 유형을 지정합니다. 그런 다음 이 함수를 사용하여 T
유형의 데이터 페이로드가 있는 모든 사용자 지정 이벤트를 처리할 수 있습니다.
const button = document.getElementById("myButton");
button.addEventListener("customEvent", (event: CustomEvent<string>) => {
logCustomEvent(event);
});
이 코드에서는 CustomEvent<string>
유형을 사용하여 이벤트 리스너의 event
매개변수에 주석을 추가합니다. 이렇게 하면 event
개체에 string
유형의 detail
속성이 있어 이벤트 데이터를 logCustomEvent
함수에 안전하게 전달할 수 있습니다.
이 게시물에서는 이벤트 핸들러가 TypeScript를 사용하여 올바른 인수를 받는지 확인하는 방법을 살펴보았습니다. 이벤트 객체가 올바른 유형과 속성을 갖도록 유형 주석 및 일반 유형을 사용하는 방법을 살펴보았습니다. 이러한 기술을 사용하여 오류가 덜 발생하는 보다 강력하고 유지 관리 가능한 이벤트 처리 코드를 작성할 수 있습니다.
as
)을 사용하여 변수를 특정 유형으로 캐스트할 때 주의하십시오. 유형 어설션은 TypeScript의 유형 검사를 우회할 수 있으므로 캐스트가 올바르지 않으면 런타임 오류가 발생할 수 있습니다.