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");
