今回の記事はVSCodeでTypeScriptの実行環境を構築する手順に関してご紹介する記事です。Mac＆Windows共通で環境構築可能なように記載しています。また、継続して学ぶためのおすすめ記事のリンクも用意しているのでTypeScript入門者は是非参考にしていただければ学びやすいと思います。
TypeScriptとは？
まず、TypeScriptとは？
初学者にも分かりやすいように簡単にまとめると、JavaScriptファイル（JSファイル）を作成する為のAltJS（オルトジス）言語（JavaScriptに変換するための言語）です。
分かり辛い表現かもしれません。これを理解するにはJavaScriptも知る必要があります。
JavaScriptはほぼ全ての記事で記載しれている、HTMLを除けば最も使用されているプログラミング言語です。しかし、JavaScriptは言語の特性上、管理や改修の面でかなり問題のある言語です。（もちろん開発段階でルールをしっかり決めればそんなことはないのですが。）
その為、その他の保守性の強い言語でプログラムを記述し、その言語で記述されたファイルをJSファイルにコンパイルすることで、保守性を高めるという取り組みが盛んです。
その第1候補がTypeScriptです。おそらく今後新規でJavaScriptを含む開発を行う場合はTypeScriptを用いた開発が主流になってくるのではないかと考えられます。
TypeScriptを動かすには最終的なコンパイル先でJavaScriptを動かす必要があるため、「Node.js」の環境が必要になります。
では実際にVSCodeでTypeScript環境を構築し、「HellpWorld」までの手順をご紹介していきます。
VSCodeインストール手順
VSCodeのインストールは簡単です。インストーラーからダウンロードすればすぐ使用できるます。詳しくは下記記事を参照ください。
公式ドキュメント（VSCodeダウンロードリンク）
Node.jsインストール手順
下記より最新のバージョンのNode.jsをインストールしましょう。こちらもインストーラーの指示に従うだけで問題なくインストールできます。Macの方はリンクにて方法紹介しています。
インストールできれば下記でバージョン確認をしてみましょう。
node -v
v14.1.0バージョンが出力されればOKです。
TypeScriptインストール手順
Windows・Mac共に下記コマンドでインストールできます。
npm install -g typescript下記コマンドでバージョンが出力されればOKです。
tsc -v
Version 3.8.3これで環境構築は完了です。「HelloWorld」を出力する方法をご紹介します。
TypeScriptで「Hello World」
まずは下記のようなプロジェクトフォルダを作成します。
└── type001
└── test001「test001」フォルダをVSCodeで開きます。
VSCodeの「ターミナル」を開いて下記コマンドを実行します。
npm init全て「enter」を押します。するとプロジェクトフォルダに「package.json」が生成されています。
npm install --save typescript「package-lock.json」が生成されます。
この「package.json」「package-lock.json」の違い等に関しては下記記事にまとめているので気になる方は参考にしてみてください。初学者はそこまで気にする必要はないかもですが、後々必要な知識です。
【TypeScript】「package.json」「package-lock.json」の違いをご紹介。
では次に下記を行い、TypeScriptの設定ファイルを作成します。
npx tsc -init「Tsconfig.json」が作成されます。
これで準備は完了です。
test001
├── node_modules
│ └── typescript
│ ├── AUTHORS.md
│ ├── CODE_OF_CONDUCT.md
│ ├── CopyrightNotice.txt
│ ├── LICENSE.txt
│ ├── README.md
│ ├── ThirdPartyNoticeText.txt
│ ├── bin
│ │ ├── tsc
│ │ └── tsserver
│ ├── lib
│ │ ├── README.md
│ │ ├── cancellationToken.js
│ │ ├── cs
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── de
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── diagnosticMessages.generated.json
│ │ ├── es
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── fr
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── it
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── ja
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── ko
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── lib.d.ts
│ │ ├── lib.dom.d.ts
│ │ ├── lib.dom.iterable.d.ts
│ │ ├── lib.es2015.collection.d.ts
│ │ ├── lib.es2015.core.d.ts
│ │ ├── lib.es2015.d.ts
│ │ ├── lib.es2015.generator.d.ts
│ │ ├── lib.es2015.iterable.d.ts
│ │ ├── lib.es2015.promise.d.ts
│ │ ├── lib.es2015.proxy.d.ts
│ │ ├── lib.es2015.reflect.d.ts
│ │ ├── lib.es2015.symbol.d.ts
│ │ ├── lib.es2015.symbol.wellknown.d.ts
│ │ ├── lib.es2016.array.include.d.ts
│ │ ├── lib.es2016.d.ts
│ │ ├── lib.es2016.full.d.ts
│ │ ├── lib.es2017.d.ts
│ │ ├── lib.es2017.full.d.ts
│ │ ├── lib.es2017.intl.d.ts
│ │ ├── lib.es2017.object.d.ts
│ │ ├── lib.es2017.sharedmemory.d.ts
│ │ ├── lib.es2017.string.d.ts
│ │ ├── lib.es2017.typedarrays.d.ts
│ │ ├── lib.es2018.asyncgenerator.d.ts
│ │ ├── lib.es2018.asynciterable.d.ts
│ │ ├── lib.es2018.d.ts
│ │ ├── lib.es2018.full.d.ts
│ │ ├── lib.es2018.intl.d.ts
│ │ ├── lib.es2018.promise.d.ts
│ │ ├── lib.es2018.regexp.d.ts
│ │ ├── lib.es2019.array.d.ts
│ │ ├── lib.es2019.d.ts
│ │ ├── lib.es2019.full.d.ts
│ │ ├── lib.es2019.object.d.ts
│ │ ├── lib.es2019.string.d.ts
│ │ ├── lib.es2019.symbol.d.ts
│ │ ├── lib.es2020.bigint.d.ts
│ │ ├── lib.es2020.d.ts
│ │ ├── lib.es2020.full.d.ts
│ │ ├── lib.es2020.promise.d.ts
│ │ ├── lib.es2020.string.d.ts
│ │ ├── lib.es2020.symbol.wellknown.d.ts
│ │ ├── lib.es5.d.ts
│ │ ├── lib.es6.d.ts
│ │ ├── lib.esnext.array.d.ts
│ │ ├── lib.esnext.asynciterable.d.ts
│ │ ├── lib.esnext.bigint.d.ts
│ │ ├── lib.esnext.d.ts
│ │ ├── lib.esnext.full.d.ts
│ │ ├── lib.esnext.intl.d.ts
│ │ ├── lib.esnext.symbol.d.ts
│ │ ├── lib.scripthost.d.ts
│ │ ├── lib.webworker.d.ts
│ │ ├── lib.webworker.importscripts.d.ts
│ │ ├── pl
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── protocol.d.ts
│ │ ├── pt-br
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── ru
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── tr
│ │ │ └── diagnosticMessages.generated.json
│ │ ├── tsc.js
│ │ ├── tsserver.js
│ │ ├── tsserverlibrary.d.ts
│ │ ├── tsserverlibrary.js
│ │ ├── typesMap.json
│ │ ├── typescript.d.ts
│ │ ├── typescript.js
│ │ ├── typescriptServices.d.ts
│ │ ├── typescriptServices.js
│ │ ├── typingsInstaller.js
│ │ ├── watchGuard.js
│ │ ├── zh-cn
│ │ │ └── diagnosticMessages.generated.json
│ │ └── zh-tw
│ │ └── diagnosticMessages.generated.json
│ ├── loc
│ │ └── lcl
│ │ ├── CHS
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── CHT
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── CSY
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── DEU
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── ESN
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── FRA
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── ITA
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── JPN
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── KOR
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── PLK
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── PTB
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ ├── RUS
│ │ │ ├── Targets
│ │ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ │ ├── TypeScriptDebugEngine
│ │ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ │ ├── TypeScriptLanguageService
│ │ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ │ └── TypeScriptTasks
│ │ │ └── TypeScript.Tasks.dll.lcl
│ │ └── TRK
│ │ ├── Targets
│ │ │ ├── ProjectItemsSchema.xaml.lcl
│ │ │ ├── TypeScriptCompile.xaml.lcl
│ │ │ └── TypeScriptProjectProperties.xaml.lcl
│ │ ├── TypeScriptDebugEngine
│ │ │ └── TypeScriptDebugEngine.dll.lcl
│ │ ├── TypeScriptLanguageService
│ │ │ └── Microsoft.CodeAnalysis.TypeScript.EditorFeatures.dll.lcl
│ │ └── TypeScriptTasks
│ │ └── TypeScript.Tasks.dll.lcl
│ └── package.json
├── package-lock.json
├── package.json
└── tsconfig.jsonこのような構成になっています。ファイルの中身はいじらないでOKです。
ではこのプロジェクトフォルダ内に適当なファイルを作成します。今回は「index.ts」を作成。
function test() :void {
console.log("Hello World");
}
test()「HelloWorld」を出力する関数のみの記述です。
これをJSファイルにコンパイルしてみます。
npx tsc index.ts「index.ts」に対応して「index.js」ファイルが作成されます。
このファイルをNode.jsを使って実行してみます。
node ファイル名.js
Hello World ←これが出力されるものこれでターミナルにHelloWorldが出力されました。
今回の記事は以上です。ただし、単体のTSファイルをJSファイルにコンパイルして使用するというのは現在の開発では全くない状況です。
今流行りの環境で言うと「React」「Vue」「Angular」などのフレームワークを用いたシステム開発が主流となっています。私が特におすすめなのがReactです。TypeScriptベースのReactプロジェクトはバックエンドとの連携の面でも非常に簡単で使用しやすいです。おそらく人気もこの3つのライブラリの中でトップではないでしょうか？
「TypeScriptベースのReactプロジェクト環境構築手順。」
TypeScriptベースのReact環境構築に関しても記事をまとめているので気になる方は是非そちらの記事も参考にしてみてください。
コメント
[…] 【TypeScript】「Visual Studio Code」でTypeScriptを実行できるようにする方法（Mac,W… […]
[…] 【TypeScript】「Visual Studio Code」でTypeScriptを実行できるようにする方法（Mac,W… […]