Why do referees attempt to access fields directly instead of using getters and setters?

I am facing an issue with my TypeScript class implementation:

class FooClass
 {
    private _Id:number=0 ; 
    private _PrCode: number =0; 

    public get Id(): number {
        return this._Id;
    }

    public set Id(id: number) {
        this._Idproduit = id;
    }

    public get PrCode(): number {
        return this._PrCode;
    }

    public set PrCode(prCode: number) {
      
       this._PrCode = prCode;
    }
 }

When I create a reactive variable inside a component like this:

 const Model = ref<FooClass|null>(null);

and try to pass it to a function as shown below:

let FooFunc  = (FooClass|null) =>{//Do something} 

using FooFunct(Model), I encounter the following error:

Argument of type '{ Id: number; PrCode: number; }is not assignable to parameter of type 'FooClass'. type { Id: number; PrCode: number; } is missing the following properties from type 'FooClass': {_Id,_PrCode}

It seems that the Ref Function is trying to access "the private fields" directly instead of using the getters and setters. How can I solve this issue?

Answer №1

There is a TypeScript error occurring that only manifests during compile time, so it's unrelated to private fields being accessed at runtime.

In TypeScript, private fields play a role in determining type compatibility. They can be utilized to purposely create type mismatches and prevent inadvertent matching of similar types. In this case, the goal is to specifically exclude private fields from the type.

The correct approach would involve:

type BarInterface = Omit<BarClass, keyof BarClass>
...
const Data = ref<BarInterface|null>(null);
let BarFunc = (BarInterface|null) =>{//Perform some action} 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most efficient way to update data multiple times by mapping over an array of keys in a react hook?

My question might not be articulated correctly. I'm facing an issue with dynamically translating my webpage using Microsoft's Cognitive Services Translator. I created a react hook for the translator, which works well when I need to translate a si ...

Verify the login status, display a prompt if the user is not logged in, and proceed with the process upon successful

Utilizing Vuejs along with Vuetify and Vuex, I aim to develop a basic app such as a small todo list. My backend is supported by an Express REST api and for handling HTTP methods, I rely on Axios. In dealing with session management, I have come across two ...

Mastering the art of theming components using styled-components and Material-UI

Can you integrate the Material-UI "theme"-prop with styled-components using TypeScript? Here is an example of Material-UI code: const useStyles = makeStyles((theme: Theme) => ({ root: { background: theme.palette.primary.main, }, })); I attemp ...

Tips for changing the CSS properties of input elements in iView

Exploring Vue's single file components and experimenting with the iView UI framework. Here is a snippet of code I am working with: <template> <div> <i-input class="cred"/> </div> </template> I want to adjust the ...

Guide on creating a server-side middleware in Next.js

In my upcoming nextjs project, which is a monorepo with both frontend and backend components, I am in need of a middleware to intercept requests. This middleware will handle tasks such as authentication and other necessary controls for every API call. Alth ...

Why is my prop not being passed correctly in Vue 3.js?

In my project, I encountered an issue with rendering a component (a <select> menu) multiple times. To specify which options should be pre-selected in each instance of the menu (Perth for the first menu and Melbourne for the second), I passed a prop ...

vue-awesome-swiper / The button's name is synchronized, causing all other swiper elements to move in unison

<template> <swiper v-for="item in items" :key="item.id" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slid ...

Guide on accessing a nested array within a JSON object using JavaScript

I'm currently faced with a json object that contains nested arrays and names with spaces like Account ID. My goal is to only display the Account ID's within my Vue.js application. While I can access the entire response.data json object, I'm ...

Avoid transitioning to a different page using Vue-router

I have recently ventured into the world of Vue.js and my current project involves fetching data from an API, implementing pagination, and creating a detailed view for each post upon clicking. I have successfully implemented the pagination feature, however, ...

Determine the value of an object by iterating through its keys

UPDATE: (for clarification) I currently have a table named modelCoa +----+----------+-------+--------------------+ | id | id_parent| code | name | +----+----------+-------+--------------------+ | 1 | 0 | 1 | asset ...

Lazy loading with Vue router seems to be having issues within the Vite environment, as an error is being thrown mentioning an unknown

I have successfully implemented the code below in Vue router and it works flawlessly in Vue-CLI. import store from "./../../store/index.js"; function getView(view) { return () => import(`@/views/settings/${vi ...

Angular 7 and its scrolling div

Currently, I am working on implementing a straightforward drag and drop feature. When dragging an item, my goal is to scroll the containing div by a specified amount in either direction. To achieve this, I am utilizing Angular Material's CDK drag an ...

There seems to be an issue with calling this particular expression. The elements within the type 'string | ((searchTerm: string) => Promise<void>) | []' are not all callable

Here is my unique useResults custom hook: import { useEffect, useState } from 'react'; import yelp from '../api/yelp'; export default () => { const [results, setResults] = useState([]); const [errorMessage, setErrorMessage] = us ...

Include a query parameter each time a page is added to bookmarks

Is there a way to automatically add a query parameter to a page URL when bookmarked using Chrome? For example, if I bookmark https://www.example.com, can it be saved as https://www.example.com/?bookmarked? I'm thinking I might need to use JavaScript ...

Guide: Implementing Vuex store within a plugin

I recently developed a custom Vue plugin which includes a customized instance method import Echo from 'laravel-echo'; import Vue from 'vue'; import config from '@/config'; const echor = { install(Vue){ Vue.prototy ...

Utilizing Angular Components Across Various Layers: A Guide

Consider the following component structure: app1 -- app1.component.html -- app1.component.ts parent1 parent2 app2 -- app2.component.html -- app2.component.ts Is it possible to efficiently reuse the app2 component within the ap ...

How can I set up TypeScript warnings in Visual Studio Code to display as errors?

Take this scenario for instance async function a() { await null; } In VS Code, there is a minor warning about using await: 'await' has no effect on the type of this expression. ts(80007) Is there a way to elevate that warning to an error in b ...

When conducting tests, TypeScript raises an issue when comparing the values of array elements subsequent to performing a shift()

I am working with an array of strings, which was created by splitting a larger string using the `split` operation. Specifically, I am performing some tests on the first two elements of this array: var tArray = tLongString.split("_") if (tArray[0] == "local ...

Vue js homepage footer design

I am struggling to add a footer to my Vue.js project homepage. Being an inexperienced beginner in Vue, I am finding it difficult to make it work. Here is where I need to add the footer Below is my footer component: <template> <footer> </ ...

Problem with Cordova Android build

Currently, I am utilizing vue-cordova to incorporate cordova into my Vue.js framework. After successfully adding the android platform and generating the APK file, a new challenge arose. Despite days of development work, running cordova build android only ...