Búsqueda de sitios web

reactjs - error TS2339: La propiedad 'clipboard' no existe en el tipo 'Navigator'


Obtengo este error en mi proyecto, que estoy actualizando: quieren copiar datos al portapapeles. Datos personalizados, que puedo juntar fácilmente

error TS2339: La propiedad 'clipboard' no existe en el tipo 'Navigator'

import * as React from 'react';
import Loading from './Loading';
import axios from 'axios';
import { AppConfig } from '../../Config';
import 'jquery-ui-bundle';
// import 'jquery-ui-bundle/jquery-ui.css';
import '../helpers/datepicker-skins/jquery-ui-1.10.1.css';
import '../helpers/datepicker-skins/cangas.datepicker.css';

class Log extends React.Component<any, any> {
    validationCheck(): any {}

    constructor(props: any) {
        super(props);
        this.state = { FaultyUnits: [], FaultyUnitsPackages: [] };
    }
...
    public CopyEmailAddresses(event: any): void {
        navigator.clipboard.writeText("this.state.textToCopy");  <---- error on this line
    }

Al escribir, las sugerencias muestran el portapapeles y writetext, pero al guardar/compilar no lo acepta.

Al hacer clic en F12 (ir a Definición) en el portapapeles, obtengo lib.dom.d.ts:

....
/** The state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. */
interface Navigator extends NavigatorAutomationInformation, NavigatorConcurrentHardware, NavigatorContentUtils, NavigatorCookies, NavigatorID, NavigatorLanguage, NavigatorNetworkInformation, NavigatorOnLine, NavigatorPlugins, NavigatorStorage {
    /** Available only in secure contexts. */
    readonly clipboard: Clipboard;
    /** Available only in secure contexts. */
    readonly credentials: CredentialsContainer;
    readonly doNotTrack: string | null;
....

Y cuando navego a la clase Portapapeles veo lo que espero: funciones de lectura y escritura.

He estado leyendo sobre este problema la mitad del día, me he quedado sin ideas.

¿Alguna idea de ustedes?

tsconfig.json:

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "include": [
    "./**/*"
  ],
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "src/**/*.ts",
    "src/*.ts",
    "config"
  ]
}

Respuesta #1

Deberías probar:

window.navigator['clipboard'].writeText("this.state.textToCopy");

En lugar de:

navigator.clipboard.writeText("this.state.textToCopy");

Artículos relacionados