TypeScriptハンズオン

TypeScriptをインストールして使える状態にします。

npm install typescript -g

これで、TypeScriptがnpmのグローバル環境にインストールされます。インストールが完了したら、バージョン番号が表示されればきちんとインストールされています。

tsc --V

tsc sa

特にエラーもなトランスコンパイル成功です。
「sample.js」というファイルが作成されているはずです。

Node.jsというのは「node ファイル名」と実行することでJavaScriptのスクリプトを実行することができます。

WebページでJavaScriptを使う場合、HTMLファイル内に<script>タグを使って記述するやり方と別途スクリプトファイルを用意してそれを読み込む方法があります。TypeScriptで書けるのは「スクリプトファイルを別途用意する」という場合のみです。HTMLファイル内に記述されたスクリプトをトランスコンパイルすることはできません。

npmの設定ファイルを作成する

npm init -y

これを実行するとnpmのパッケージ情報を記述する「package.json」というファイルが生成されます。

TypeScriptをプロジェクトに組み込みます。

npm install typescript @types/node --save-dev

これでTypeScriptとNode.jsでTypeScriptを利用する際に必要となる@types/nodeというパッケージを追加

TypeScriptの設定ファイルを作成する

tsc --init

これでフォルダ内に「tsconfig.json」というファイルが作成されます。これがＴｙｐｅＳｃｒｉｐｔに関する設定情報のファイルです。

npm install webpack ts-loader @webpack-cli/generators

これはWebpack本体とTS Loaderというパッケージをインストールするものです。これでWebpackの機能が利用できるようになります。

npxというコマンドを使えば@webpack-cli/generatorsはインストールしなくても利用できます。

これでプロジェクトがWebpackように初期化されます。

srcフォルダに保管されたTypeScriptのファイルがビルドの際にトランスコンパイルされ、一つのJavaScriptファイルにまとめられて出力されるようになっています。

Webpackではデフォルトでmain.jsという名前のfileにスクリプトがまとめられます。

npm run build

これを実行するとプロジェクト内に「dist」というフォルダが作成され、そこにアプリケーションのファイル類が書き出されます。
ここでは「index.html」「main.js」というファイルが保存されている。

これら「dist」フォルダ内のファイルをWebサーバーにアップロードすればWebアプリとして公開できます。

このthisはオブジェクト自身を示す特別な値です。
同じオブジェクトの中にあるプロパティやメソッドを利用する場合はこのようにthis.〇〇という書き方を使います。

      console.log(this.name + '(' +this.age+ ')')

マップ型

キーも値もstringを指定したマップ型です。

type stringArray = { 
    [key in string] : string 
} 
const data1:stringArray = { 
    'start':'最初の値', 
    'middle':'中央の値', 
    'end':'最後の値' 
} 
data1['finish'] ='おしまい' 
data1[100] = 'ok' 
console.log(data1)

data1[100] = ‘ok’ではキーに100という数値を指定して値を保管していますが、console.logによる出力結果では’100’というようにテキストに変換されていることが分かります。