勉強ノート：Typescriptについて③オプションの設定とclassの使用(Windows10)

①で作ったファイルにオプションの設定をしていく。以下のコマンドを打つ。

すると、tsconfig.json と言うファイルが生成されるので、中を開く。
たくさんのオプション設定がコメントアウトされているので、必要に応じて開く。

元々コメントアウトしてない次の行を見る。以下の行はコンパイルする時に、どのJavascriptのバージョンを使うかの設定。以下だと2016年版。

次にTypescriptではJavaのようにクラスが使えるので使ってみる。srcフォルダの下に、適当な名前のファイル（ nantoka.ts ）を作る。それを開き、次のように記述する。

１行目：defaultクラスとしてNantokaクラスを作成する。
２行目：ストリング型のメッセージを宣言。

４行目：コンストラクタとはクラスが呼ばれた時に最初に読み込まれる。
５行目：メッセージはここで指定されるメッセージであることの宣言。

８行目：nantokaTextメソッドを作る。引数はHTMLElement型のelem
９行目以降：もしnantokaメソッドが呼ばれた時に引数elemが存在するなら、innerTextと指定した所にここで指定されたメッセージをを表示する。

index.htmlにroot部分を指定する。

<div>タグでrootを指定している

次にindex.ts を書く。

１行目：nantoka.tsをインポートする。
３行目：HTMLelement型の定数rootをindex.htmlのidがroot の所に書きだす。
５行目：nantoka を「from typescript」としてインスタンス化（オブジェクト化）。
６行目：インスタンス化されたので、その中のメソッドが使える。引数はroot。

次にroot に指定したメッセージが表示されるか確認する。

package.json を開いてstart でサーバーが動くように設定する。

７行目：start と打ち込むと、webpack serv でサーバーが立ち上がる。
８行目：webpackをバンドルする指定。

次にファイルをコンパイルする。

※見事にpackage.config.js のPATHの指定でエラーになった。

↑PATHの部分でエラー

なので、下記のようにPATHの指定を書き換えた。

↑１行目に加筆、８行目を修正

必要とするパス名を path と言う名前で取得

パスを リゾルバ （解決）に任せるので以下のように書く。

以上のように修正し、もう一度、 build する。

すると、無事に bundle.js が生成される。

index.html でbundle.js を読み込む。

index.html

localhost:8080で無事に表示される。