初心者が学ぶ TypeScript 入門 Ver.1.0

# 前回のあらすじ

[TypeScript入門 Ver.0.2](https://qiita.com/ikkitang/items/5ee36fe5786893be5eee)

[TypeScript入門 Ver.0.5](https://qiita.com/ikkitang/items/a5b7fe752dd70eb15fc5)

TypeScriptを扱うにあたって、node.jsを一度勉強してみる事にした。

- Hello World 
- URL ルーティング
- HTMLファイルの読込
- テンプレートエンジンの使用

# さて、ついに本題！！ TypeScript!

# そもそも TypeScript とは

> TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。
(Wikipediaより)

[公式サイト](https://www.typescriptlang.org/)

- JavaScriptによる大規模開発に対応するために設計された言語
- JavaScriptのスーパーセットであり"静的型付け"が大きな特徴であり、コンパイルする事でJavaScriptのコードに"トランスパイル"される。

取り敢えず、TypeScriptで書いてコンパイルしてjsにしてつかう、って感じで使ってみる。

# TypeScript書いてみる。

## まず開発環境構築

```terminal
# node 環境を作成
$ npm init -y
# typescriptをinstall
$ npm install --save-dev typescript
# Node.jsの型定義ファイルを取得
$ npm install --save @types/node
```

次に TypeScriptのコンパイル設定を行う。

```terminal
$ touch tsconfig.json
```

```json:tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "sourceMap": true,
    "types" : ["node"]
  },
  "exclude": [
    "node_modules"
  ]
}
```

## ディレクトリ構成を作る。

開発を進めるにあたって、特に指定等は無いですが、より把握しやすいように、という意味もこめて、以下のような構成ですすめていきます。

```
/
├node_modules ... ライブラリ管理
├src/ ... typescriptファイルを入れる。
│└app.ts
├package-lock.json
├package.json
└tsconfig.json
```

# 実際に書いていく

- まずは Hello World

```typescript:src/app.ts
console.log("Hello! Node.js × TypeScript");
```

かけたぞ！ 

## TypeScriptのビルド

ビルドしてみる。

```terminal
# ルートディレクトリ上で実行.
$ node_modules/.bin/tsc
```

ビルドすると2ファイルが追加されたぞ！

```diff:差分

├src/ ... typescriptファイルを入れる。
+││app.js
+││app.js.map
│└app.ts
```

## typescriptをコンパイルしたファイルを実行
```terminal
$ node src/app.js
Hello! Node.js × TypeScript
```

きた！！ やったぞ！ マスターした。

（これ・・・コンパイルしただけじゃん。。。) 

## 型アノテーションをつけてビルドしてみる。

```typescript:src/app.ts
let message : String = '';
message = "TypeScript World"
console.log("Hello!" + message);
```

ビルドするとこうなった。

```javascript:src/app.js
let message = '';
message = "TypeScript World";
console.log("Hello!" + message);
//# sourceMappingURL=app.js.map
```

## 途中で別の型の値をいれてみる.

```typescript:src/app.ts
let message : String = '';
message = 2;
console.log("Hello!" + message);
```

ビルドするとこうなった。

```terminal
$ node_modules/.bin/tsc
src/app.ts:2:1 - error TS2322: Type '2' is not assignable to type 'String'.


2 message = 2;
  \~~~~~~
```

おお！ちゃんと弾いてる。 `2 is not assignable to type 'String'` 
 ちゃんと型チェックしてくれてていい！


## if文とかどうなの？

`if (評価式)` 良くも悪くも、 評価式に なんでも入れる事ができるのは JavaScriptの良さだったりするんだけど、どうだろう？ Swiftとかだと Bool型とか入れられない。

```typescript:src/app.ts
let value : number = 0;
if (value) {
    console.log("定義済み!");
} else {
    console.log("未定義");
}
```

ちなみに 数値型は number なのねー。

さて、ビルドしてみる。 お、通ったｗ

```javascript:src/app.js
let value = 0;
if (value) {
    console.log("定義済み!");
}
else {
    console.log("未定義");
}
//# sourceMappingURL=app.js.map
```

## 違う型は比較できる？

```typescript:src/app.ts
let value : number = 1;
let str : String = "1";

if (value == str) {
    console.log("同じ");
} else {
    console.log("違う");
}
```

さて、ビルドしてみる。 お、失敗するねー。

```terminal
$ node_modules/.bin/tsc
src/app.ts:4:5 - error TS2365: Operator '==' cannot be applied to types 'number' and 'String'.

4 if (value == str) {
      ~~~~~~~~~~~~

```

型違いだからNGだよ、と。

# まとめ

取り敢えず、ざっと書いてみた。

JS部分の良くも悪くも雑（褒め言葉です！！）な部分はそのままに硬さを出した書き方ができるな、って印象。

これなら僕も JSが好きになれそう。

あ、よりJSが好きになれそう！

# 宣伝

転職をきっかけにいろいろな試みをやってます。

## ほぼ日AWS

[ほぼ日AWS](https://ikkitang1211.hatenablog.jp/archive/category/%E3%81%BB%E3%81%BC%E6%97%A5AWS)

AWSの各ソリューションについて 「このソリューションはどういうもの？」 って観点でまとめてみたものです。

## もくもく独書 for Swift実践入門

[もくもく独書 for Swift実践入門](https://ikkitang1211.hatenablog.jp/archive/category/Swift%E5%AE%9F%E8%B7%B5%E5%85%A5%E9%96%80)

Swift実践入門の書籍を毎日読みながら必要に応じてコードを書いてまとめていっているものです。