TypeScriptでボタンにイベントを追加したい

Question

はじめまして。

VisualStudioからTypeScriptのプロジェクトを新規作成

<div id="content"> <button style="width:100%;height:100px;" type="button" id="OnHenkanClick">変換</button> </div>

最初のcontentの中にボタンを作成

function HenkanClick() {
alert("ですね");
}

class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;
ele1: HTMLButtonElement;

constructor(element: HTMLElement) {
    this.element = element;
    this.ele1 = <HTMLButtonElement>document.getElementById("OnHenkanClick");

    this.ele1.onclick = <Event:MouseEvent> HenkanClick();

上記で
ev: MouseEvent) => any' に割り当てることはできません。
とビルド前にエラーが発生します。
TypeScriptのクラスのなどをまだ理解していません
どのように書けばいいのでしょうか？

追記
jsファイルの中を見てみました。

function HenkanClick() {
alert("ですね");
}
var Greeter = (function () {
function Greeter(element) {
this.element = element;
this.ele1 = document.getElementById("OnHenkanClick");
this.ele1.onclick = ;

あ、TypeScriptのクラスのnewをファンクションのnewに置き換えてるのか
この場合、onclickに正しく入力するにはどうかけばいいのかな

Answer 1

こんにちは。

this.ele1.onclick = <Event:MouseEvent> HenkanClick();
を
this.ele1.onclick = HenkanClick;としたらどうでしょう。

Comments

[TomoakiKurata]

お返事ありがとうございます！

実行時に　ですね！　と表示されてしまい。
ev: MouseEvent) => any' に割り当てることはできません。
ビルド前はエラーが表示されたままです。

[Tak1wa]

私のほうでは上記の対応でうまくいってます。
現在のtsファイルをもう少し提示して頂ければアドバイスできるかもしれません。

[TomoakiKurata]

Tak1wa様、わざわざ試していただいてありがとうございます！

function HenkanClick() {
alert("ですね");
}

class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;
ele1: HTMLButtonElement;

constructor(element: HTMLElement) {
this.element = element;
this.ele1 = <HTMLButtonElement>document.getElementById("OnHenkanClick");

this.ele1.onclick = HenkanClick();
this.element.innerHTML += "The time is: ";

this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();
}

}

window.onload = () => {
var el = document.getElementById('content');
var greeter = new Greeter(el);
};

全TSになります。

[Tak1wa]

HenkanClickの後の()は不要です。
私のTSをのせておきます。

class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;
ele1: HTMLButtonElement;

constructor(element: HTMLElement) {
this.element = element;
this.element.innerHTML += "The time is: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();

this.ele1 = <HTMLButtonElement>document.getElementById("OnHenkanClick");
this.ele1.onclick = HenkanClick;
}

start() {
this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}

stop() {
clearTimeout(this.timerToken);
}

}

window.onload = () => {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};

function HenkanClick() {
alert("ですね！");
}

[TomoakiKurata]

ありがとうございます！
動きました！
昨日から悩みっぱなしでした！