ねらい
TypeScriptをVSCodeでコンパイルする環境を作ること
誰に向けて
筆者自身と初心者に向けて
簡潔に手順説明
①Node.jsをインストールする
筆者は推奨版の16.17.1をインストールしました。
インストールが完了したらnext連打=>finishでおｋ
②typescriptをグローバルにインストールする
コマンドプロンプトにコピペしてEnter
npm install -g typescript
③ 任意のフォルダを作成する
④ ③で作成したフォルダをVSCodeで開く
⑤ VSCode上部のTerminal(ターミナル)から新規ターミナル作成
⑥ package.jsonを作る
⑤で開いたターミナルにコピペしてEnter
npm init -y
⑦ tsconfig.jsonを作る
続けてコピペしてEnter
tsc --init
⑧ 各フォルダ、ファイルを作る
作るものは以下の3つ。
- コンパイル元フォルダ
- コンパイル元フォルダの中のtsファイル
- コンパイル先フォルダ
今回は順に以下のようにした。
- from
- from/main.ts
- to
わかりやすくするための変な名前です。
⑨ コンパイル元とコンパイル先をtsconfig.json内で指定する
tsconfig.json内のrootDirとoutDirを編集する。
筆者の場合、rootDirが29行目に、outDirが52行目にコメントアウトしてあった。
tsconfig.json
...
"rootDir": "./from",
...
"outDir": "./to",
...
⑩ コンパイルする
ターミナルでコピペしてEnter
tsc
これでtoフォルダにmain.jsファイルが作成されていたら成功です。
躓いたポイント
⑦のtsc --initでエラー発生
以下のようなエラーが発生しました。
tsc : ファイル C:\Users\***oshienai***\npm\tsc.ps1 を読み込めません。
C:\Users\***oshienai***\npm\tsc.ps1 はデジタル署名されていません。こ
プトは現在のシステムでは実行できません。スクリプトの実行および実行ポリシーの
詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlin
D=135170) を参照してください。
発生場所 行:1 文字:1
+ tsc --init
+ ~~~
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityExcep
+ FullyQualifiedErrorId : UnauthorizedAccess
雑にエラーの一部である、
デジタル署名されていません。このスクリプトは現在のシステムでは実行できません
部分をコピペして検索してみました。
この記事を参考に、さらに簡潔にまとめると、VSCodeのTerminalで以下を入力。
Get-ExecutionPolicy -list
Process undefinedを確認する。
続いて、以下を入力
Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
その後、再度以下を入力
Get-ExecutionPolicy -list
Process Bypassを確認する。
再度tsc --initと打ってみる。
このような画面が表示されたらおそらく成功です。
本記事⑧に戻りましょう。
参考にした記事
最後に
誰かの助けになれば幸いです。
何かあったらコメントください。