Question

我有一个运行在打字稿上的本机项目，工作正常，现在我已经添加了一个库 react-native-fingerprint-scanner 来自NPM，但我在调用函数时遇到了问题？

因此该项目在JS上运行良好：

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

但如果我以同样的方式打电话

componentDidMount

在typeScript项目中，我得到：

TypeError：FingerprintScanner.isSensorAvailable不是一个函数。（在＆＃39; FingerprintScanner.isSensorAvailable＆＃39;未定义）

注意，我必须用

导入

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

因为如果我用

导入

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

我收到此错误：

无法找到模块＆＃39; react-native-fingerprint-scanner＆＃39;
的声明文件

那么，如何让TS识别这个功能呢？欢呼声

Answer 1

参考TS模块： https://www.typescriptlang.org/docs/handbook/modules.html

根据文档，您必须这样做： import FingerprintScanner from 'react-native-fingerprint-scanner';

另请参阅fingerPrint doc，您将在其中找到相同的示例：

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

通常，如果你想使用npm中的库，它不提供自己的类型定义，你需要从DefinitelyTyped获取它或者自己编写它们。查看模块名称，我检查了react-native-fingerprint-scanner没有打字稿定义。如果要在项目中使用此模块，请创建一个新的custom.d.ts文件以及其他打字稿文件，如下所示。

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

现在，您需要将其导入到您想要的文件中：

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

您现在可以使用npm模块了。如果你想要更严格的打字，你可以在custom.d.ts中的模块中编写自己的打字。 This将指导您编写库声明类型。

如果您确实为此npm模块编写了类型，请考虑将它们上传到DefinitelyTyped。

在TypeScript中调用NPM模块的JS函数

2 个答案: