invoking a JavaScript function from an NPM package within a TypeScript environment

Question

invoking a JavaScript function from an NPM package within a TypeScript environment

I recently integrated the library react-native-fingerprint-scanner into my React Native project that is running on TypeScript. However, I encountered an issue when trying to call a function from the library.

The project functions perfectly fine in JavaScript:

  componentDidMount() {
    FingerprintScanner
      .isSensorAvailable()
      .catch(error => this.setState({ errorMessage: error.message }));
  }

But when attempting to call it the same way,

componentDidMount

In the TypeScript project, I receive the following error message:

TypeError: FingerprintScanner.isSensorAvailable is not a function.(In 'FingerprintScanner.isSensorAvailable' is undefined)

Note that I had to import using

const FingerprintScanner = require('react-native-fingerprint-scanner');

As importing with

import { FingerprintScanner } from 'react-native-fingerprint-scanner';

Results in the error:

Could not find a declaration file for module 'react-native-fingerprint-scanner'

Any suggestions on how to make TypeScript recognize this function? Thanks!

javascript typescript react-native

Answer 1

Answer №1

When utilizing a library from npm that does not come with its own type definitions, the usual process involves obtaining them from DefinitelyTyped or creating them yourself. In the case of react-native-fingerprint-scanner, I noticed that there are no existing TypeScript definitions available. To incorporate this module into your project, you will need to generate a new file named custom.d.ts alongside your other TypeScript files:

declare module "react-native-fingerprint-scanner" {
  const data: any
  export default data
}

Following this step, remember to import it in the desired file:

import FingerPrintScanner from "react-native-fingerprint-scanner"

Now, you can successfully utilize the npm module. For stricter type checking, consider crafting your own typings within custom.d.ts. Refer to this guide on writing library declaration typings.

If you decide to create typings for this npm module, it is advisable to share them on DefinitelyTyped for others to benefit as well.

Answer 2

When utilizing a library from npm that does not come with its own type definitions, the usual process involves obtaining them from DefinitelyTyped or creating them yourself. In the case of react-native-fingerprint-scanner, I noticed that there are no existing TypeScript definitions available. To incorporate this module into your project, you will need to generate a new file named custom.d.ts alongside your other TypeScript files:

declare module "react-native-fingerprint-scanner" {
  const data: any
  export default data
}

Following this step, remember to import it in the desired file:

import FingerPrintScanner from "react-native-fingerprint-scanner"

Now, you can successfully utilize the npm module. For stricter type checking, consider crafting your own typings within custom.d.ts. Refer to this guide on writing library declaration typings.

If you decide to create typings for this npm module, it is advisable to share them on DefinitelyTyped for others to benefit as well.

Answer 3

Answer №2

For more information on TS Modules, please visit: https://www.typescriptlang.org/docs/handbook/modules.html

To use FingerprintScanner, you need to import it as follows:

import FingerprintScanner from 'react-native-fingerprint-scanner';

You can also refer to the fingerPrint documentation for a similar example:

import React, { Component, PropTypes } from 'react';
import { AlertIOS } from 'react-native';
import FingerprintScanner from 'react-native-fingerprint-scanner';

class FingerprintPopup extends Component {

  componentDidMount() {
    FingerprintScanner
      .authenticate({ description: 'Scan your fingerprint on the device scanner to continue' })
      .then(() => {
        this.props.handlePopupDismissed();
        AlertIOS.alert('Authenticated successfully');
      })
      .catch((error) => {
        this.props.handlePopupDismissed();
        AlertIOS.alert(error.message);
      });
  }

  render() {
    return false;
  }
}

FingerprintPopup.propTypes = {
  handlePopupDismissed: PropTypes.func.isRequired,
};

export default FingerprintPopup;

Answer 4

For more information on TS Modules, please visit: https://www.typescriptlang.org/docs/handbook/modules.html

To use FingerprintScanner, you need to import it as follows:

import FingerprintScanner from 'react-native-fingerprint-scanner';

You can also refer to the fingerPrint documentation for a similar example:

import React, { Component, PropTypes } from 'react';
import { AlertIOS } from 'react-native';
import FingerprintScanner from 'react-native-fingerprint-scanner';

class FingerprintPopup extends Component {

  componentDidMount() {
    FingerprintScanner
      .authenticate({ description: 'Scan your fingerprint on the device scanner to continue' })
      .then(() => {
        this.props.handlePopupDismissed();
        AlertIOS.alert('Authenticated successfully');
      })
      .catch((error) => {
        this.props.handlePopupDismissed();
        AlertIOS.alert(error.message);
      });
  }

  render() {
    return false;
  }
}

FingerprintPopup.propTypes = {
  handlePopupDismissed: PropTypes.func.isRequired,
};

export default FingerprintPopup;

invoking a JavaScript function from an NPM package within a TypeScript environment

Answer №1

Answer №2

Similar questions

Issues with retrieving data from nested nodes while parsing NOAA weather information using Javascript XML

Is the epoch date format not compatible with the ngx bootstrap datepicker?

Can you provide guidance on how to format index signatures for objects in TypeScript

Incorporate a new class into the slot's scope

JavaScript code to automatically navigate to the HomeScreen when an alert window is closed

Transferring PHP array data into JavaScript array values

Setting a default value for the dropdown in Angular is essential for ensuring a smooth

The HTML tags within the title of a JQuery UI Dialog modal are failing to display properly

How come it's so difficult to set the perspective camera to accurately display sizes in three js?

Here's a step-by-step guide on passing the value of an input field from JavaScript to a PHP file and retrieving the returned values

Modifying Three.js light intensity on the fly

Creating an array of nested components in React Native outside of the render() function: A step-by-step guide

Utilizing jQuery to hide a div when hovered over, but keeping it visible when clicked

Unable to retrieve rxjs resource

Combining Java with Ajax Frameworks

"A TypeError was not caught when attempting to operate on a null value

Tips for using a .map() function in conjunction with a promise

How can I retrieve the value of a promise in Promise.map?

Sharing a function between a Parent and Child component in Angular 2

What is the best way to change the name of a child object within a clone in three.js? (renaming child objects within clones)