錯誤 TS2339：“導航器”類型上不存在屬性“剪貼板”

Question

我在我的項目中遇到這個錯誤，我正在更新 - 他們想將數據復制到剪貼板。 自定義數據，我可以很容易地放在一起

錯誤 TS2339：“導航器”類型上不存在屬性“剪貼板”

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
    }

鍵入時，建議顯示剪貼板和寫入文本，但在保存/編譯時不接受。

在剪貼板上單擊 F12（轉到 Defenition）時，我得到 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;
....

當我導航到剪貼板 class 時，我看到了我所期望的 - 讀取和寫入功能。

我半天都在閱讀這個問題，我沒有想法。

你們有什么想法嗎？

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

你應該試試：

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

代替：

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