Ionic 3中Touch ID插件无法正常使用，代码报错求助

嘿，这个问题一眼就能看出来啦——你把Touch ID的调用代码直接写在了类的顶层作用域里，这不符合TypeScript的类语法规范，所以才会触发那个Unexpected token的错误！

错误原因 #

在TypeScript/Angular的类中，只有属性声明、构造函数、方法、访问器能直接写在类的层级下，不能直接放置可执行的代码语句。你现在把this.touchId.isAvailable()和verifyFingerprint的调用直接放在了构造函数外面，属于类的顶层代码，TypeScript编译器会判定这是非法语法。

修正后的代码 #

你需要把这些调用逻辑放到类的方法内部，比如构造函数里，或者更推荐的ngOnInit生命周期钩子中（初始化逻辑放在这里更符合Angular的最佳实践）：

方案1：放到构造函数中

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TouchID } from '@ionic-native/touch-id';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  constructor(public navCtrl: NavController, private touchId:TouchID) {
    // 将Touch ID调用移到构造函数内部
    this.touchId.isAvailable()
      .then(
        res => console.log('TouchID is available!'),
        err => console.error('TouchID is not available', err)
      );

    this.touchId.verifyFingerprint('Scan your fingerprint please')
      .then(
        res => console.log('Ok', res),
        err => console.error('Error', err)
      );
  }
}

方案2：使用ngOnInit生命周期钩子（推荐）

import { Component, OnInit } from '@angular/core'; // 别忘了导入OnInit接口
import { NavController } from 'ionic-angular';
import { TouchID } from '@ionic-native/touch-id';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage implements OnInit { // 实现OnInit接口

  constructor(public navCtrl: NavController, private touchId:TouchID) {
    // 构造函数只用于依赖注入，初始化逻辑放在ngOnInit更合适
  }

  ngOnInit() {
    // 在这里执行Touch ID的检查和验证
    this.touchId.isAvailable()
      .then(
        res => console.log('TouchID is available!'),
        err => console.error('TouchID is not available', err)
      );

    this.touchId.verifyFingerprint('Scan your fingerprint please')
      .then(
        res => console.log('Ok', res),
        err => console.error('Error', err)
      );
  }
}

额外提示 #

别忘了Ionic Native的Touch ID插件需要在真实设备或者支持Touch ID的模拟器上运行，浏览器环境下无法调用原生的指纹识别API，测试时要注意这一点哦！

内容的提问来源于stack exchange，提问作者cnak2