在 typescript 下原生 copy 到剪贴板

需求

最近在做一个组件库的文档页（react + typescript），要把代码copy到剪贴板，内容直接从 state 中就能拿到。很简单的需求，没必要用 clipboard.js 这种库。

实现

window.clipboardData

本来最简单这个：

window.clipboardData.setData("Text", txt);

但在ts下是通不过类型检测的。

类型“Window & typeof globalThis”上不存在属性“clipboardData”。ts(2339)

event

另外一种方式，通过copy事件做

onClick={() => {
    document.addEventListener('copy', e => {
        e.clipboardData.setData('text/plain', code);
        e.preventDefault();
        document.removeEventListener('copy');
    });
    document.execCommand('copy');
}

在ts下，我们需要进行改造

const handleCopy = (e: ClipboardEvent) => {
    // clipboardData 可能是 null
    e.clipboardData && e.clipboardData.setData('text/plain', code);
    e.preventDefault();
    // removeEventListener 要传入第二个参数
    document.removeEventListener('copy', handleCopy);
};

onClick={() => {
    document.addEventListener('copy', handleCopy);
    document.execCommand('copy');
}