こんにちは。
今回はVisual Studio CodeにTypeScriptの環境を構築していきます。
参考サイト
TypeScript Programming with Visual Studio Code
以下、上記サイトのスクショです。
サイトを見る感じ、
VSCではTypeScriptのサポートしてるよ、でもコンパイラないよ、自分で入れる必要があるよ。と言っています。
コンパイラを入れる最も簡単な方法はnpmを使うことと書いてあるので、今回はnpmを使っていきたいと思います。
そもそもnpmってなんだっけ、何か入れないといけなかったような、私のパソコンでできるかな。
と思ったので調べました。
参考サイト
npmの基本コマンド | Node.js | JavaScript 超完全入門 基本から発展までのすべて
Node.jsのパッケージ管理ツールみたいですね。
最初のサイトの方にもちゃんと書いてありました。
The easiest way to install TypeScript is through npm, the Node.js Package Manager.
Node.jsに関係する何かだろうくらいに思ってました。
nmp -v
どうやら、このコードでnpmがインストールされているか確認できるみたいです。
念のため、コマンドプロントを開いて確認します。
まあ、入れた記憶がなかったので想定の結果です（笑）
Node.jsインストール
nmpが必要みたいなので、Node.jsを入れることにします。
Node.js — Download Node.js®
こちらのサイトからダウンロードします。
難しいことは何もなく、簡単にインストールできました。
正常にインストールできたかコードを入れて確認してみます。
あれ……。
Pathが通っていませんでした😢
通さなくても問題はないですが、せっかくなので通しましょう！
npmのPathを通す
確かパソコンの設定だった気がします。
こちらのサイトを参考に設定していきましょう。
【Windows 11対応】Path環境変数を設定／編集して、独自のコマンドを実行可能にする：Tech TIPS – ＠IT
設定>システム>バージョン情報からシステムの詳細設定を開きます。
環境変数を開きます。
ユーザー環境変数を編集します。
一番下に追加しました。
OKを押して完了です。
さて、無事にPathが通ったか確認しましょう。
あれ……。
ちなみにVSCではなくWindows上のコマンドプロントでは問題なく通っていました。
GUIで反映されないので、CUIで試してみます。
参考サイト
VSCodeでパスを通す – Tech&News renderer
あっさりできました😲
VSC用の環境変数でもあるのかしら……。
さてようやくnpmが使えるようになったので、
TypeScriptのコンパイラを入れていきたいと思います。
TypeScriptコンパイラインストール
やっと最初のサイトの通りに進めていけます。
npm install -g typescript
これを実行すれば良さそうです。
成功したのでしょうか。
私の目にはnpmのバージョンがアップデートのお知らせが出ているように見えます。
念のため、無事にインストールできたのか確認してみます。
tsc –version
やはり、ダメでした。
状況から察するに、npmのバージョンを上げないといけないのでしょうか。
ものは試しです。
npm install -g npm@11.0.0
このコードにてバージョンを上げられそうなのでさっそくやってみましょう。
問題なくバージョンアップできたようです。
それでは再度、TypeScriptコンパイラのインストールを試してみます。
今度はnpm noticeが出ませんでした。
ん？
changed 1 package in 2s
changedって置き換えたってことだよね！？
よく見たら最初の方は、
added 1 package in 5s
と書いてあります。
もしかして、最初のインストールで既に成功していた……。
まさかとは思いますが、またしてもPath問題ですか。
テスト結果が変わらなかったのでPath問題で正解みたいですね。
そもそもどこにインストールされたのやら……。
調べたところ、どうやらnpmみたいにファイルが増えたわけではなく、package.jsonというファイルに記述が増えたとかなんとか。
それじゃあ、tscってどうやって実行するんだよと思っていたところ、分かりました。
参考サイト
TypeScript初心者が小さな個人開発する際の全体手順メモ（Win版） #VSCode – Qiita
npxが頭に必要みたいです。
npx tsc –version
知らんがな……。
試してみたところ、無事にインストールできていることを確認できました。
npx tscって書いておいてほしかった😢
TypeScript実行
それではTypeScriptを実行していきたいと思います。
まず初めに最初のサイトにあったサンプルコードを入れたtsファイルを作成します。
次に
tsc hello.ts
を入れるといいみたいですが、私はすでに学習してます。
npx tsc hello.ts
これが正解ですね！
さっそく試してみましょう。
無事に実行できました。
このコードによってhello.tsファイルからhello.jsファイルが作られるみたいです。
jsファイルが作成されていることも確認できました。
余談ですが、上のスクショのコマンドプロントの通り、
VSCのコマンドプロントを開きなおすと、なぜかCUIで通したPathがなくなっていました。
このままだと毎回Pathを通す必要がそうです……。
※VSCを再起動したらPathが通るようになっていました。
それでは次に、
node hello.js
これを実行して、動作確認できれば今回は完了です。
あれ……。
エラーは出てないのに実行されない？
とりあえず、nodeコマンドが使えているのか、バージョン確認でテストしてみましょう。
nodeコマンド自体は使えているので、何か別に問題がありそうな。
色々と試していると、
できました！
どうやらOneDrive内にフォルダがあったのが原因みたいでした。
いっぱい使っててごめんなさい！
5GBは少ないよ……。同期できてなかったのが悪いのかな？
という訳で完了です！
最後のJavaScriptトラブル解消に半分以上時間を費やしました……（笑）
解決してよかった。
投稿者プロフィール
最新の投稿
【AWS】2025年1月16日【新米エンジニア学習記録③】Next.jsのデプロイ- 【JavaScript】2025年1月9日【新米エンジニア学習記録②】TypeScriptの導入
- SelfIntroduction2025年1月9日【新米エンジニア学習記録①】ブログ練習
