TypeScript：環境構築手順

(2023.05.26)
もう一度はじめからやってみたので以下記事を参照
→ TypeScript：はじめてのTypeScript

以下サイトの学習中
※ 「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう：CodeZine（コードジン）
この記事中で出てくるTypeScriptの環境構築手順を忘れないようにメモ

環境

Windows 10 21H1 (19043.1348)
Node.js 14.17.0
npm 6.14.13

PS C:\work\VueSample\p002-ts-basic> node -v
v14.17.0
PS C:\work\VueSample\p002-ts-basic> npm -v
6.14.13
  

環境準備

コマンドプロンプトでプロジェクトのフォルダを開き "npm install --save-dev typescript"
※ "--save-dev" は開発時に利用するパッケージとしてインストールすることを表す

PS C:\work\VueSample\p002-ts-basic> npm install --savedev typescript
npm WARN p002-ts-basic@1.0.0 No description
npm WARN p002-ts-basic@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ typescript@4.4.4
added 195 packages from 253 contributors and audited 196 packages in 31.211s

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

found 9 vulnerabilities (8 moderate, 1 high)

    ╭───────────────────────────────────────────────────────────────╮
    │                                                               │
    │     New major version of npm available! 6.14.13 -> 8.1.3      │
    │   Changelog: https://github.com/npm/cli/releases/tag/v8.1.3   │
    │               Run npm install -g npm to update!               │
    │                                                               │
    ╰───────────────────────────────────────────────────────────────╯ 
  

コンパイル

package.jsonの "script"キーに以下3つの文字列キーを追加

"scripts": {
  "tsinit": "tsc --init",
  "build": "tsc",
  "serve": "lite-server"
},
  

これによりnpm runで tsinit、build、serveのコマンドが使えるようになる。

1. npm run tsinit

tsconfig.jsonファイルを作成する
このファイルが存在しない場合(初めの一回目)に実行する

2. npm run build

プロジェクトに含まれるTypeScriptファイル(拡張子がts)のファイルをjsファイルに変換する

3. npm run serve

lite-serverを起動してWebページを表示する

---

TypeScript