スポンサーリンク

【TypeScript入門】VSCodeで環境構築からHelloWorld手順。

TypeScript
スポンサーリンク

今回の記事はVScodeでTypeScriptの実行環境を構築する手順に関してご紹介する記事です。Mac&Windows共通で設定可能ですので参考にしてみてください。

では早速メインの記事に進みます。

スポンサーリンク

TypeScriptとは?

簡単にいうとJavaScriptファイルを作成する為のAltJS言語です。初心者の方にはわかりづらい表現かもしれませんが、JavaScriptはかなり書き方に難がある言語です。その為、型がある保守性の高い言語でどんどん置き換えていこうという流れがあります。その為の第一候補としてTypeScriptがあります。その為、TypeScriptを動かすにはJavaScriptを動かす為の環境である「node.js」が必要ということです。

VScodeインストール

WindowsでVScodeインストール

MacでVScodeインストール

「node.js」インストール

Windowsの方はこちらの公式から最新をダウンロードしてください。

特に設定変更なしでインストーラーで問題なくインストールできると思います。

Macの方はpodinstallでこちらの手順よりインストールしてください。

これでnpmが使用できるようになります。

「TypeScript」インストール

WindowsでTypeScriptインストール
MacでTypeScriptインストール

ではVScode、Node、TypeScriptがきちんと入っているか確認してください。

node -v
v14.1.0
tsc -v
Version 3.8.3

Ver確認でVer表示されれば問題ないです。では次に「Hello World」していきましょう。

TypeScriptで「Hello World」

まずはフォルダーを作成します。今回はこのようなフォルダにします。

└── type001
    └── test001

ではtest001をVScodeで開きましょう。フォルダーの選択や、ファイルオープンなどで開けます。このままでは何も入っていないので、VScodeのTerminalを開いて下記を実行します。

npm init

色々出てきますが全て「enter」で問題ないです。すると「package.json」が生成されています。次に下記を実行します。

npm install --save typescript

「package-lock.json」が生成されます。

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です。この現在の階層上に何かファイルを置いてみてください。今回は下記を配置してみます。

function test() :void {
    console.log("Hello World");
}
test()

メチャ簡単な関数でtestを出力します。
これをまずはjsのファイルにトランスファーする必要があります。

npx tsc ファイル名.ts

するとTypeScriptのファイル名と同じファイル名のjsファイルが生成されています。

それをnode.jsを用いて実行すると出力されます。

node ファイル名.js
Hello World ←これが出力されるもの

こんな感じでどんどん実行できるようになってます。

上記で一連の流れは完了ですが実はパッケージ管理等を行う必要は今回はなかったので下記だけでも実行可能です。

TypeScriptファイルを作成。→下記事実行。

tsc ファイル名.ts

これでトランスファーされたJavaScriptファイルができるのでこれを「node.js」で実行する。

node ファイル名.js
Hello World ←これが出力されるもの

ただ、将来的なことを考えるとパッケージ管理も必要になるので一番初めの手順をなるべく心がけましょう。

今回の記事は以上です。他にもTypeScriptの記事を多数書いているので気になる方は是非参考にしてみてください。

コメント

  1. […] 【TypeScript】「Visual Studio Code」でTypeScriptを実行できるようにする方法(Mac,W… […]

  2. […] 【TypeScript】「Visual Studio Code」でTypeScriptを実行できるようにする方法(Mac,W… […]

タイトルとURLをコピーしました