TypeScript：#1 はじめてのTypeScript

Visual BasicプログラマーがTypeScriptを使ってみる。
※ 参考：書籍：TypeScriptハンズオン

環境

仮想上のWindows 11 Pro 22H2 (22621.1702)
Visual Studio Code 1.78.2
Node.js 18.16.0 LTS

※ (2024.04.13) 現在の環境 [2版]
Windows 11 23H2 22631.3447
Visual Studio Code 1.88.0
Node.js v20.12.2 LTS

Node.jsインストール

Node.jsをインストールしておく。
※ 手順：Node.js：インストールする

環境構築の準備

TypeScript開発環境(ソースなど)を置くディレクトリを C:\projects\typescript とした。(どこでも良い)
さらに、今回作成するTypeScriptプログラムを格納するサブフォルダ "test01" とし上記フォルダ配下に作成。
※ つまり "C:\projects\typescript\test01"

エクスプローラーで C:\projects\typescript フォルダを開き、test01フォルダ上で [SHIFT]+[F10] を押し、表示されたポップアップメニューより "codeで開く" を選択する。
※ test01フォルダ上で [SHIFT] 押しながら右クリック で "codeで開く" の方が早いかも [2版]
これで test01 フォルダでVSCodeが開く。

VSCodeで [CTRL]+[@] を押す。これでターミナルが開く。
既定だとPowerShellで起動するので Command Prompt へ切り替える。
※ PowerShellだとセキュリティのチェックにより実行できないコマンドがあるため。

TypeScriptインストール

VSCode上のターミナル(コマンドプロンプト)で以下コマンドを実行。

npm install typescript -g

実行結果：

    C:\projects\typescript\test01>npm install typescript -g

    added 1 package in 1s
    
    C:\projects\typescript\test01>
  

※ (2024.04.13) コマンド実行したところ以下のメッセージが表示された。[2版]

added 1 package in 935ms
npm notice
npm notice New patch version of npm available! 10.5.0 -> 10.5.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.2
npm notice Run npm install -g npm@10.5.2 to update!
npm notice
  

メッセージの通り "npm install -g npm@10.5.2" のコマンドを実行

D:\study\typescript\test01>npm install -g npm@10.5.2

added 1 package in 3s

25 packages are looking for funding
  run `npm fund` for details

そして TypeScriptのインストールでうまくいった。

D:\study\typescript\test01>npm install typescript -g

changed 1 package in 905ms
  

TypeScriptのバージョン(トランスコンパイラ)のバージョンを確認

tsc --v

実行結果：

    C:\projects\typescript\test01>tsc --v
    Version 5.0.4
    
    C:\projects\typescript\test01>    
  

※ (2024.04.13) 実行結果： [2版]

    D:\study\typescript\test01>tsc --v
    Version 5.4.5
  

簡単はTypeScriptを書いてみる

C:\projects\typescript\test01\test01.ts ファイルを作成し以下のコードを書く。

    console.log("welcome to typescript")
  

トランスコンパイルするには以下コマンドを実行。

tsc test01.ts

そうすると test01.js ファイルが作成される。
作成したjsファイルの実行は以下コマンドにて行う。

node test01.js

実行結果：

    C:\projects\typescript\test01>node test01.js
    welcome to typescript
    
    C:\projects\typescript\test01>    
  

---

学習 TypeScript
[2版] 2024.04.13 06:28