TypeScript環境設定(windows)

TypeScript環境設定(windows)

TypeScript環境構築について記載していきます。是非覗いていってください(^^)v

Windows11+VSCodeエディターを使ってTypeScript環境を構築しました。
※コードを書くのもVSCodeエディターを使っています。

私自身が次回設定する際のメモとして、記載した内容なので、私が分かればというゆる~い内容です。

もし、分かりにくかったら、ほかの人もTypeScriptの環境設定記事は公開してますので、お願いします。

早速始めます(^^)v

目次

まずはNodeインストールします

こちらの記事公開時の推奨版の最新は「16.15.0」です。インストールのタイミングでのバージョンをご使用ください。
※推奨版=安定稼働版ということになりますのでおすすめです。

Node.js推奨版を①ダウンロード後、②インストールします

インストーラを起動すると下記が表示されますので「Next」ボタンをクリックします

以下、順にインストールを進めます









「Install」ボタンをクリックします




下記が表示されたらインストールは無事に完了です。

コマンドプロンプトで確認してみましょう。

Nodeのバージョンを確認します。

ついでにNPMのバージョンも確認します。


Nodeバージョン:16.15.0
npmバージョン:8.5.5
※バージョンは定期的に更新されますので、インストール時点での最新(推奨版)で進めてください

つづいて、TypeScript本体をPCにインストールする

コマンドプロンプトからTypeScriptをインストールします

コマンドプロンプトでTypeScriptのバージョンを確認してみましょう。


バージョン:4.6.4と表示されました。正常にインストールが完了しています。

それでは、プロジェクト環境にTypeScriptを設定する(新プロジェクト最初に行う)

ここからはVSCode(Visual Studio Code)を使って設定を進めます

ご自身が開発でお使いのフォルダを開いてください

ここでは、「MyProjects」フォルダで作業を進めます。

「MyProjects」フォルダの直下に「ts-basic」フォルダを作成します



つづいて、ターミナルを開きます

「MyProjects」フォルダから作業フォルダ(ここでは「ts-basic」)に移動します。

フォルダ移動(例)
「cd ts-basic」もしくは「cd D:\Web制作\MyProjects\ts-basic」

初期化を行います。

↓npmのパッケージ情報を記述するpackage.jsonというファイルが作成されました

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

typescript … typescriptからJavascriptに変換するためのもの
ts-loader … webpack 経由で .ts ファイルをトランスパイルする
webpack … webpack 本体。複数のファイルを一つにバンドルする
webpack-cli … webpack のコマンドラインツール
webpack-dev-server … 開発用のwebサーバー

↓node_module一式とpackage-lock.jsonが作成されました

webpackの設定ファイルを作成します。

「webpack.config.js」という名称でファイルを作成します。


package.jsonを環境に合わせた設定を行う

※先ほどインストールした関連パッケージも追加されていますね

mode development:コードの圧縮行わない、–mode production:コードの圧縮行う

TypeScript設定ファイルを作成します。


↓「tsconfig.json」という名称でファイルを作成されます。

ここまでで、開発環境の作成は完了です。

おつかれさまでした。

まとめ

WindowsでTypeScriptの開発環境作成と最低限の設定を完了しました。

私自身のメモとして書き留めたため、分かりにくい記述等があったかも知れませんが、他のサイトを検索するなどして解決お願いします。

一応、TypeScriptの開発構築が完了したということで、「Hello World」をブラウザに表示するような簡単なスクリプトを作って動作を確認してみてください。

下記が、「スクリプトとブラウザ表示を連動させるコマンド」と「ビルドして、実際のJSファイルを作成する」コマンドです。

npm start
npm run build

最後までご覧いただきましてありがとうございました(^^)/


関連記事

MacでWindowsの共有フォルダを使用

設定は簡単!!Macbook AirとWindowsでフォルダを共有して使おう!!WindowsPCにフォルダを作って、そこをMacPCから[...]

記事を読む

python(パイソン)3.11.1 のインストール手順(画像付き)

pythonをWindows11にインストールして実際にVSCodeエディターで使用するところまでの画像付きメモです。pythonのバージョ[...]

記事を読む

JavaScriptとSCSSそれぞれを別ファイルにコンパイルする方法

Html、JavaScriptとSCSSを使ってWebサイト制作を行っている人へ。webpackでjsをバンドルするとき、SCSS(CSS)[...]

記事を読む