Using clipboardData in TypeScript

Question

I'm trying to access data from the clipboard in TS1.6 using the following:

$(container).bind("paste", (e) => {
    var data = e.originalEvent.clipboardData.getData('text');
});

But it just gives me the following build error:

Property 'clipboardData' does not exist on type 'JQueryEventObject'

If I remove the 2nd line and debug it in Chrome 46, I can get at the clipboard data just by calling

e.originalEvent.clipboardData.getData('text');

I can't see clipboardData in the JQueryEventObject interface in the latest version of jQuery.d.ts but the question is - should it be there or is there a different way of retrieving data from the clipboard that TS currently supports?

Possible duplicate of [JavaScript get clipboard data on paste event (Cross browser)](http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser) — Marcos Pérez Gude, Dec 03 '15 at 09:15
Since Typescript 1.5 Property clipboardData has been removed from type Window. https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes. — danywalls, Dec 03 '15 at 09:18
It also looks like ClipboardEvent is being introduced in 1.8 so may just have to wait for that. https://github.com/Microsoft/TypeScript/issues/5363 — CatBusStop, Dec 03 '15 at 09:42

score 13 · Answer 1 · answered Nov 29 '19 at 14:36

13

Use ClipboardEvent type (e.g.)

private onPaste(event: ClipboardEvent) {
    const {clipboardData} = event;
    const pastedText = clipboardData.getData('text');
}

answered Nov 29 '19 at 14:36

Ekaterina Tokareva

813
11
11

score 9 · Answer 2 · answered Apr 04 '17 at 20:20

9

You can bypass the expected typescript type using the ["property"] approach

 var pastedData = e.originalEvent["clipboardData"].getData('text');

answered Apr 04 '17 at 20:20

bartburkhardt

7,498
1
18
14

score 7 · Accepted Answer · answered Dec 03 '15 at 10:23

7

It seems until TS1.8, one (hacky) option I have found is to just extend Event with this:

interface Event {
    clipboardData: any;
}

I'm sure I could improve this by replacing any with something better, but it works for now.

answered Dec 03 '15 at 10:23

CatBusStop

3,347
7
42
54

3

For other folks also stuck on pre-1.8 in some project: it's `clipboardData?: DataTransfer`. – Josh May 20 '16 at 15:56

score 2 · Answer 4 · answered Jun 11 '17 at 00:22

2

Cast Event to ClipboardEvent like this:

element.bind('paste', (event: Event) => {
    let clipboardEvent: ClipboardEvent = <ClipboardEvent> event;
});

answered Jun 11 '17 at 00:22

KimchiMan

4,836
6
35
41

1

I think it is need convert the original event: event.originalEvent I you find it right - please edit your answer. – user5260143 Aug 23 '18 at 08:56

Using clipboardData in TypeScript

4 Answers4