In Typescript, it is not possible to invoke a function within a class using

Could you shed some light on why this code snippet is producing an error? It seems like splitval should be functioning correctly as a method. I've set up a stackblitz with the code here- don't forget to check the console for errors

Here's where the function is called:

[(this.filcol, this.strtrans)] = (d.trans as Transform).splitval();

The output shows:

edit trans:{"val":"fil.SalesOrderNo=.slice(0,7)","note":""} TypeError: d.trans.splitval is not a function

Defined within the class:

export class Transform {
  val: string;
  note: string;

  splitval(): [string, string] {
    try {
      let filcol = this.val.substr(0, this.val.indexOf("="));
      let strtrans = this.val.substr(this.val.indexOf("=") + 1);
      return [filcol, strtrans];
    } catch (e) {
      console.log("err shared model splitval:" + e);
    }
  }
}

Answer №1

Your usage of the as operator is incorrect. In TypeScript, it's used for assertion, not for converting an object into an instance of a class.

When you parse JSON in the next line, you receive a standard JavaScript object as the output:

d.trans=JSON.parse('{"val":"fil.SalesOrderNo=.slice(0,7)","note":""}')

Using (d.trans as Transform) tells TypeScript that you're asserting d.trans to be an instance of Class Transform, which is inaccurate because it's not.

Please review the corrected code here: angular-7qxpyu

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 best way to import a reusable component from the theme folder in a React Native project?

I'm interested in importing a Button component that can be reused from the theme folder. The path to the Button component is as follows: \app\theme\components\Button.ts Here is the code for Button.ts: import { typography } from ...

Angular's ng-model is unable to access the value of an object array

When selecting the days, users should be able to input check-in and check-out time ranges dynamically. However, there seems to be an issue with retrieving the values and data format. The ng model is unable to capture the check-in and check-out values. The ...

Tips on creating a personalized memoizeOne function that delivers the accurate data type

I've implemented a function for object memoization: import memoizeOne from 'memoize-one'; type ArrayWithOneObj = [Record<string, unknown>]; const compareObject = ([obj1]: ArrayWithOneObj, [obj2]: ArrayWithOneObj) => obj1 === obj ...

Testing the selection of dropdown values in Angular2 using unit tests

I have a dropdown menu for selecting countries. It defaults to a pre-selected value, and when the user changes it, they are redirected to the corresponding country page. However, I am facing an issue while trying to unit test the default value in the sele ...

Creating reusable functions in VueJS that can be accessed globally by all child components

Looking for assistance in setting up a universal function that can be accessed across all my Vue files. For example, when using this code snippet in a Vue file: @click="ModalShow.show('my-create')" I have defined the following constan ...

Implementing the binding of components to another component post using forwardRef

I am looking to connect the Title and Body components with the Wrapper component. Previously, my component structure looked like this: import { FC } from 'react'; // binding required components const Title: FC<...> = () => {...} const ...

What distinguishes between the methods of detecting falsy and truthy values?

While working with JavaScript / Typescript, I often find myself needing to verify if a length exists or if a value is true or false. So, the main query arises: are there any differences in performance or behavior when checking like this... const data = [ ...

Press the key to navigate to a different page

I have an input field for a search box. I want it so that when I enter my search query and press enter, the page navigates to another page with the value of the input included in the URL as a query string. How can I achieve this functionality? Thank you ...

What is the process for determining the types of arguments for multiple functions in TypeScript?

const foo = (a: string, b: string) => { console.log('foo', a, b); }; const bar = (a: number, b: number) => { console.log('bar', a, b); }; const multiFactory = <M extends typeof foo | typeof bar>(method: M) => (. ...

Guide on building an npm package that seamlessly allows for installation both locally and globally (-g) using webpack and typescript

As I work on developing an npm package with options for both local and global (-g) installations, I find myself puzzled by the distinctions between the src and lib directories and the purpose of the bin directory. In my previous projects, I typically util ...

The combination of TypeScript output is not working as expected

Here is my current configuration: tsconfig.json { "compileOnSave": true, "compilerOptions": { "module": "none", "outFile": "js/app.js" } } MyApp.Main.ts class Main { constructor() { Utilities.init(this); ...

Tips for effectively packaging the React 17 library alongside the latest JSX transformation feature as an ES Module

I am currently in the process of creating a basic library consisting of React components that I intend to publish as an ES Module package for NPM. With the utilization of React 17, I have incorporated the new JSX transform into my code. To generate the ES ...

Issue with Angular: Unable to properly sort data while modifying queryParams

Within the component.ts file: export class TabsComponent implements OnInit { constructor( private store$: Store<UsersState>, private router: ActivatedRoute ) {} ngOnInit(): void { this.onFilterByIncome(); this.router.queryParam ...

What is the best way to implement "computeIfAbsent" or "getOrElseUpdate" functionality for a Map in JavaScript?

If we assume that m represents a Map<number, V> for a certain type V k is a number, how can we create an expression that can either retrieve an existing V for the key k, or generate a new v: V, insert it into the map for the key k, and result in v ...

Establish a connection between two pre-existing tables by utilizing the Sequelize framework

I have two tables already set up (User and PaymentPlan), but they were not initially linked together. PaymentPlan.ts import { DataTypes, Model } from "sequelize"; import { sequelize } from "./DBConnections/SequelizeNewConnection"; exp ...

Having trouble with ngx-pagination's next page button not responding when clicked?

I am experiencing issues with pagination. The next page button does not function as expected, and clicking on the page number also does not work. Below is the code snippet and a Demo link for your reference. HTML <table mat-table [dataSou ...

Leverage the nativeElement property within two separate components

Encountering an error in the autocomplete feature for Angular Maps (AGM), which reads: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined TypeError: Cannot read property 'nativeElement' of ...

Transforming an Established React Project into a Progressive Web Application

Currently, I have an existing react tsx project that has been set up. My goal is to transform it into a PWA by adding service workers. However, after adding the service workers in the src folder, I encountered an error when attempting to deploy on firebase ...

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

I am facing an issue with my form validation logic. I have a set of checkboxes that need to be validated only when a specific value is selected from a dropdown. The current validator checks the checkboxes regardless of the dropdown value. Here's the c ...

Set up a unique database in memory for every individual test

Is it feasible to create an in-memory database for each test scenario? My current approach involves using the code snippet below, which functions properly when running one test file or utilizing the --run-in-band option. import _useDb from "@/useDb&q ...