[VUE] How to properly type <ion-content>?

Ionic Framework Ionic Vue
1

Hi. Can somebody explain to me how to properly type ref in Vue.js to get Typescript support?

There is IonContent

With such types:

export declare const IonContent: import("vue").DefineComponent<JSX.IonContent & import("./vue-component-lib/utils").InputProps<string | number | boolean>, object, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<JSX.IonContent & import("./vue-component-lib/utils").InputProps<string | number | boolean>>, {}>;

And we are using it like so:

<ion-content
      ref="content"      //ref here
      :scroll-events="true"
      @ionScroll="onContentScroll($event)"
      class="match-page_content"
    >

const content = ref(null) //TS complaints

Then I import the type, like so:

  import { IonContent } from '@ionic/vue';

const content = ref<typeof IonContent | null>(null);

Now it does not complain, but it still says that $el is any - but I know for a fact there are those commented out methods…

const handleSlideChange = (swiper: ISwiper) => {
    setTimeout(() => {
      if (content.value) {
        content.value.$el.    // says any
        // content.value.$el.scrollToTop(250); //but I know it is working
        swiper.updateAutoHeight();
      }
    }, 100);
  };

So how to properly type it, so that I will get autocomplete and support on $el. and all further properties?

2

I asked a similar question over in Discord for IonIcon a while back. To get $el to show up, it was recommended to use InstanceType.

const myContent = ref<InstanceType<typeof IonContent> | null>(null)

Then to type $el:

(myContent.value.$el as HTMLIonContentElement).scrollToTop()
1 Like
3

Thank you for replying.
I was told to use InstanceType as well, but I still had to do as you did (myContent.value.$el as HTMLIonContentElement).scrollToTop() - that is, assertion of a specific type via as keyword.
And apparently, this is the only way to do it, since $el is only be known at runtime, and at compile time it’s gonna be always any. (read it from Vue docs).

So I guess this assertion is necessary.

1 Like