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
We earn a commission if you click this link and make a purchase at no additional cost to you.
07/27/2024 6:46 am UTC
Footnotes: