[타입스크립트] 브라우저별 동영상 지원을 위한 인터페이스 확장

	const handleFullscreen = () => {
		const videoElement = videoRef.current!;

		if (videoElement.requestFullscreen) {
			videoElement.requestFullscreen();
		} else if (videoElement.mozRequestFullScreen) {
			videoElement.mozRequestFullScreen();
		} else if (videoElement.webkitRequestFullscreen) {
			videoElement.webkitRequestFullscreen();
		} else if (videoElement.msRequestFullscreen) {
			videoElement.msRequestFullscreen();
		}
	};

비디오 컴포넌트를 자바스크립트에서 타입스크립트로 전환하던 중, 아래와 같은 에러를 맞이했다.

Property 'msRequestFullscreen' does not exist on type 'HTMLVideoElement'.
Property 'mozRequestFullScreen' does not exist on type 'HTMLVideoElement'.
Property 'webkitRequestFullscreen' does not exist on type 'HTMLVideoElement'.

이는 HTMLVideoElement에 브라우저별 Property가 정의되어 있지 않기 때문이다.
아래와 같이 HTMLVideoElement 인터페이스를 확장해줌으로써 해결할 수 있다

declare global {
	interface HTMLElement {
		msRequestFullscreen?: () => Promise<void>;
		mozRequestFullscreen?: () => Promise<void>;
		webkitRequestFullscreen?: () => Promise<void>;
	}
}