react + typescriptでローカルから画像を選択してプレビュー画面を表示させる方法

やりたいこと

ローカルにある画像ファイルを選択して、プレビューを表示させたい！

コード

export const UploadImage: React.FC = () = {
    const imageHander = (event: ChangeEvent<HTMLInputElement>) => {
        if (event.target.files === null) {
            return;
        }
        const file = event.target.files[0];
        if (file === null) {
            return;
        }
        let imgTag = document.getElementById("preview") as HTMLImageElement;
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            const result: string = reader.result as string;
            imgTag.src = result;
        }
    };
    return (
        <div>
            <input type="file" accept="image/png, image/jpeg, image/gif" onChange={imageHander} />
            <img id="preview" src=""></img>
       </div>
    );
}

解説

let imgTag = document.getElementById("preview") as HTMLImageElement;

ここでは、HTMLImageElementに型を変換しています。これは、デフォルトではdocument.getElementById("preview")の型がHTMLElement | nullとなっており、このままではsrcパラメータの設定ができないからです。

reader.onload = () => {
    const result: string = reader.result as string;
    imgTag.src = result;
}

ここではreader.resultの型をstringに変換しています。これは、デフォルトではreader.resultの型がstring | ArrayBuffer | nullとなっており、新たなsrcの値として与えることができないためです。