TypeScript 中的 NDEFReader

Posted 2023-03-14

【中文标题】TypeScript 中的 NDEFReader

【英文标题】：NDEFReader in TypeScript

【发布时间】：2020-03-09 08:26:52

【问题描述】：

我正在尝试在 React 中使用 NDEFReader() 进行 NFC 扫描/写入。 此功能适用于 Chrome 81（您可以通过以下链接在您的移动设备上试用 Chrome 测试版）。

GoogleChromeNfcSample, WhatWebCanDoTodayNfc

要启用此功能，您需要进入chrome://flags/ 并启用实验性网络平台功能。

问题是我无法在 React 中完成这项工作。我使用带有 TypeScript 和控制台输出的 create-react-app：

找不到名称“NDEFReader”

我认为这会导致 webpack 检查。我已经尝试更改 tsconfig.json 中的一些设置，但没有任何效果。有谁知道，如何启用实验性 js/ts 编译，以启用此功能？

【问题讨论】：

在 React 中找到可行的解决方案 --typescript: github.com/takefumi-yoshii/webnfc-media-memo Demo: webnfc-media-memo.netlify.com/text-reader

【参考方案1】：

Web NFC 人员在 https://github.com/w3c/web-nfc/blob/gh-pages/web-nfc.d.ts 提供 TypeScript 定义

// Type definitions for Web NFC
// Project: https://github.com/w3c/web-nfc
// Definitions by: Takefumi Yoshii <https://github.com/takefumi-yoshii>
// TypeScript Version: 3.9

// This type definitions referenced to WebIDL.
// https://w3c.github.io/web-nfc/#actual-idl-index

interface Window 
  NDEFMessage: NDEFMessage

declare class NDEFMessage 
  constructor(messageInit: NDEFMessageInit)
  records: ReadonlyArray<NDEFRecord>

declare interface NDEFMessageInit 
  records: NDEFRecordInit[]


declare type NDEFRecordDataSource = string | BufferSource | NDEFMessageInit

interface Window 
  NDEFRecord: NDEFRecord

declare class NDEFRecord 
  constructor(recordInit: NDEFRecordInit)
  readonly recordType: string
  readonly mediaType?: string
  readonly id?: string
  readonly data?: DataView
  readonly encoding?: string
  readonly lang?: string
  toRecords?: () => NDEFRecord[]

declare interface NDEFRecordInit 
  recordType: string
  mediaType?: string
  id?: string
  encoding?: string
  lang?: string
  data?: NDEFRecordDataSource


declare type NDEFMessageSource = string | BufferSource | NDEFMessageInit

interface Window 
  NDEFReader: NDEFReader

declare class NDEFReader extends EventTarget 
  constructor()
  onreading: (this: this, event: NDEFReadingEvent) => any
  onreadingerror: (this: this, error: Event) => any
  scan: (options?: NDEFScanOptions) => Promise<void>
  write: (
    message: NDEFMessageSource,
    options?: NDEFWriteOptions
  ) => Promise<void>


interface Window 
  NDEFReadingEvent: NDEFReadingEvent

declare class NDEFReadingEvent extends Event 
  constructor(type: string, readingEventInitDict: NDEFReadingEventInit)
  serialNumber: string
  message: NDEFMessage

interface NDEFReadingEventInit extends EventInit 
  serialNumber?: string
  message: NDEFMessageInit


interface NDEFWriteOptions 
  overwrite?: boolean
  signal?: AbortSignal

interface NDEFScanOptions 
  signal: AbortSignal

【参考方案2】：

这与 Webpack 检查或您的 tsconfig 或“实验性 javascript”无关。

只是 NDEFReader() 没有可用的类型，所以 TypeScript 认为你有错字。

您可以在源代码树中使用类似extra-globals.d.ts 的文件（名称无关紧要，只要它是.d.ts）存根NDEFReader 的类型。这基本上告诉 TypeScript 全局 Window 接口有一个额外的字段，NDEFReader，你并不真正知道它的类型：

declare global 
  interface Window 
    NDEFReader: any;
  


export ;