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

Vue component fails to react to updates from Vuex

Discover the latest DOM elements using Webdriverio 5

Logging in with oidc-client and IdentityServer4 on separate domains

TSLint Alert: Excessive white space detected before 'from' keyword (import-spacing)

What is the simplest method for converting a large JSON array of objects into an object containing the same data under the key "data" in TypeScript?

npm-bundle encounters an issue with Error: ENOENT when it cannot find the file or directory specified as 'package.json'

Transforming the Blade user profile into a sleek Vue interface for the Laravel-Vue project

A TypeScript array interface featuring an indexed structure along with the ability to access custom properties through string keys

Can the parameters in a .slice() be customized within a v-for loop?

The Nuxt Auth local token cookie enables the user's status to be marked as logged in

Is there a way to find the recursive key types in TypeScript?

Newbie: Troubleshooting Vue Errors - "Vue is not recognized"

Troubleshooting: Issues with Angular 2 Dependency Injection

What steps are involved in generating a Typescript module definition for a directory containing a babel-plugin-content-transformer?

Is there a way to implement error validation successfully in React Hook Form while utilizing template literals within the register function?

The Selenium test functions correctly in the production environment, however it encounters issues when run

What is the best way to transfer data from a component to a .ts file that contains an array?

Unable to refresh the context following a successful API call

Comparing Input and Output Event Binding

Updating a component's properties for a dynamic router-link in Vue.js: Tips and tricks