Unix環境で作ったTypeScriptプロジェクトをVisual Studioでも有効に利用する

この記事は[TypeScript Advent Calendar 2014 20日目](http://qiita.com/advent-calendar/2014/typescript)です

# 目的
個人で作るときや社内のプロジェクトとかだとおそらくメンバーの環境が揃っていると思いますが、ハッカソンなどをやるときにメンバーの環境が揃ってないことがあると思います。

今回はMacやLinuxのメンバーでTypeScriptのプロジェクトを作り始めたけど、メンバーにWindows使いが居てVisual Studioを使いたいとなったときに、どうVisual Studioのプロジェクトに既存のソースを取り込んでいくのがいいかを検討します。

# 環境

- Windows 8.1
- Visual Studio 2013 Community Edition

## プロジェクトにすでに存在しているファイル
TypeScriptファイルはコンパイルしたら`src`ディレクトリから`app`にgruntで移動させる。
`index.html`も移動させて`app`ディレクトリだけ公開することを想定している。

```
(/) --- Gruntfile.js
     |- package.json
     |- src
         |- ts
             |- main.ts
         |- index.html
     |- app
         |- js
```

```js:Gruntfile.js
module.exports = function (grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        typescript: {
            main: {
                src: ['src/ts/**/*.ts'],
                dest: 'app/js/main.js',
                options: {
                    module: 'amd',
                    target: 'es5',
                    sourceMap: true
                }
            }
        },

        copy: {
            main: {
                files: [
                    {
                        expand: true,
                        src: ["index.html"],
                        cwd: 'src/',
                        dest: "app/",
                        filter: 'isFile'
                    }
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-typescript');

    // Default task(s).
    grunt.registerTask('compile', ['typescript']);
    grunt.registerTask('deploy', ['compile', 'copy']);
    grunt.registerTask('default', ['deploy']);
};
```

# 実行
## Visual StudioでTypeScriptプロジェクトを作成する
![キャプチャ1.PNG](https://qiita-image-store.s3.amazonaws.com/0/6295/29c5a593-02fe-4aa8-0368-f4bc62c35cea.png)

「ソリューションのディレクトリを作成」のチェックを外すことで、Visual Studio特有のソリューションとプロジェクトディレクトリが作られなくなり、今のディレクトリ構造を維持できます。

![キャプチャ2.PNG](https://qiita-image-store.s3.amazonaws.com/0/6295/e66241db-fffc-e2ba-5865-9274a5e31ce4.png)

![キャプチャ3.PNG](https://qiita-image-store.s3.amazonaws.com/0/6295/f652764d-f2f8-89d8-ca73-b6e81e937764.png)


作られたプロジェクトに存在するファイルは削除して構いません。

## 既存のファイルをVisual Studioプロジェクトに取り込む
プロジェクトディレクトリに既存のファイルを移動させる。
![キャプチャ4.PNG](https://qiita-image-store.s3.amazonaws.com/0/6295/b1bde419-3686-a3d7-20e6-8b8709e7d9b5.png)

メニューからプロジェクトディレクトリ内のファイルをすべて表示させるようにする。
![キャプチャ5.png](https://qiita-image-store.s3.amazonaws.com/0/6295/8309b722-ffbc-be6d-b097-f801d28f646c.png)

表示されたファイルを右クリックして「プロジェクトに含める」をぽちぽちしていく。
![キャプチャ6.png](https://qiita-image-store.s3.amazonaws.com/0/6295/55c84200-7d19-bfa6-a039-939baac0899f.png)

![キャプチャ7.png](https://qiita-image-store.s3.amazonaws.com/0/6295/5996def1-94fc-1fc3-2ad4-09b806013a92.png)


これでVisual Studioに既存のプロジェクトを取り込むことができました。
Visual Studioの機能を使って存分にTypeScriptを書きながら、MacやLinuxと共同でプロジェクトを進めることができますね。

# まとめ
自分が実際にハッカソンをやったときにこれに気付けなくて、結局Visual Studioとは別に快適ではあるもののIntellij IDEAを使って書いていました。
Visual Studioも拡張されていて[Task Runner Explorer](https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708)や[Grunt Launcher](https://visualstudiogallery.msdn.microsoft.com/dcbc5325-79ef-4b72-960e-0a51ee33a0ff)を入れることでgruntやnpmのコマンドがVisual Studioで実行できたり、[Package Intellisense](https://visualstudiogallery.msdn.microsoft.com/65748cdb-4087-497e-a394-2e3449c8e61e)で補完を利かせることができます。
さらにVisual Studio 2015ではTask Runnerも標準で搭載されたり、project.jsonを作ることでプロジェクトの準備もできるようになるらしいので便利な世界が広がって、TypeScriptを書くのも楽になっていくでしょう。


全然TypeScriptアドベントカレンダーっぽくないね！ごめんね！！！