typescript環境構築をする方法
on 開発
typescriptの環境構築する手順
typescriptの環境構築の手順をご説明いたします。
簡単に説明すると下記の内容をすれば問題ないですが、細かく画像でご説明いたします。
- npmを使うためにnode.jsをinstallします。
- typescriptホームページでnpmを使用してtypescriptを設置します。
- プロジェクトのルートからnpm initを叩きます。基本的にenterキーを押すと、defaultなので構いません。
- 内部にpackage.jsonファイルが入れることを確認します。
- npm install –save-dev lite-serverを通してこのプロジェクトに使われるツールを設置するために叩きます。
- package.jsonファイルに入ってlite-serverを記載します。
- npm startを叩きます。
- tsc –initを入力するとtsconfig.jsonファイルができます。
npmを使用するため、node.jsをinstallします。
typescriptを使うためにはnpmが必要です。
node.jsをダウンロードするとnpmが入っているので、node.jsをダウンロードしてください。
nodejsページ.
二つのバージョンがありますが、最近のバージョンは安定的ではないので、
推奨版を使用してください。
設置が完了できましたら、commandでnodeバージョンが確認できます。
node --version
typescriptホームページでnpmを使用してtypescriptを設置します。
typescriptを設置してください。
typescriptページ.
npmがあるのでinstallをしてください。
npm install typescript --save-dev
設置が完了できましたら、バージョンを確認してください。
tsc --version
tsc versionが確認できない場合があります。
用語 ‘tsc’ は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。のメッセージが出た場合はエラー解決方法を記載しましたので、ご確認ください。
tscエラー解決.
プロジェクトのルートからnpm initを叩きます。
基本的にenterキーを押すと、defaultなので構いません。
全部最後までenterキーを押してください。
内部にpackage.jsonファイルが入れることを確認します。
package.jsonはサーバーに関する内容なので、
ファイルがルート内にあレバ問題ないです。
npm install –save-dev lite-serverを通してこのプロジェクトに使われるツールを設置するために叩きます。
lite-serverを通してこのプロジェクトに使われるツールを設置できるように叩きます。
これは開発中に助かるツールでメインコードの一部に実行されるコートは含まれていません。
npm install --save-dev lite-server
package.jsonファイルに入ってlite-serverを記載します。
色んなファイルができましたが、package.jsonに入って内容を修正します。
"test": "echo \"Error: no test specified\" && exit 1",
"start": "lite-server"
npm startを叩きます。
npm startを叩いてサーバーをonします。
localhost:3000のアドレスでサーバーが入れます。
npm start
tsc –initを入力するとtsconfig.jsonファイルができます。
プロジェクト全部watchモードを使うのであれば、下記の内容を叩いて使います。
watchモードについては説明文を記載しましたので、ご確認ください。
typescriptWatchモード.
tsc --init
ここまですると、typescriptをプロジェクトで管理する設定が完了します。