TypeScript 学習 part10

こちらの本でTypeScriptの学習を進めています。

前回は、本書のchapter3が完成しましたので、今回は、chapter4の「ブラウザで動くアプリケーションを作ってみよう」に入っていきました。

コミット履歴はこちら

chapter4で作るアプリ

chapter4で作るアプリは、ブラウザで動くTO DOアプリです。

ブラウザで動くアプリの留意点

アプリの規模が大きい場合は、ソースコードの見通しが悪くなるため、ファイルを分割する(モジュール)必要があります。

今回行ったこと

最終的に、コンソールに3と表示されるようにするために、サンプルファイルを用意して、webpackによって、typescriptをHTMLから呼び出せるようにしました。

最終的なブラウザのコンソール画面

サンプルファイルの用意

sum.tsとindex.tsの2つのファイルと、index.html、package.jsonを用意しました。

sum.ts

sum.tsでは、足し算の関数sumをexportしています。

export const sum = (a: number, b: number) => a + b

index.ts

index.tsでは、sumをimportして、1と2を引数に渡したものをコンソールに表示するという記述をしています。

import { sum } from './sum'

console.log(sum(1, 2)) 

package.json

package.jsonは、以下のコマンドで生成されました。

npm init -y

typescriptをHTMLから呼び出せるように

パッケージのインストール

下記のコマンドを実行して5つのパッケージをインストールしました。

npm install --save-dev webpack@5.50.0 webpack-cli@4.7.2 typescript@4.3.5 ts-loader@9.2.5 serve@12.0.0

webpackの設定ファイルの作成

webpack.config.jsというファイルを作成しました。

const { resolve } = require('path')

module.exports = {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: resolve(__dirname, 'ts/index.ts'),
    output: {
        filename: 'index.js',
        path: resolve(__dirname, 'dist'),
    },
    resolve: {
        extentions: ['.ts', '.js'],
    },
    module: {
        rules: [
            {
            test: /\.ts/,
            use: {
                loader: 'ts-loader',
                },
            },
        ],
    }
} 

TypesSriptの設定ファイルの作成

tsconfig.jsonというファイルを作成しました。

{
    "compilerOptions": {
        "sourceMap": true
    }
} 

package.jsonの編集

 "scripts": {
   // 省略
    "build": "webpack",
    "serve": "serve ./ -p 3000"
   // 省略
 },

動作確認

npm run buildで、tsのコードをjsに変換しました。

そして、npm run serveでローカルサーバーを起動し、ブラウザのアドレスバーにhttp://localhost:3000を打ち込み、動作確認を行いました。

次回

次回は、今回作成するTO DOアプリの見た目を準備できたらと思います。