勉強ノート:Typescriptについて③オプションの設定とclassの使用(Windows10)
①で作ったファイルにオプションの設定をしていく。以下のコマンドを打つ。
すると、tsconfig.json と言うファイルが生成されるので、中を開く。
たくさんのオプション設定がコメントアウトされているので、必要に応じて開く。
元々コメントアウトしてない次の行を見る。以下の行はコンパイルする時に、どのJavascriptのバージョンを使うかの設定。以下だと2016年版。
次にTypescriptではJavaのようにクラスが使えるので使ってみる。srcフォルダの下に、適当な名前のファイル( nantoka.ts )を作る。それを開き、次のように記述する。
1行目:defaultクラスとしてNantokaクラスを作成する。
2行目:ストリング型のメッセージを宣言。
4行目:コンストラクタとはクラスが呼ばれた時に最初に読み込まれる。
5行目:メッセージはここで指定されるメッセージであることの宣言。
8行目:nantokaTextメソッドを作る。引数はHTMLElement型のelem
9行目以降:もしnantokaメソッドが呼ばれた時に引数elemが存在するなら、innerTextと指定した所にここで指定されたメッセージをを表示する。
index.htmlにroot部分を指定する。
次にindex.ts を書く。
1行目:nantoka.tsをインポートする。
3行目:HTMLelement型の定数rootをindex.htmlのidがroot の所に書きだす。
5行目:nantoka を「from typescript」としてインスタンス化(オブジェクト化)。
6行目:インスタンス化されたので、その中のメソッドが使える。引数はroot。
次にroot に指定したメッセージが表示されるか確認する。
package.json を開いてstart でサーバーが動くように設定する。
7行目:start と打ち込むと、webpack serv でサーバーが立ち上がる。
8行目:webpackをバンドルする指定。
次にファイルをコンパイルする。
※見事にpackage.config.js のPATHの指定でエラーになった。
なので、下記のようにPATHの指定を書き換えた。
必要とするパス名を path と言う名前で取得
パスを リゾルバ (解決)に任せるので以下のように書く。
以上のように修正し、もう一度、 build する。
すると、無事に bundle.js が生成される。
index.html でbundle.js を読み込む。
localhost:8080で無事に表示される。
この記事が気に入ったらサポートをしてみませんか?