【画像で説明】シンプルにTypeScriptを導入して使う方法

# この記事は何？
**TypeScriptを導入する方法**を紹介する記事です。
とりあえず、**さくっと使ってみたい人向け**になります。

この記事がわかりやすかったらLGTM✨頂けると嬉しいです！

また、TypeScriptとは何？という人は、以下の記事を御覧ください🙇🏻
👉 [JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事](https://qiita.com/NOMURA_keibyou38/items/06a3218de3ff480ce9de)

目次
・ 導入パターン
・ インストールとTYpeScriptを使う準備 
　- 各種インストール
　- [プロジェクト作成の準備](https://qiita.com/NOMURA_keibyou38/items/2cbb5971cea1ef6e83f5#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90%E3%81%AE%E6%BA%96%E5%82%99) ← `VScodeもnode.jsもPCに入っている方はこちらから`
　- TypeScriptを使ってみる
・ 参考文献

# 導入パターン

TypeScriptには、導入方法が２つあります。
- npm（Node.jsパッケージマネージャー）経由
- TypeScriptのVisualStudioプラグインをインストールする

今回は、**npm経由**について紹介します。 
※ ただし、今回は、説明のために**VSCode**も利用します。他のエディタでも問題なく動作します。

また、スクリーンショットは**Mac**ですが、**Windows**も同じ手順で問題なく利用できます👍

# インストールとTypeScriptを使う準備
### 各種インストール
① まず、VSCodeを[このリンクから](https://code.visualstudio.com/download)インストールします。自分が持っているPCのOSに合わせて、選択しましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/84addbbb-d1a0-e201-7c05-d392379d1998.png)

また、nodeをインストールしていない場合は、nodeもインストールしておきましょう！[このリンクから](https://nodejs.org/en/)インストール出来ます。LTS版をインストールしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/3488ae2f-abdb-3e22-9c56-156643d38e6f.png)


② VSCodeとnode.jsのインストールが終わったら、VSCodeを開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/7cb55f3c-9a57-aab6-2ec5-ac2698bc4062.png)

③ VSCodeを開いたら`Terminal > NewTerminal`を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/31977441-8600-de3b-4792-c76a62ef44df.png)

### プロジェクト作成の準備

④ ターミナルが開けたら、TypeScript用のプロジェクトを作成します。まずは、ディレクトリ（フォルダ）を作成しましょう。


```bash
mkdir new-typescript
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/644c6748-d84d-0c3c-699b-909a612569c0.png)

⑤ ディレクトリを移動します

```bash
cd new-typescript
```

⑥ 次に、プロジェクト（パッケージ）を管理する`package.json`というものを以下のコマンドで作成します。

```bash
npm init
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/574a4483-89d5-ac19-b907-dee2b5402bd1.png)

⑦ 色々と効かれますが、全てエンターを押せば問題ありません。最後に、`Is this OK? (yes)`でエンターを押せば`package.json`が作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/92abbd16-a855-58a9-43c1-b70d4d819bf8.png)

⑧ `package.json`が出来たら、TypeScriptを以下のコマンドでインストールしていきます。これにより、このプロジェクト内でのみTypeScriptが使えるようになります。`package.json`に`typescript`の記述があれば問題ありません。

```bash
npm install typescript --save-dev
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/c08371db-bedb-d898-0373-78199fccaae3.png)

### TypeScriptを使ってみる

⑨ お疲れさまです！これで準備が整いました。次は、簡単にTypeScriptを触ってみましょう。新しく`.ts`がつくファイルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/54813e31-9f65-9bfc-9509-89b0f4d1e10b.png)

⑩ 以下のように、ファイルに記述します。
・`string`型の引数を持つ`sayHello`関数
・`sayHello`関数の呼び出し

```typescript
const sayHello = (name: string) => {
    console.log(`${name}さん、こんにちは！`):
}

sayHello('煉獄さん');
```

⑪ `'煉獄さん'`はstring型なので、`sayHello`にnumber型を入れるとどうなるでしょうか。
以下のように、警告を出してくれます。

```typescript
const sayHello = (name: string) => {
    console.log(`${name}さん、こんにちは！`):
}

sayHello('煉獄さん');
sayHello(1); // タイプ 'number'の引数をタイプ 'string'のパラメーターに割り当てることはできません
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/45d45c8b-1128-c5ab-d4bd-dbf9d48df719.png)


⑫ 最後に実行してみましょう！　この`.ts`ファイルはそのままでは、ブラウザでは読み込めません。そのため、`.js`ファイルに変換します。実行するには、以下のコマンドを実行します。

```bash
npx tsc hello.ts
```

⑬ さきほどのファイルは、TypeScriptの規則に違反しているので、次のようにエラーが発生します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/3791f2fe-48f5-b608-85dd-ae1f02d53185.png)

⑭ そのため、コードを修正し、再実行します。そうすると、`.js`ファイルが自動生成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1160002/7f8e6035-f505-09b8-de51-9dbf3ba200f9.png)

⑮ 最後に、`.js`ファイルを実行します。問題なく動作すれば、コンソールに`煉獄さんさん、こんにちは！`と表示されます。

```bash
$ node hello.js
煉獄さんさん、こんにちは！
```

以上です！
実際に、TypeScriptを触ってみて、一つ上のJavaScript体験を味わいましょう！！

@ ハンズオンも書いたので、さっそく使ってみたい人は是非！
　👉[【TypeScriptハンズオン①】男もすなるTypeScriptといふものを、女もしてみむとてするなり](https://qiita.com/NOMURA_keibyou38/items/8cb285900291df83957a)

# 参考文献
- https://www.typescriptlang.org/download
- https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49