WebStorm で TypeScript を始めよう！《Advent Calendar 2014》


これは [WebStorm / PhpStorm Advent Calendar 2014](http://qiita.com/advent-calendar/2014/webstorm) の１０日目(12/10)の投稿です。

WebStorm ではずいぶん前に [TypeScript](http://www.typescriptlang.org/) のサポートがされています。今回は（いまさらながら）、WebStrom で TypeScript を簡単に触ってみようと思います。

> 手順を間違えていたらスミマセン.. 補足ください。

### 前提環境

OS：`Mac OS X 10.9.5`
WebStorm：`9.0.1`

今回の手順で結果的に導入されたものは次のとおり。

TypeScript：`1.3.0.0`
TSD：`0.5.7`

# 手順

まず `npm` コマンドで TypeScript をインストールします。

```shell:
$ npm install -g typescript
```

バージョンを確認してみます。

```shell:
$ tsc -v

message TS6029: Version 1.3.0.0
```

WebStrom で適当なプロジェクトを作り、`helloworld.ts` を作成します。

![スクリーンショット 2014-12-09 17.39.34.png](https://qiita-image-store.s3.amazonaws.com/0/35733/da647dac-eb91-318d-327b-3158752c74ec.png "スクリーンショット 2014-12-09 17.39.34.png")

![スクリーンショット 2014-12-09 17.40.18.png](https://qiita-image-store.s3.amazonaws.com/0/35733/79624aa4-de0e-32e0-184a-23646d047b42.png "スクリーンショット 2014-12-09 17.40.18.png")

すかさずウォッチャーに追加するか聞かれるので、追加します。

![スクリーンショット 2014-12-09 17.40.53.png](https://qiita-image-store.s3.amazonaws.com/0/35733/b080c651-6daf-04f5-4358-fa6471366839.png "スクリーンショット 2014-12-09 17.40.53.png")

ウォッチャーの設定は、私の場合はデフォルトのままでOKでした。

![スクリーンショット 2014-12-09 17.41.44.png](https://qiita-image-store.s3.amazonaws.com/0/35733/72999125-933a-ee9b-0b91-c5e846b494e1.png "スクリーンショット 2014-12-09 17.41.44.png")

試しに `helloworld.ts` に次のように記載してみます(よくあるサンプル)。

```typescript:helloworld.ts
class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    getDist() {
        return Math.sqrt(this.x * this.x +
        this.y * this.y);
    }
}
var p = new Point(3,4);
var dist = p.getDist();

console.log('Hypotenuse is: ' + dist);
```

すると自動的に `.js` ファイル および ソースマップが作成されます。

![スクリーンショット 2014-12-09 17.44.46.png](https://qiita-image-store.s3.amazonaws.com/0/35733/da001113-fb2b-a72d-8e01-0f7493bb0ee5.png "スクリーンショット 2014-12-09 17.44.46.png")

`.js` ファイルの中身を覗いてみると、コンパイル後のコードが確認できます。

![スクリーンショット 2014-12-09 17.45.22.png](https://qiita-image-store.s3.amazonaws.com/0/35733/8d309e23-cc7c-38d0-9d87-6f231e964c0f.png "スクリーンショット 2014-12-09 17.45.22.png")

もちろん、TypeScript のコード補完も働き、

![スクリーンショット 2014-12-09 18.43.01.png](https://qiita-image-store.s3.amazonaws.com/0/35733/419ae4ce-b7b2-60c6-d9d4-1d7e82a34c12.png "スクリーンショット 2014-12-09 18.43.01.png")

型チェックもリアルタイムでされます。

![スクリーンショット 2014-12-09 18.43.35.png](https://qiita-image-store.s3.amazonaws.com/0/35733/add520f4-e99b-af4e-5c28-345ab4dedd8d.png "スクリーンショット 2014-12-09 18.43.35.png")

コンソールから `node` コマンドで実行してみます。

```shell:
$ node helloworld.js
```

![スクリーンショット 2014-12-09 17.46.30.png](https://qiita-image-store.s3.amazonaws.com/0/35733/586baa63-0477-89fa-29fb-e953410458d1.png "スクリーンショット 2014-12-09 17.46.30.png")


ちゃんと動きました^^

ちなみにブラウザで動作確認する場合は、次のような `index.html` を作成し `$ open index.html` とすればブラウザが開きます。

```html:index.html
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Sample</title>
  <script type="text/javascript" src="helloworld.js"></script>
</head>
<body>
</body>
</html>
```

# 型定義ファイルを導入する

上記の例ではサードパーティのライブラリを使っていないので良いのですが、使ってる場合は [型定義ファイル](https://github.com/DefinitelyTyped/tsd) がないと型エラーになってしまいます。

今回は試しに、jQuery の型定義ファイルを導入してみます。

> もしや WebStorm に型定義ファイルをサポートする機能があるのかもしれないが、よく分かっていない..

## 導入

まだ導入していなければ、`TSD` を npm コマンドでインストールします。

```shell:
$ npm install -g tsd
```

この対象のプロジェクト配下で、次のようにします。

```shell:
$ tsd init
```

すると `tsd.json` が新設されます。

![スクリーンショット 2014-12-09 17.59.44.png](https://qiita-image-store.s3.amazonaws.com/0/35733/3ec0e6ac-2e5f-35cb-e02a-d91c446e6de2.png "スクリーンショット 2014-12-09 17.59.44.png")

jQuery の型定義ファイルが存在するか確認します。

```shell:
$ tsd query jquery

>> tsd 0.5.7

 - jquery/jquery.d.ts : <head> : 2014-12-07 17:11
```

存在するようなので、プロジェクトへインストールします。

```shell:
$ tsd query jquery --action install --resolve --save
```

`typings` ディレクトリ配下に、型定義ファイルがインストールされました。

> ちなみに上記コマンドの `--resolve` は付随する依存モジュールを、`--save` は `tsd.json` にモジュール名を追記してくれるのだと理解しています。

![スクリーンショット 2014-12-09 18.04.24.png](https://qiita-image-store.s3.amazonaws.com/0/35733/b1e63bec-6c3f-da03-1256-e76ac5bdb5d4.png "スクリーンショット 2014-12-09 18.04.24.png")

今後は自身の書く TypeScript ファイルの冒頭で、次のように型定義ファイルを指定すればOKです。

![スクリーンショット 2014-12-09 18.06.02.png](https://qiita-image-store.s3.amazonaws.com/0/35733/138a4a32-683d-64f2-9e25-415e4b48bc70.png "スクリーンショット 2014-12-09 18.06.02.png")

# おわりに

まだまだ導入ですが、WebStrom で TypeScript を始める手順を紹介しました。

TypeScript の静的な型システムは強力ですし、せっかく WebStrom でサポートされているので是非つかってみてもらえればと思います。（薦めるほど自分は使えてないですが^^;）