I am struggling to grasp the concept of ref unwrapping within a TypeScript template

Question

I am struggling to grasp the concept of ref unwrapping within a TypeScript template

I'm currently in the process of converting some Vue3 code from javascript to typescript, and I am struggling to comprehend the unwrapping of a ref/computed value in the template.
I used to believe that the template would automatically unwrap reactive properties, but it appears that this is no longer the case.

Here is the code snippet:

<script setup lang="ts">
import { ref } from 'vue';

class BaseBlock {
  style = ref('color: black')
}

interface IRefBlockKey {
  [key: string]: BaseBlock;
}

let Block = new BaseBlock();
let refBlock = ref(new BaseBlock());
let refWithKeyBlock = ref({ myBlock: new BaseBlock() });
let refWithInterface = ref<IRefBlockKey>({ myBlock: new BaseBlock() });
</script>

<template>
  <div :style="Block.style">Error in IDE</div>
  <div :style="Block.style.value">No Error</div>
  <div :style="refBlock.style">No Error</div>
  <div :style="refWithKeyBlock['myBlock'].style">No Error (ok...?)</div>
  <div :style="refWithInterface['myBlock'].style">Error in IDE (why now!!)</div>
</template>

The first and last div are both causing an error in my IDE

Type 'Ref<string>' is not assignable to type 'StyleValue | undefined'.

.
The fact that the first div isn't working has left me feeling disoriented, but the issue with the last one is really puzzling.

Can anyone provide guidance on understanding what exactly is happening here?

typescript vue.js vuejs3

Answer 1

Answer №1

SOLUTION

There are several approaches to solving this issue.

The optimal solution:

Rewrite the code using composables instead of classes. Here is how you can refactor the code:

<script setup lang="ts">
import { ref } from 'vue';

function useBaseBlock() {
  style = ref<string>('color: black')
  return { style }
}

type IRefBlockKey = {
  [key: string]: {style: Ref<string> | string};
}

let refWithInterface = ref<IRefBlockKey>({ myBlock: useBaseBlock()});
</script>

<template>
  <div :style="refWithInterface['myBlock'].style">Updated code here</div>
</template>

Note that the type has been changed to Ref<string> | string. If you prefer using reactive instead of ref, simply using string will suffice.

The less preferable option

You can use unref to access the value of

refWithInterface['myBlock'].style

:

unref(refWithInterface['myBlock'].style)

While this method works, it is not the most ideal solution.

The unconventional choice:

The style attribute supports CSSProperty (a variant of it depending on the element), as well as string and undefined types. You could potentially define your own type such as Ref<string> for better IDE support, but this workaround is not recommended, so it's best to avoid it!

Answer 2

SOLUTION

There are several approaches to solving this issue.

The optimal solution:

Rewrite the code using composables instead of classes. Here is how you can refactor the code:

<script setup lang="ts">
import { ref } from 'vue';

function useBaseBlock() {
  style = ref<string>('color: black')
  return { style }
}

type IRefBlockKey = {
  [key: string]: {style: Ref<string> | string};
}

let refWithInterface = ref<IRefBlockKey>({ myBlock: useBaseBlock()});
</script>

<template>
  <div :style="refWithInterface['myBlock'].style">Updated code here</div>
</template>

Note that the type has been changed to Ref<string> | string. If you prefer using reactive instead of ref, simply using string will suffice.

The less preferable option

You can use unref to access the value of

refWithInterface['myBlock'].style

:

unref(refWithInterface['myBlock'].style)

While this method works, it is not the most ideal solution.

The unconventional choice:

The style attribute supports CSSProperty (a variant of it depending on the element), as well as string and undefined types. You could potentially define your own type such as Ref<string> for better IDE support, but this workaround is not recommended, so it's best to avoid it!

I am struggling to grasp the concept of ref unwrapping within a TypeScript template

Answer №1

SOLUTION

The optimal solution:

The less preferable option

The unconventional choice:

Similar questions

Incorporate an interface for handling potential null values using Typescript

Encountered a hiccup during the installation of ssh2-sftp-client on Next.js

I am attempting to utilize the fetch API method to initialize the store's state, but for some reason, it is not functioning properly

Typescript compiles only the files that are currently open in Visual Studio

Converting an Angular1 App into a VueJs app: A step-by-step guide

Expanding Material UI functionality across various packages within a monorepository

Utilizing a function upon page initialization in VueX

Adding a line break in a Buefy tooltip

"Encountered a 'Module not found: Error: Can't resolve' issue while attempting to install from GitHub. However, the standard installation process

How to simulate a particular class from a node package using Jest mocks

Step-by-step guide for resolving the issue of "Observable.share is not recognized as a function" in Angular 2

"Enhancing the functionality of @angular/fire by transitioning from version 6.x to 7.x

I'm curious if there is an eslint rule specifically designed to identify and flag any unnecessary spaces between a block comment and the function or

The TypeScript compiler is tolerant when a subclass inherits a mixin abstract class without implementing all its getters

Issue with Typescript - Node.js + Ionic mobile app's Angular AoT build has encountered an error

How does one distinguish between the uses of "any" and "any[ ]"?

Is there a method available that functions akin to document.getelementbyid() in this specific scenario?

What are the limitations of using concatMap for handling multiple requests simultaneously?

Issue with authentication and cross-origin resource sharing (CORS) when implementing Spring Boot, Spring Security, Vue.js,

What about a toggle for read-only TypeScript everywhere? (parameters in functions)