In Vue 3, when using TypeScript, you can define the type of a ref using angle bracket notation, we can pass in the type assertion as an argument.


<script setup lang="ts">
// Create our script tag using "ts" as language and mark with "setup"
// keyword. Instantiate our variable and assign to ref.
// Pass type as assertion
const componentString = ref<string>('Hello, world!');
const componentInteger = ref<number>(23);
const componentObject = ref<Record<string, any>>({});
const componentArray = ref<string[]>(['one', 'two', 'three']);
</script>

<template>
  <span>
    {{ componentString }}
  </span>
</template>

<style scoped>
</style>

The snippet contains examples on typing String, Integer, Object and Array type refs. The above translates into the following behind the scenes:

const componentString: globalThis.Ref<string>

Article continues below

Our Sponsored Pick
| TrustScore 4.6

So I know our tutorials are totally awesome 😉. But maybe, going through how-to's is not how you would like to be spending your precious time. Imagine a world where things just work. Kinsta's hosting platform gets our official -"Easy Way of the Day" seal. Advanced features that are incredibly easy to set up.

Pros:
  • Cloudflare integration
  • Automatic daily backups
  • DDoS protection
Cons:
  • Exclusively for WordPress
Explore Platform Read Reviews
We earn a commission if you click this link and make a purchase at no additional cost to you.
06/17/2024 4:27 am UTC

Footnotes: