TypeScriptでHello, World!～インストール方法と使い方～

#ごあいさつ
ひさしぶりの投稿です！
勉強は続けていたのですが、知識が増えてくると逆に自分の知識不足に気が付き、間違いを恐れて投稿できなくなっていました笑
今回の記事では、自分を含めた初心者向けに**TypeScript**のインストール方法と使い方をまとめます。
相も変わらず初心者なので、間違いや補足情報等あればどんどん(やさしく)教えてください！

#TypeScriptとは
Microsoftが開発した、JavaScriptの欠点を補うプログラミング言語です。

**「JavaScriptの欠点」**とは何か。
公式( https://www.typescriptlang.org/docs/handbook/intro.html )によると、

>みんなプログラムの型エラーってよくやっちゃうよね。
>でもJavaScriptってどんなに複雑なプログラムでも、
>実際に動かしてみないと型チェックができないんだよね。不便だねー。
>だからTypeScriptは、静的な型チェックができるようにしたよ！
>動かす前にプログラムの型があってるかどうか確認できるよ！

だそうです(超意訳)。
つまりTypeScriptは、JavaScriptの
**実行しないとエラー確認ができない！**
という欠点を、
Javaのように**コンパイル→実行**の手順を踏むことで克服しています！えらい！

試しに、誤った**JavaScript**のコードを書いて保存しました。
この時点ではエラーがでません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628704/b54ba975-ee89-5608-bb33-496ccb142c55.png)
しかしブラウザで開いてみると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628704/ddef3aa9-47a1-4482-2ca9-1cf0868ec0b5.png)
何も現れないので、コンソール確認でエラー判明。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628704/3fd16b94-43b8-cf9b-ed72-b19471fa68dd.png)
たしかにこの手順、特に複雑なプログラムのときはとてもめんどくさいですね。

一方、**TypeScript**で誤ったコードを書き、実行前にコンパイルすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628704/b02e55b0-2406-0d01-8487-fb97dfb3ee3c.png)
おー、教えてくれてありがとう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628704/079368ae-37df-6c1c-d61e-2d324276ce14.png)
わざわざブラウザで動かさなくていいので、複雑なプログラムでもすぐエラーに気が付けますね！

#インストール
さっそくはじめましょう！
初心者でも30分ほどで"Hello, World!"できますよ！

###①Node.jsのインストール
htmlに組み込むJavaScriptは、**ブラウザ(クライアント)側**の実行環境で動作しています。
一方、**Node.js**は、**サーバ側**で動くJavaScriptの実行環境です。
Node.jsの[公式サイト](https://nodejs.org/ja/)からインストーラをダウンロードしてインストールしましょう。
私は「推奨版」を選びました。

###②TypeScriptコンパイラのインストール
コマンドラインでTypeScriptの**コンパイラ**をインストールします。
私は[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)のターミナルで行ったので、**VSCode**を利用した手順を紹介します。

　1.ローカルの任意の場所にフォルダ作成
　2.VSCodeで、作成したフォルダを開く
　3.左上Viewタブ→Terminalを開く
　4.初期化のコマンド
　　※いろいろ聞かれますが、とりあえず全部EnterでとばしてOK

```TERMINAL:TERMINAL
> npm init
```

　5.TypeScriptコンパイラをインストール！

```TERMINAL:TERMINAL
> npm install -g typescript
```

　6.バージョン確認

```TERMINAL:TERMINAL
> tsc -v
```

　ここでエラーが発生しました。

```TERMINAL:TERMINAL
    + CategoryInfo          : セキュリティ エラー: ( 
: ) []、P    SSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess     
```

調査したところ、PowerShellの実行ポリシーが**restricted**になっていることが原因だそうです。
現在のポリシーを次のコマンドで確認すると、restrictedになっていました。

```TERMINAL:TERMINAL
> Get-ExecutionPolicy
Restricted
```

次のコマンドを実行してポリシーを**Bypass**に変更したら、無事バージョンの確認ができました。
TypeScriptコンパイラのインストール成功です！

```TERMINAL:TERMINAL
> Set-ExecutionPolicy Bypass -Scope CurrentUser
```

```TERMINAL:TERMINAL
> tsc -v
Version 4.0.3
```

>参考：PowerShellでスクリプトを実行するとセキュリティエラーになるときの対策 | 山本 隆 ( https://www.gesource.jp/weblog/?p=8203 )

#実行
インストールお疲れ様でした！
さあ、TypeScriptを実行しましょう！

###①コンソール表示
先ほど開いたフォルダ内に**hello.ts**というファイルを作成し、
コンソール表示のコード書いて保存！

```typescript:hello.ts
console.log('Hello, World!');
```

次に、ターミナルで**コンパイル**！
以下のコマンドを実行しましょう。

```TERMINAL:TERMINAL
> tsc hello.ts
```

すると、あら不思議！
同じフォルダに**hello.js**というファイルが作成されています！
こちらは特にいじる必要なし。

```javascript:hello.js
console.log('Hello, World!');
```

最後に**実行**！
ターミナルで以下のコマンドを実行してください。

```TERMINAL:TERMINAL
> node hello.js
Hello, World!
```

**Hello, World!**が表示されました！

###②ブラウザ表示
まず、同じディレクトリに**index.html**というファイルを作成します。
headの中に**script**タグを記述し、コンパイルで作成される**hello.js**を指定します。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<script src="hello.js"></script>
</head>
<body></body>
</html>
```

**hello.ts**の中身は画面表示のコードに変更しましょう。

```typescript:hello.ts
document.write('Hello, World!');
```

そして**コンパイル**！

```TERMINAL:TERMINAL
> tsc hello.ts
```

**index.html**を開いてみると…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628704/43849a68-21a6-1523-99e4-4c77bee27f32.png)

**Hello, World!**が表示されました！

ちなみにDocumentオブジェクトの場合、ターミナルでの実行には失敗するようです。

```TERMINAL:TERMINAL
> node hello.js
C:\BlankFolder\hello.js:1
document.write('Hello, World!');
^

ReferenceError: document is not defined
    at Object.<anonymous> (C:\BlankFolder\hello.js:1:1)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47
```

#おわりに
やり方がわかっても、文章で人に説明するのは難しいです。
Qiitaで記事を書こうとすると特に、有識者の方に怒られないよう一生懸命調べるのでいい勉強になります笑
最後まで読んでくださってありがとうございました！