【超入門】TypeScriptをプロジェクト内にインストールして動かしてみる

# 要約
- 「5分で実行TypeScript」みたいなテキストがあったので動かしてみた
- グローバルにTypeScriptをインストールするのはポータビリティが下がるので避けたかったが、`-g`をつけないサンプルがすぐには見つけられなかったので、tsファイルをコンパイルできるようになるまでの手順を記録しておこうと思った

# 背景
仕事でフロントを少し触るもののはまだよくわからず、javascriptは静的型付けではないので大規模開発では大変そうという印象ばかり先行していたところ、型があるということで同僚にも勧められたTypeScriptを始めようと思いました。

### 目標
Microsoftの「TypeScript in 5 minutes」というテキストがあったのでこれにそってtsファイルをjsにしてみる。
https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tutorials/TypeScript%20in%205%20minutes.md

# 環境
Node.js: v9.7.1 (ndenv管理)
npm: 5.6.0

# コマンド
## package.json作成
```
% cd ~/typescript-tutorial-qiita
% npm init
```
とりあえず名前以外は全部yesにしておきます。

```package.json
{
  "name": "typescript-tutorial-qiita",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Toriyabot",
  "license": "ISC"
}
```

## typescriptのインストール
```
% npm install --save-dev typescript
```

```package.json
 11   "devDependencies": {
 12     "typescript": "^2.8.1"
 13   }
```
package.jsonのdevDependenciesにTypeScriptが入りました。

(参考)--saveと--save-devの使い分け
https://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95
## tsconfig.jsonの設定
tsconfig.jsonがあるディレクトリがTypeScriptのルートになります。
空でも実行できます(デフォルトの値でコンパイルされるようですね?)。

### 設定例
```JSON:tsconfig.json
{
    "compilerOptions": {
        "module": "system",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outFile": "../../built/local/tsc.js",
        "sourceMap": true
    },
    "include": [
        "src/**/*",
        "*.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

```
include, excludeはコンパイルに含めるかどうかなのでそのままの意味ですね。
ひとまずプロジェクトのルートに適当なtsファイルをあとで作るのでそれも指定しておきます。

(参考) tsconfig.jsonについて
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

## tsファイル
動かしてみるだけなので型アノテーションだけでコンパイルを試してみます

```TypeScript:greeter.js
function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Toriyabot User";

document.body.innerHTML = greeter(user);
```

```
npm run tsc greeter.ts
npm ERR! file ~/project/typescript-tutorial-qiita/package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected token } in JSON at position 182 while parsing near '...ied\" && exit 1",
npm ERR!   },
npm ERR!   "author": "Tori...'
npm ERR! File: ~/project/typescript-tutorial-qiita/package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm ERR! A complete log of this run can be found in:
npm ERR!     ~/.npm/_logs/2018-04-09T14_48_33_273Z-debug.log
```
おや、package.jsonの記述が足りなかったですね。

## tscの登録
scriptsに` "tsc": "tsc"`を追記しました。
tscはtypescript compilerの略です。

```package.json
{
  "name": "typescript-tutorial-qiita",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc": "tsc"
  },
  "author": "Toriyabot",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^2.8.1"
  }
}
```
```
% npm run tsc greeter.ts

> typescript-tutorial-qiita@1.0.0 tsc ~/project/typescript-tutorial-qiita
> tsc "greeter.ts"

```
```
% ls
greeter.js		greeter.ts		node_modules		package-lock.json	package.json
```
jsファイルが生成されました。

```greeter.js
function greeter(person) {
    return "Hello, " + person;
}
var user = "Toriyabot User";
document.body.innerHTML = greeter(user);
```
# 成果物の確認
```greeter.html
<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>
```
![スクリーンショット 2018-04-09 23.57.53.png](https://qiita-image-store.s3.amazonaws.com/0/66517/305c1258-2837-bdd0-21ce-638e388bd4f8.png)
予定通りjsが機能したようです :tada: