This post discusses the error “Property ‘files’ does not exist on type ‘EventTarget'” in TypeScript. Let’s see what is causing the error as well as how we can solve this problem.
Why do we get the error “Property ‘files’ does not exist on type ‘EventTarget'” in TypeScript
The error message “Property ‘files’ does not exist on type ‘EventTarget’” appears when accessing property ‘files‘ on the element of type ‘EventTarget‘.
To illustrate, let me reproduce the error case:
HTML snippet for this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<h2>Upload your picture here:</h2>
<input type="file" id="picture" accept="image/png, image/jpeg" />
<button id="myButton">Confirm</button>
<script src="./main.ts"></script>
</body>
</html>The error will occur in the ‘main.ts‘ file with the code below:
const myPicture = document.getElementById("picture");
myPicture?.addEventListener("getPicture", (event) => {
console.log(event.target?.files);
});Error:
As you can see, this error results from accessing the ‘files’ property on an element of type ‘EventTarget’, which does not have the ‘files’ property.
The ways we can apply to solve this problem
To get around this problem, use the type assertion.
Type Assertion is a logic mechanism of TypeScript that allows you to set the type of a variable and tell TypeScript not to infer the type of the variable itself. Now we can manually manage the variable type or the type returned from a function.
Before accessing the element, we use type assertion to type it as ‘HTMLInputElement’.
Take a look at this example, where we create a variable res to store the value of event.target. Then type the res into an HTMLInputElement.
const myPicture = document.getElementById("picture");
myPicture?.addEventListener("getPicture", (event) => {
const res = event.target as HTMLInputElement;
console.log(res.files);
});Besides, to make the code more concise, you can write on one line as follows:
const myPicture = document.getElementById("picture");
myPicture?.addEventListener("getPicture", (event) => {
const res = (event.target as HTMLInputElement).files;
console.log(res);
});At this point, TypeScript will understand that you are storing an HTMLInputElement in the variable res. That’s why you can access the ‘files’ property without worrying about an error.
A tip for you: Consistently named types are ‘HTML#Element’. When you type HTML.., the IDE will support you with autofill.
Some other popular types you can refer to: HTMLButtonElement, HTMLDivElement, HTMLFormElement, HTMLImageElement, HTMLOptionElement, etc.
Summary
Finally, we have provided you with important information about the error “Property ‘files’ does not exist on type ‘EventTarget’“ in TypeScript. Hopefully, this information will help you. That’s the end of this post. Thanks for reading.
Maybe you are interested:
- Type ‘typeof globalThis’ has no index signature in TypeScript
- Property ‘#’ does not exist on type ‘EventTarget’ in TS
- Property ‘click’ does not exist on type ‘Element’ in TypeScript
My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.
Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js