要約

「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のルートになります。
空でも実行できます(デフォルトの値でコンパイルされるようですね?)。

設定例

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ファイル

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

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>

予定通りjsが機能したようです