Tips for handling TypeScript error TS2339 - Property does not found on type

Incorporating Angular 8 (initiated a project in Visual Studio 2019) and currently working with a fabric.init.ts file containing the following content:

import 'fabric';
import * as fabric from 'fabric/fabric-impl';

// (TS) Property 'DPI' does not exist on type 'typeof import(..@types/fabric/fabric-impl)'
fabric.DPI = 213;
....

The following code aligns well with the d.ts definition:

// Override fabric to meet our requirements
fabric.util.object.extend(fabric.Object.prototype, {
  centeredRotation: true,

How can I disregard the TS2339 error related to DPI? Having autocomplete functionality is crucial for mastering fabric.

This is how my package.json looks like:

"private": true,
"dependencies": {
  "@angular/core": "8.2.14",
  ....
  "@angular/router": "8.2.14",
  "@types/fabric": "3.5.1",
  "fabric": "3.5.1",
  ...
},

UPDATE

To address this issue temporarily, I have included this line:

// @ts-ignore
fabric.DPI = 213;

While not the ideal solution, I am inclined towards @wentjun's approach.

By modifying this line: 

import * as fabric from 'fabric/fabric-impl';
to import { fabric } from 'fabric';, I now benefit from VisualStudio intellisense support. Naturally, I have added @types/fabricjs to my package.json file.

https://i.sstatic.net/voyf3.png

angulartypescriptfabricjs

Answer №1

To bypass TypeScript's strict typing, you can either cast it as any as recommended by Vugar or

import the TypeScript declarations

Answer №2

As an example, consider the following code snippet: (fabric as any).DPI = 213;

Answer №3

I have limited experience with Fabric, but one way to customize it is by extending the fabric namespace to include DPI as a valid property.

To do this, you can start by creating a typescript file and defining your new fabric definition.

custom-fabric.ts:

interface ExtendedFabric {
  DPI: number;
}

// add extra types to fabric and export it for use
export const CustomFabric: (ExtendedFabric & typeof fabric) = fabric as any;

In the class or component where you want to use it,

import { CustomFabric } from './custom-fabric';

CustomFabric.DPI = 213; // no TypeScript errors

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

How can the second subscription's return value be synchronously used in the first subscription in Angular 6?

Currently, I am working on an Angular 6 application and facing a scenario where I have to make multiple API calls in sequence, pass data between them, and then continue the process. For instance, in the .ts file: logout(){ this.apiService.POST({}, "logo ...

angularapihttpobservable

Dynamically setting properties in a Vue component using Angular

After browsing through this interesting discussion, I decided to create a web component: <my-vue-web-comp [userId]="1"></my-vue-web-comp> Initially, everything was working smoothly in Angular when I assigned a static property. Howeve ...

javascriptangulartypescriptvue.jsweb-component

Challenges Encountered when Making Multiple API Requests

I've encountered a puzzling issue with an ngrx effect I developed to fetch data from multiple API calls. Strangely, while some calls return data successfully, others are returning null for no apparent reason. Effect: @Effect() loadMoveList$: Obse ...

javascriptangulartypescriptngrx-effects

Trigger the ngOnInit() function of the app component for a second time by clicking on a link

Currently, I am in the process of restructuring an Angular project and came across the following functionality. Inside app.component.ts file ngOnInit() { this.portfolioID = Number(sessionStorage.getItem('portfolioID')); console.log(this.portfol ...

angular

Is there a sweet TypeScript class constructor that can take in its own instance as an argument?

I have a scenario where I need to read in instances of Todo from a CSV file. The issue is that Papaparse does not handle dynamic conversion on dates, so I'm currently dropping the object into its own constructor to do the conversion: class Todo { ...

javascriptnode.jsangulartypescript

Incorporating responsive design with React and Typescript

Trying to utilize React with TypeScript, I aim to dynamically generate components based on a field name // Storing all available components const components = { ComponentA, ComponentB, }; // Dynamically render the component based on fieldName const di ...

reactjstypescript

Creating interactive forms with Angular 9 using ngx-formly and arrays for dynamic form generation

Looking to implement: Dynamic Forms based on user-selected locale JSON using ngx-formly/material. How can I connect fields with my array of objects "this.fields2"? In my component.ts file, I have: model: any = {}; options: FormlyFormOptions = {}; fields: ...

angularformsreactiveangular-reactive-formsngx-formly

Matching the appropriate data type for interface attributes

In the process of developing a module (module1), I have defined the following interface type: interface ModuleOneInterface { keyOne: customInterface; keyTwo: customInterface; keyThree: customInterface; } Now, as I work on another module (modul ...

typescripttypescript-typingsreact-typescript

The world of TypeScript generics and derived data types

I'm looking to streamline the process of calling multiple functions by creating a function that handles this task. These functions all require similar business logic and cleanup operations. function foo(arg: number) { // perform actions using arg ...

typescripttypescript-typingstypescript-generics

What are the best practices for sharing context in express and typescript?

Implementing a solution to expose a value to all request handlers using express and typescript is my goal. I am looking for a way to easily "inject" this value from a middleware or an alternative method that allows for simple mocking if needed. Here is th ...

javascriptnode.jstypescriptexpressdependency-injection

Implementing the TabView positioning at the top for IOS in Nativescript

Is it possible to place the TabView at the top on IOS rather than the bottom? ...

iosangularnativescript

Creating a new JavaScript object using a Constructor function in Typescript/Angular

Struggling with instantiating an object from an external javascript library in Angular/Typescript development. The constructor function in the javascript library is... var amf = { some declarations etc } amf.Client = function(destination, endpoint, time ...

javascriptangulartypescript

typescript decorator implemented on a class that is nested within another class

Is it possible to decorate a nested property within a class? Let's explore with an example: function log(name: string = 'DecoratedProp') { return function logHandler(target: any, field: any) { // get the key ...

typescriptdecorator

"The `ngClass` directive allows for applying classes as an `object` rather than just a simple `class` value

When applying the class name like this: <tr *ngIf="crud.isCreate" [ngClass]="{'create' : crud?.isCreate}"> The class name is not being added correctly. In HTML, it appears as: <tr _ngcontent-yql-c9="" ng-reflect-ng-class="[object Obje ...

angularangular-directiveangular8

Sign in to Azure for an Angular application within the iFrame of another Angular application

I have two separate Angular apps, both enabled with Azure AD login. When accessed separately in the tab, they function properly - redirecting and obtaining the token without issue. Now, I aim to make Angular 1 the Parent and Angular 2 the child within a s ...

angularazureiframeazure-active-directoryopenid-connect

Generate a pre-signed URL for an AWS S3 bucket object using Typescript in NextJS, allowing for easy file downloads on the client-side using @aws-sdk/S3Client

In the utilization of v3 of the S3Client, it appears that all existing examples are based on the old aws-sdk package. The goal is for the client (browser) to access a file from S3 without revealing the key from the backend. From my research, it seems tha ...

typescriptnext.js

What could be causing the ion-item click to malfunction in Ionic 4 on iOS devices?

ion-item clickable event is not working on iOS but it works fine on Android. I have been searching for a solution and have wasted a lot of time on it. Can someone please help me with this issue? <ion-content> <div> <ion-sear ...

iosangularcordovaionic4hybrid-mobile-app

Combining enum values to create a new data type

Exploring the implementation of type safety in a particular situation. Let’s consider the following: const enum Color { red = 'red', blue = 'blue', } const enum Shape { rectangle = 'rectangle', square = 'square ...

typescriptenumsunion-types

Unraveling the mystery of nested optional indexes in interfaces

Discover the interface outlined on this TS playground export type GetTestimonialsSectionQuery = { __typename?: 'Query', testimonialsSection?: { __typename?: 'TestimonialsSection', id: string, testimonials: Array< ...

typescript

Testing the derived class resulted in failure with the error message: "Unable to resolve all parameters for : (?, ?) in Angular 5."

Encountering an issue when trying to run Karma on a structure consisting of an abstract class, a derived class, and a test. The error message that is being thrown is: Failed: Can't resolve all parameters for ActivationsComponent: (?, ?). The abstrac ...

angularjasmineangular5karma-jasmine