【TypeScript】htmlにTypeScriptを実装する方法。

TypeScript

2020.09.01

htmlにTypeScriptを実装する方法。
実際に行う処理
型の指定

htmlにTypeScriptを実装する方法。

TypeScriptを勉強し始めて2日目！！
ようやく全体像が見えつつありますが、まだ実践的なことができていませんでしたので今回の記事ではhtml内にTypeScriptを用いて何か文字を出力してみます。

とはいえ、正確に言うとTypeScriptをコンパイルしてjavascriptに変換したjsファイルを使ってhtmlに文字を表示させると言うのが正確な言い方ですね！！

実際に行う処理

①html、tsファイルを作成する
②tsファイルをコンパイルする
③htmlをブラウザで確認してみる

①html、tsファイルを作成する

簡単な作りでいいので下記のコードを同じフォルダに入れてください。

function TextOut() {
    var elem: any = document.getElementById("output");
    elem.innerHTML = "ようこそ TypeScriptの世界へ。";
}

<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script type="text/javascript" src="index.js"></script>
</head>
<body onload="TextOut();">
  <h1>テスト</h1>
  <div id="output"></div>
</body>
</html>

ここでhtmlをブラウザで開くと白紙のページです。

②tsファイルをコンパイルする

このtsファイルをコンパイルするとindex.jsが生成されます。

function TextOut() {
    var elem = document.getElementById("output");
    elem.innerHTML = "ようこそ TypeScriptの世界へ。";
}

③htmlをブラウザで確認してみる

これをブラウザで開いてみるとjsの表示がうまくいってます！

型の指定

ただこれではTypeScriptの良いところの型の指定ができていないですよね。

このコードのままだと型にanyを使っていますので要は型はなんでもいいとなってしまっています。そのため型を指定してよりTypeScriptっぽく記載してみましょう。

function TextOut() {
    var elem:HTMLElement= document.getElementById("output");
    elem.innerHTML = "ようこそ TypeScriptの世界へ。";
}

変数elemをhtmlのDOM要素であると型を決めました。しかしこれはエラーになります。
なぜならinterfaceを設定する必要があるからです。詳しくは下記の記事をご参照ください。

正確な型の指定の仕方は下記です。

function TextOut() {
    var elem= <HTMLElement>document.getElementById("output");
    elem.innerHTML = "ようこそ TypeScriptの世界へ。";
}

これでエラーなくコンパイルしてhtml要素に再表示できました。

ちなみにinterfaceは「command」+クリックで覗けます。

interfaceの説明に関してはコチラの記事をご参照ください。

今回は以上です。
早く何か開発できれば。。。