error TS2339: Property 'clipboard' does not exist on type 'Navigator'

Question

I get this error in my project, that I am updating - they want to copy data to the clipboard. Custom data, that I can easily put together

error TS2339: Property 'clipboard' does not exist on type '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
    }

When typing, the suggestions shows the clipboard and writetext, but when saving/compiling it does not accept it.

When clicking F12 (go to Defenition) on the clipboard I get 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;
....

And when I navigate into the Clipboard class I see what I expect - read and write functions.

I have been reading about this issue half of the day, I am out of ideas.

Any ideas from you guys?

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"
  ]
}

Answer 1

You should try:

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

Instead of:

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