What is the proper way to declare static references in the Composition API with Typescript?

Question

What is the proper way to declare static references in the Composition API with Typescript?

Currently, I am using the Composition API (with <script setup lang='ts'>) to create a ref that is utilized in my template:

const searchRef = ref(null)
onMounted(() => { searchRef.value.focus() })

Although it works and my code compiles without any errors, my IDE (either JetBrains Goland or Webstorm) displays a warning with

TS2531: Object is possibly 'null'.

.

The more drastic solution involves using

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore: Object is possibly 'null'.

However, I'm interested in finding a better approach if possible.

I had initially hoped that utilizing optional chaining would resolve the issue:

const searchRef = ref(null)
onMounted(() => { searchRef.value?.focus() })

Despite still compiling and functioning correctly, this implementation now triggers an error message of

TS2339: Property 'focus' does not exist on type 'never'.

What would be the proper way to tackle this particular dilemma?

typescript vue.js reference vuejs3 vue-composition-api

Answer 1

Answer №1

When using template refs, it's important to specify a generic type argument for the ref during initialization. The specified generic type should match the type of the targeted element in the template reference.

Below are examples demonstrating how to use template refs with native HTML elements:

const htmlElemRef = ref<HTMLElement>()         // => type: HTMLElement | undefined
const inputRef = ref<HTMLInputElement>()       // => type: HTMLInputElement | undefined
const textareaRef = ref<HTMLTextAreaElement>() // => type: HTMLTextAreaElement | undefined

While initializing with null is optional, omitting it can lead to more concise code. In this case, the resulting type becomes <T | undefined>, which accurately reflects that the ref will be

undefined</code if the targeted element isn't present in the template structure. Optional chaining should still be used when accessing the value of the <code>ref

since it might be undefined.

For example:

const searchRef = ref<HTMLInputElement>()
onMounted(() => { searchRef.value?.focus() })

As mentioned by @Kurt, Vue components require a different approach when working with template refs. For these scenarios, the generic type for the ref should be an InstanceType of the component's type (obtained from a .vue import) (documentation):

InstanceType<typeof MyComponentDefinition>

For instance:

import HelloWorld from '@/components/HelloWorld.vue'

const helloRef = ref<InstanceType<typeof HelloWorld>>()

Please note that if you're working with TypeScript files and Volar instead of Vue Single File Components, make sure to enable Volar's Takeover Mode.

demonstration link

Answer 2

When using template refs, it's important to specify a generic type argument for the ref during initialization. The specified generic type should match the type of the targeted element in the template reference.

Below are examples demonstrating how to use template refs with native HTML elements:

const htmlElemRef = ref<HTMLElement>()         // => type: HTMLElement | undefined
const inputRef = ref<HTMLInputElement>()       // => type: HTMLInputElement | undefined
const textareaRef = ref<HTMLTextAreaElement>() // => type: HTMLTextAreaElement | undefined

While initializing with null is optional, omitting it can lead to more concise code. In this case, the resulting type becomes <T | undefined>, which accurately reflects that the ref will be

undefined</code if the targeted element isn't present in the template structure. Optional chaining should still be used when accessing the value of the <code>ref

since it might be undefined.

For example:

const searchRef = ref<HTMLInputElement>()
onMounted(() => { searchRef.value?.focus() })

As mentioned by @Kurt, Vue components require a different approach when working with template refs. For these scenarios, the generic type for the ref should be an InstanceType of the component's type (obtained from a .vue import) (documentation):

InstanceType<typeof MyComponentDefinition>

For instance:

import HelloWorld from '@/components/HelloWorld.vue'

const helloRef = ref<InstanceType<typeof HelloWorld>>()

Please note that if you're working with TypeScript files and Volar instead of Vue Single File Components, make sure to enable Volar's Takeover Mode.

demonstration link

Answer 3

Answer №2

To address this issue, one recommended solution is to manually include the appropriate typings:

const searchElementRef: Ref<HTMLElement | null> = ref(null);
onMounted(() => { searchElementRef.value?.focus() });

Please be aware that the type HTMLElement may vary if the reference is pointing to a Vue Component (e.g.

Ref<HTMLElement | Vue | null>

).

Answer 4

To address this issue, one recommended solution is to manually include the appropriate typings:

const searchElementRef: Ref<HTMLElement | null> = ref(null);
onMounted(() => { searchElementRef.value?.focus() });

Please be aware that the type HTMLElement may vary if the reference is pointing to a Vue Component (e.g.

Ref<HTMLElement | Vue | null>

).

What is the proper way to declare static references in the Composition API with Typescript?

Answer №1

Answer №2

Similar questions

Tips for utilizing Variant on an overridden component using as props in ChakraUI

What could be causing my Page to not update when the Context changes?

Step-by-step tutorial: Uploading an image from Vue.js using axios to phpMyAdmin

Encountering routing challenges while trying to navigate to the identical component

What is the process for removing a specific row from a datatable?

Step-by-step guide: Mocking an image using a fixture in Cypress

Encountering build issues in my next.js application post updating to version 12.#.# and implementing Typescript

Easiest Angular Carousel Solution

Angular 8: How to Retrieve Query Parameters from Request URL

How can Vue be used to dynamically alter a string within an input field by incorporating the status of checked checkboxes?

The proper method for updating data on a backend API using Axios and Vue

Angular: Unable to access values of non-existent data (reading '0')

Evaluating Angular/Typescript and its capabilities

Potential explanation for unexpected Typescript initialization error

Enhance your Next.js application by including the 'style' attribute to an element within an event listener

Encountering an error during the installation process of Vue Native using the Vue

Retrieve data from a URL using Angular 6's HTTP POST method

Utilizing a GLTF asset as the main Scene element in a Three.js project

Ways to obtain a referrer URL in Angular 4

Angular 6: Issue TS2339 - The attribute 'value' is not recognized on the 'HTMLElement' type