search
LoginSignup
27

More than 5 years have passed since last update.

posted at

updated at

Organization

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

これは WebStorm / PhpStorm Advent Calendar 2014 の10日目(12/10)の投稿です。

WebStorm ではずいぶん前に TypeScript のサポートがされています。今回は(いまさらながら)、WebStrom で TypeScript を簡単に触ってみようと思います。

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

前提環境

OS:Mac OS X 10.9.5
WebStorm:9.0.1

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

TypeScript:1.3.0.0
TSD:0.5.7

手順

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

$ npm install -g typescript

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

$ tsc -v

message TS6029: Version 1.3.0.0

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

スクリーンショット 2014-12-09 17.39.34.png

スクリーンショット 2014-12-09 17.40.18.png

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

スクリーンショット 2014-12-09 17.40.53.png

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

スクリーンショット 2014-12-09 17.41.44.png

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

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

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

スクリーンショット 2014-12-09 17.45.22.png

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

スクリーンショット 2014-12-09 18.43.01.png

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

スクリーンショット 2014-12-09 18.43.35.png

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

$ node helloworld.js

スクリーンショット 2014-12-09 17.46.30.png

ちゃんと動きました^^

ちなみにブラウザで動作確認する場合は、次のような index.html を作成し $ open index.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>

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

上記の例ではサードパーティのライブラリを使っていないので良いのですが、使ってる場合は 型定義ファイル がないと型エラーになってしまいます。

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

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

導入

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

$ npm install -g tsd

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

$ tsd init

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

スクリーンショット 2014-12-09 17.59.44.png

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

$ tsd query jquery

>> tsd 0.5.7

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

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

$ tsd query jquery --action install --resolve --save

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

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

スクリーンショット 2014-12-09 18.04.24.png

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

スクリーンショット 2014-12-09 18.06.02.png

おわりに

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
27