簡単なカウンターアプリを作ってみよう。
プロジェクトのセットアップ
準備として、今回はデスクトップにnew-folderフォルダを作成しました。
npmプロジェクトの初期化
コマンドよりnpmプロジェクトを初期化します。これにより、package.jsonファイルが作成されます。
npm init -yTypeScriptをプロジェクトに追加
プロジェクトにTypeScriptをローカルインストールします。これにより、package-lock.jsonファイルが作成されます。
npm install typescript --save-dev4. TypeScriptコンパイラの設定
tsconfig.jsonファイルを作成して、TypeScriptコンパイラの設定を行います。
npx tsc --initこれにより、基本的な設定が含まれたtsconfig.jsonファイルが生成されます。このファイルを編集して、プロジェクトに適した設定を行います。
準備が整ったところで、まずはhtmlを作ってみます。index.html
まずはhtmlです。
続いてCSSです。
html、CSSまでの実装結果はこのような感じです。
distフォルダを作成してapp.tsのTypeScriptファイルを作成します。
解説
document: 現在のHTMLドキュメント全体を表します。
addEventListener: 特定のイベントが発生したときに呼び出される関数（イベントリスナー）を登録するためのメソッドです。"DOMContentLoaded": このイベントは、HTMLドキュメントの完全な読み込みと解析が終わったときに発生します。
() => { ... }: イベントが発生したときに実行される関数（アロー関数）です。この関数は DOMContentLoaded イベントが発生すると呼び出されます。
let count: number = 0;
let:で変数を宣言して、変数の名前はcount:としています。: number: 変数の型を指定しています。ここでは、count変数が数値型（number）であることを示しています。TypeScriptでは型を明示的に指定することで、型安全性を高めることができます。= 0: 変数countを0で初期化しています。この初期化により、カウントがゼロから始まることが保証されます。
HTML要素を取得
const counterElement = document.getElementById("counter")!;
const incrementButton = document.getElementById("incrementButton")!;
getElementById メソッドを使って、HTML内のカウントを表示する <p> 要素と、クリックイベントを検知する <button> 要素を取得します。 ! は、これらの要素が null でないことをTypeScriptに対して保証しています。
ボタンにクリックイベントを追加
incrementButton.addEventListener("click", () => {
// カウントを増やす
count++;
// カウンターの表示を更新
counterElement.textContent = count.toString();
});
incrementButton 要素に click イベントリスナーを追加します。ボタンがクリックされると、カウントをインクリメントし、counterElement のテキストコンテンツを更新します。
count は number 型の変数です。HTML要素の textContent プロパティには文字列（string 型）を割り当てる必要があります。number 型をそのまま textContent に代入しようとすると、型の不一致が生じます。
toString() メソッド
toString() は、JavaScriptおよびTypeScriptのすべてのオブジェクトに対して利用可能なメソッドで、オブジェクトを文字列に変換します。数値（number 型）に対して toString() メソッドを使用すると、その数値を文字列に変換できます。
TypeScriptのコンパイル
TypeScriptファイルをJavaScriptにコンパイルします。
npx tscこれにより、dist フォルダーに app.js ファイルが生成されます。
アプリの実行
ブラウザで index.html ファイルを開くと、カウンターアプリが表示されます。ボタンをクリックするとカウントが増えることを確認してください。
