Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

Question

Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

I have a ReactNative app and I'm attempting to create a test using Jest. The test requires classes from a native component (react-native-nfc-manager), and one of the needed classes is defined as follows

  export interface TagEvent {
    ndefMessage: NdefRecord[];
    maxSize?: number;
    type?: string;
    techTypes?: string[];
    id?: number[];
  }

If I try to directly use this definition like

const event = new TagEvent();

I encounter this error

TypeError: _reactNativeNfcManager.default is not a constructor

Coming from the Java world, I understand that an interface cannot be instantiated, it requires a class. So, I created a test instance for this interface:

class TestTagEvent implements TagEvent {
    ndefMessage: NdefRecord[] = []
    maxSize?: number;
    type?: string;
    techTypes?: string[];
    id?: number[];
}

However, I faced a different issue as it also didn't work:

TypeError: _TestTagEvent.TestTagEvent is not a constructor

What am I overlooking?

javascript typescript react-native

Answer 1

Answer №1

An object cannot be directly created using an interface. Instead, an interface serves as a blueprint for defining the properties that need to be present in variables.

When initializing a variable with an interface, you should follow this syntax:

const eventVar: TagEvent;

If you intend to use TagEvent as a constructible object, it must be defined as a class rather than an interface. For example:

class TagEvent {
  constructor(props: TagEventProps) {
    this.ndefMesssage = props.nDefMessage;
    //etc...
  }
}

Answer 2

An object cannot be directly created using an interface. Instead, an interface serves as a blueprint for defining the properties that need to be present in variables.

When initializing a variable with an interface, you should follow this syntax:

const eventVar: TagEvent;

If you intend to use TagEvent as a constructible object, it must be defined as a class rather than an interface. For example:

class TagEvent {
  constructor(props: TagEventProps) {
    this.ndefMesssage = props.nDefMessage;
    //etc...
  }
}

Answer 3

Answer №2

Through additional experimentation, the issue was resolved by including the 'export' keyword in the class declaration. Surprisingly, the initial error description did not accurately pinpoint the underlying problem.

export class TestTagEvent implements TagEvent {

Answer 4

Through additional experimentation, the issue was resolved by including the 'export' keyword in the class declaration. Surprisingly, the initial error description did not accurately pinpoint the underlying problem.

export class TestTagEvent implements TagEvent {

Using 'interface' declarations from TypeScript is unsupported in JS for React Native testing purposes

Answer №1

Answer №2

Similar questions

Tips for incorporating Angular2 into Eclipse using TypeScript

Issue: Unable to retrieve the property "div" as the animated object is not defined

How can a HTML element be clicked in JQuery to copy it into a text area?

In tsconfig.json, the compiler is not utilizing other tsconfig.json files when using the "extends"

Ensure that the div remains within the viewport

The package 'models' imported from is not found [ERR_MODULE_NOT_FOUND] error

Attempting to adjust the width of a text animation loaded with jQuery using Textillate, but encountering difficulties

The JQuery signature does not include the necessary string context

Resolve CORS error when uploading images with AJAX and Node.js using FormData

Elevate the value within a function and refresh the said function

Typescript is throwing an error stating that the type 'Promise<void>' cannot be assigned to the type 'void | Destructor'

Utilizing JavaScript to manage sections within a dropdown menu

Firebase Admin refuses to initialize on a Next.js application that has been deployed on Firebase

Load data into data tables through AJAX request

Having difficulty aligning ListItem to the right within a List

What is a more precise way to define an Object type on a temporary basis?

Update the CAPTCHA, while also refreshing the entire registration form

Include token in src tag requests Angular version 8

Adding a value to an element in JavaScript to interact with it using Selenium

Creating an object type that accommodates the properties of all union type objects, while the values are intersections, involves a unique approach