NDEFReader in TypeScript

Question

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).

GoogleChromeNfcSample, WhatWebCanDoTodayNfc

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

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

Cannot find name 'NDEFReader'

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?

Answer 1

This isn't about Webpack checks or your tsconfig, or "experimental JavaScript".

It's just that there are no types for NDEFReader() available, so TypeScript thinks you have a typo.

You can stub in a type for NDEFReader with a file like extra-globals.d.ts (the name doesn't matter so long as it's a .d.ts) in your source tree. This basically tells TypeScript that the global Window interface has one extra field, NDEFReader, whose type you don't really know:

declare global {
  interface Window {
    NDEFReader: any;
  }
}

export {};

Answer 2

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
}