What category does a Fresh of Deno event fall under?

Question

What category does a Fresh of Deno event fall under?

I'm currently working with Deno and fresh. When it comes to events in islands, what is the type for an event like the one below?

export function Sample() {
  return (
    <input
      type="file"
      onChange={(e) => ...} // What type is this `e`?
    />
  );
}

I would also like to write it as shown here.

export function Sample() {
  const onChangeHandler = (e: ?) => { // What is the type of `e`? How do I import the type???
     ...
  }
  return (
    <input
      type="file"
      onChange={onChangeHandler} // What is the type of `e`?
    />
  );
}

The type appears to be

JSXInternal.TargetedEvent<HTMLInputElement, Event>

. Is this correct? How can I import this type from fresh?

typescript deno freshjs fresh-framework

Answer 1

Answer №1

When working with freshJS and pReact, you have the ability to incorporate event types in your code like shown below

    import { h } from "preact";

    export function Sample() {
    const handleChange = (e: h.JSX.TargetedEvent<HTMLInputElement, Event>) => {
        const target = e.target as HTMLInputElement | null;
        if (target) {
          setAnyDataHere(target.value);
        }
      };

      return (
        <input
          type="file"
          onChange={handleChange} // what is this `e`'s type???
        />
      );
    }

By adding const target = e.target as HTMLInputElement | null, we are casting e.target to either HTMLInputElement or null. Null Check: The if (target) statement is used to ensure that target is not null before accessing target.value. This approach satisfies TypeScript's requirement that e.target will not be null when its value property is accessed.

Answer 2

When working with freshJS and pReact, you have the ability to incorporate event types in your code like shown below

    import { h } from "preact";

    export function Sample() {
    const handleChange = (e: h.JSX.TargetedEvent<HTMLInputElement, Event>) => {
        const target = e.target as HTMLInputElement | null;
        if (target) {
          setAnyDataHere(target.value);
        }
      };

      return (
        <input
          type="file"
          onChange={handleChange} // what is this `e`'s type???
        />
      );
    }

By adding const target = e.target as HTMLInputElement | null, we are casting e.target to either HTMLInputElement or null. Null Check: The if (target) statement is used to ensure that target is not null before accessing target.value. This approach satisfies TypeScript's requirement that e.target will not be null when its value property is accessed.

Answer 3

Answer №2

function GenerateSample() {
  const handleInputChange = (event: Event) => { // Providing the solution without requiring any additional imports.
    const inputElement = event.target as HTMLInputElement; // Using type casting
    const selectedDocument = inputElement.files?.[0];
     ...
  }
  return (
    <input
      type="file"
      onChange={handleInputChange} // Wondering about the type of `event` here...
    />
  );
}

The above snippet shows my code, complete without any need for importing external libraries.

Answer 4

function GenerateSample() {
  const handleInputChange = (event: Event) => { // Providing the solution without requiring any additional imports.
    const inputElement = event.target as HTMLInputElement; // Using type casting
    const selectedDocument = inputElement.files?.[0];
     ...
  }
  return (
    <input
      type="file"
      onChange={handleInputChange} // Wondering about the type of `event` here...
    />
  );
}

The above snippet shows my code, complete without any need for importing external libraries.

What category does a Fresh of Deno event fall under?

Answer №1

Answer №2

Similar questions

How can I access a file uploaded using dxFileUploader?

The error message "Type 'string' cannot be assigned to type 'Condition<UserObj>' while attempting to create a mongoose query by ID" is indicating a type mismatch issue

The declaration file for the module 'vue-html-to-paper' was not located

Using masonry-layout with Next Js leads to a ReferenceError stating that window is not defined

Using the increment operator within a for loop in JavaScript

Elegantly intersect two types of functions in Typescript

Automatic verification of OTP in Ionic 3

How can I store the data retrieved from an API and then forward it to a URL using Angular?

Send the template to the enclosed grid column

Guide on combining vendor CSS files in a React application using Webpack

Using an external module in a Vue SFC: a beginner's guide

What is the process for creating a class in TypeScript?

React form submissions are not saving the state

I am encountering an issue where my application is not recognizing the angular material/dialog module. What steps can I take to resolve this issue and ensure that it functions properly?

How can parameters be implemented in Angular similar to NodeJs Express style?

NestJS testing issue encountered: Compiled JS file not found in E2E test using Mocha

Exploring the power of flow.js within an Angular 2 Typescript project

Mapping a TypeScript tuple into a new tuple by leveraging Array.map

Error encountered with next-auth and the getServerSession function

Encountering an "Invalid hook call error" while utilizing my custom library with styled-components