calling a JS function of an NPM module in TypeScript

Question

I have a react native project running on typescript, is working fine, now I've added a library react-native-fingerprint-scanner from NPM, but I'm having problems calling a function?

So the project works fine on JS:

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

But if I call the same way

componentDidMount

On typeScript project, I get:

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

Note, I have to import with

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

because If I import with

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

I get this error:

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

So, how to get TS to recognize this function? cheers

Answer 1

Refer to TS Modules: https://www.typescriptlang.org/docs/handbook/modules.html

According to docs, you have to do that: import FingerprintScanner from 'react-native-fingerprint-scanner';

Also refer to fingerPrint doc, where you will find same 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 2

Normally if you want to use a library from npm, which does not provide its own type definitions, you need to either get it from DefinitelyTyped or write them yourself. Looking at the module name, I checked that there are no typescript definitions for react-native-fingerprint-scanner . If you want to use this module in your project, create a new custom.d.ts file along with your other typescript files as follows.

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

Now, you'll need to import it into the file that you want:

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

You'll be able to use the npm module now. If you want stricter typings, you can write your own typings in the module inside custom.d.ts. This will guide you to write library declaration typings.

If you do write the typings for this npm module, consider uploading them onto DefinitelyTyped.