69

Visual StudioのデフォルトのTypeScript HTMLアプリで、追加しました 

HTMLElement

window.onload イベント ハンドラーの 1 行目に、"el" の型を指定できると考えました。

したがって：

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

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

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

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

}

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

エラーが発生する

コンパイル エラー。詳細については、エラー リストを参照してください .../app.ts (25,17): 期待される ';'

理由はありますか？明らかな何かが欠けていると思います。

4

5 に答える 5

85

タイプはオプションであるため、TypeScript では名前の後にタイプが続きます。

だからあなたの行：

HTMLElement el = document.getElementById('content');

次のように変更する必要があります。

const el: HTMLElement = document.getElementById('content');

2013 年には、型HTMLElementは の戻り値から推測されていましたがgetElementById、これは厳密な null チェックを使用していない場合でも当てはまります(ただし、TypeScript で厳密モードを使用する必要があります)。厳密な null チェックを実施している場合、 の戻り値の型がgetElementByIdhas からHTMLElementに変更されていることがわかりますHTMLElement | null。常に要素が見つかるとは限らないため、この変更により型がより正確になります。

そのため、型モードを使用する場合、要素を見つけたことを確認するために型アサーションを使用するようにコンパイラによって推奨されます。このような：

const el: HTMLElement | null = document.getElementById('content');

if (el) {
  const definitelyAnElement: HTMLElement = el;
}

コードを実行するとどうなるかを示すために、型を含めました。興味深い点は、 null になる可能性を排除したため、ステートメント内のel型がより狭いことです。HTMLElementif

型注釈なしで、同じ結果の型でまったく同じことを行うことができます。それらはコンパイラによって推論されるため、余分な入力がすべて節約されます。

const el = document.getElementById('content');

if (el) {
  const definitelyAnElement = el;
}
于 2013-02-07T02:25:51.683 に答える
17

わかりました: 変な構文です!

var el: HTMLElement = document.getElementById('content');

問題を修正します。そもそもなぜ例がこれをしなかったのだろうか？

完全なコード:

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

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

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

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

}

window.onload = () => {
    var el: HTMLElement = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};
于 2013-02-07T01:56:24.773 に答える
6

JavaScript では、キーワード var、let、または function を使用して、変数または関数を宣言します。TypeScript クラスでは、これらのキーワードの後に​​コロンとそのクラス メンバーの型またはインターフェイスを付けずに、クラス メンバーまたはメソッドを宣言します。

これは単なる構文糖衣であり、次の違いはありません。

var el: HTMLElement = document.getElementById('content');

と：

var el = document.getElementById('content');

一方、型を指定するため、HTMLElement オブジェクトのすべての情報を取得できます。

于 2016-06-08T15:44:04.780 に答える