TypeScript 中的 NDEFReader [英] NDEFReader in TypeScript

问题描述

我正在尝试在 React 中使用 NDEFReader() 进行 NFC 扫描/写入.此功能适用于 Chrome 81(您现在可以通过以下链接在 Chrome 测试版的手机上试用).

I'm trying to use NDEFReader() for NFC scan/write in React. This feature works from Chrome 81 (you can try it on your mobile in Chrome beta today on links below).

GoogleChromeNf>WhatWebCanDoTodayNfc

要启用此功能，您需要进入 chrome://flags/ 并启用Experimental Web Platform features.

To enable this feature, you need to go into chrome://flags/ and enable Experimental Web Platform features.

问题是我无法在 React 中完成这项工作.我将 create-react-app 与 TypeScript 和控制台输出一起使用:

The problem is that I can't make this work in React. I use create-react-app with TypeScript and console output:

找不到名称NDEFReader"

Cannot find name 'NDEFReader'

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

I think that this causes a webpack check. I already tried change some settings in tsconfig.json but nothing worked. Does anyone know, how to enable experimental js/ts compilation, to enable this feature?

推荐答案

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

Web NFC folks provide TypeScript definitions at https://github.com/w3c/web-nfc/blob/gh-pages/web-nfc.d.ts

// 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
}

这篇关于TypeScript 中的 NDEFReader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！