![見出し画像](https://assets.st-note.com/production/uploads/images/92702515/rectangle_large_type_2_6834ebbedaed42d003135d8126bc7df6.png?width=800)
勉強ノート:Typescriptについて③オプションの設定とclassの使用(Windows10)
①で作ったファイルにオプションの設定をしていく。以下のコマンドを打つ。
![](https://assets.st-note.com/img/1670205152932-GzU9F0PR0h.png)
すると、tsconfig.json と言うファイルが生成されるので、中を開く。
たくさんのオプション設定がコメントアウトされているので、必要に応じて開く。
元々コメントアウトしてない次の行を見る。以下の行はコンパイルする時に、どのJavascriptのバージョンを使うかの設定。以下だと2016年版。
![](https://assets.st-note.com/img/1670205475295-HKwDw9Sp25.png)
次にTypescriptではJavaのようにクラスが使えるので使ってみる。srcフォルダの下に、適当な名前のファイル( nantoka.ts )を作る。それを開き、次のように記述する。
![](https://assets.st-note.com/img/1670213991046-qWmiwUQPjS.png?width=800)
![](https://assets.st-note.com/img/1670214182267-A9uRioWsXU.png)
1行目:defaultクラスとしてNantokaクラスを作成する。
2行目:ストリング型のメッセージを宣言。
![](https://assets.st-note.com/img/1670214478860-eRtXtFfRXP.png?width=800)
4行目:コンストラクタとはクラスが呼ばれた時に最初に読み込まれる。
5行目:メッセージはここで指定されるメッセージであることの宣言。
![](https://assets.st-note.com/img/1670214677512-6ln5zndhcO.png?width=800)
8行目:nantokaTextメソッドを作る。引数はHTMLElement型のelem
9行目以降:もしnantokaメソッドが呼ばれた時に引数elemが存在するなら、innerTextと指定した所にここで指定されたメッセージをを表示する。
index.htmlにroot部分を指定する。
![](https://assets.st-note.com/img/1670215594037-ndE2sBulzU.png?width=800)
次にindex.ts を書く。
![](https://assets.st-note.com/img/1670215809203-g3tJcmZwkL.png?width=800)
1行目:nantoka.tsをインポートする。
3行目:HTMLelement型の定数rootをindex.htmlのidがroot の所に書きだす。
5行目:nantoka を「from typescript」としてインスタンス化(オブジェクト化)。
6行目:インスタンス化されたので、その中のメソッドが使える。引数はroot。
次にroot に指定したメッセージが表示されるか確認する。
package.json を開いてstart でサーバーが動くように設定する。
![](https://assets.st-note.com/img/1670216693639-7qFKXvfBJe.png)
7行目:start と打ち込むと、webpack serv でサーバーが立ち上がる。
8行目:webpackをバンドルする指定。
次にファイルをコンパイルする。
![](https://assets.st-note.com/img/1670216973054-rHWUlG6EHV.png)
※見事にpackage.config.js のPATHの指定でエラーになった。
![](https://assets.st-note.com/img/1670226171023-eblMphAALr.png)
なので、下記のようにPATHの指定を書き換えた。
![](https://assets.st-note.com/img/1670226701716-KjvCpL3KDP.png)
必要とするパス名を path と言う名前で取得
![](https://assets.st-note.com/img/1670226836040-vIk6F3Lwix.png)
パスを リゾルバ (解決)に任せるので以下のように書く。
![](https://assets.st-note.com/img/1670227107296-lSnQG6CDDN.png)
以上のように修正し、もう一度、 build する。
![](https://assets.st-note.com/img/1670227310563-IRmybXk4n8.png)
すると、無事に bundle.js が生成される。
![](https://assets.st-note.com/img/1670227610294-FgDAxJvJeO.png)
index.html でbundle.js を読み込む。
![](https://assets.st-note.com/img/1670229702815-Gc4zLovj5O.png)
localhost:8080で無事に表示される。
![](https://assets.st-note.com/img/1670230322826-s3PfYPFiDN.png)
この記事が気に入ったらサポートをしてみませんか?