🥺

[奮闘記] TypeScriptの環境構築

に公開
TypeScript
環境構築
練習
idea

さすがにJavaScriptで書いていると
「先輩、TypeScript使わないのですか？」ププ
って言われることはありませんが、
自分の頭の中の誰かがそう言っているような気がしまして、勉強します。

JavaScriptは好きです。すみません、異常に好きです。
HTMLに埋め込んで動くし、エディタで行けるのが大好きです。
ぷよぷよ、パズドラ、テトリスくらいはサラッと作れます、エディタとブラウザあれば。

今回は、WSL（Ubuntu）で目指します。エディタはVSCode想定。

Nodeの環境構築

nvmはUbuntuの公式リポジトリにあがっていないため、aptではインストールできないことになります

  • ガーン！！！

  • なもので、公式とそのページを参考にトライ。

  • やったできた！！

$ node -v
v24.9.0
$ npm -v
11.6.0

へー、npmも更新か。まあ、最新なんだろう。

Node をインストールすると自動的に NPM もインストールされます。

こちらより

とりあえずできた！！

TypeScriptの練習

わからんから、まずはチュートリアルからやろう。こちらのQiita

なんとなく、前に進んでいるがよくわかってない・・・

トランスパイル。なるほろ・・・

トランスパイル（transpile）とは、あるプログラミング言語のソースコードを、別のプログラミング言語に変換するプロセス
コンパイルは高水準言語を機械語などの低水準言語に変換するのに対し、トランスパイルは高水準言語を別の高水準言語に変換します。
TypeScriptをJavaScriptに変換する際にトランスパイル

わー。本当だ！出た！

:~/ts$ npx tsc
:~/ts$ node dist/index.js
complete npx tsc

わたしは、「node XXX.js」もあんまりやらずに、HTMLからJS 呼ぶばっかりだったので新鮮
（まったくやったことないわけじゃないですけど、サーバ側はほかの言語使うので・・・）

わかったことは、

  • トランスパイルする「js -> ts」
  • 手続きが必要。
    • package.json は たぶん「npm install typescript --save-dev」のせい
    • tsconfig.json は「npx tsc --init」で作成される
      • こっちはがんばって変更しないといけない。フォルダとか。

とりあえずヨシ！！

TypeScriptを今後つかう

今回は、これだけなので、あんまり良さが出てないですが、

console.log("complete npx tsc");

ゲームのプログラムのHTMLじゃないCLASSにTypeScriptを無理して使っていこうかなと思います。
HTMLと処理クラスをしっかり分けていく設計にしないとなあ。

今回はこんな感じでおしまいです。

おまけ；NVM 奮闘記

愚かな「history」です。

  • （３５５～３７４）あれあれ？入らないなあ・・・
  • （３７５～３９２）ふむふむ、なるほど。へー、こうするのね・・・
  • （３９３～）node v24.9.0 が入った！やった！！やたやた列車シュッポッポ
  355  mkdir ts
  356  cd ts
  357  ls
  358  node
  359  sudo apt install nvm
  360  apt upgrade
  361  sudo apt upgrade
  362  cat /etc/os-release
  363  sudo apt install nvm
  364  nvm
  365  sudo install node
  366  sudo apt install node
  367  sudo apt install -y nodejs
  368  sudo apt install -y nodejs npm
  369  sudo apt install -y nodejs npm nvm
  370  sudo apt install -y nodejs npm
  371  ls
  372  node
  373  node -v
  374  nvm ls-remote
  375  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh
  376  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
  377  ls
  378  ls -la
  379  cd ..
  380  ls
  381  ls -la
  382  cd ts
  383  nvm
  384  cd ~
  385  ts
  386  ls
  387  ls -l ~/.nvm | grep ins*
  388  source ~/.bashrc
  389  nvm
  390  vi ~/.bashrc
  391  echo $NVM_DIR
  392  command -v nvm
  393  nvm install node
  394  node -v
  395  history

※ 会社と違って、PROXY問題やSSL・証明書問題がないのが楽です。

Discussion