Trying to learn Typescript (specifically events) with my ionic/react app

Ionic Framework Ionic React
1

My code works. But I still get a red underline in VSCode so I want to go over my thought process and hopefully someone can point out what is wrong with my thinking.

I started with this code which was originally just javascript.

<IonInput value={password} onIonInput={event =>setPassword(event.detail.value)} label='Password' type="password" labelPlacement="stacked"></IonInput>

I got a red line under event.detail.value saying:

  Type 'undefined' is not assignable to type 'SetStateAction<string>'.

(property) IonInputCustomEvent<InputInputEventDetail>

This means my type is off. And also I THINK it’s telling me what type to put in there with the IonIonInputCustomEvent<InputInputEventDetail>

When I type the event with that it works!:

<IonInput value={password} onIonInput={(event: IonInputCustomEvent<InputInputEventDetail>) =>setPassword(event.detail.value)} label='Password' type="password" labelPlacement="stacked"></IonInput>

BUT I get a red line under both IonInputCustomeEvent and InputInputEventDetail and the pop up says cannot find name IonInputCustomEvent and cannot find name InputInputEventDetail.

Why do I get this? Is this supposed to happen? Is there a better way of doing this so I don’t get a red line? I’m just afraid I’m doing something correct when really I’m doing something incorrectly.

2

When adding types to an event like this:

        onIonChange={(
          event: IonTextareaCustomEvent<TextareaChangeEventDetail>,
        ) => {
          if (event.detail.value) {
            onChange(event.detail.value);
          }
        }}

You need to import the types:

import { IonTextarea, TextareaChangeEventDetail } from '@ionic/react';
import type { IonTextareaCustomEvent } from '@ionic/core';

Note that if you are ONLY using a type from a package, you can use import type instead of just import; this can help the bundler (vite, webpack, etc.) because then the bundler knows it doesn’t actually need that package when building a production app.

Type ‘undefined’ is not assignable to type ‘SetStateAction’.

What this error really means is “event.detail.value might be undefined, but setPassword() expects a string.”

Notice how my code above uses if(event.detail.value) to make sure that the value is not null before attempting to set it.