はじめに
こんにちは！TypeScript好きですか！？僕はTypeScript大好きです！
RailsはCoffeeScriptが主流ですよね、TypeScript使いたいですよね？使いましょう！
Railsのバージョンは4.1です。Rails4で使いたいですよね！
ちなみに僕はRailsは初心者です。よくわかっていません。
整えたい環境
- Rails v=4.1
- TypeScript使いたい
とりあえずググってみた
とりあえずいろいろググってみたら下記のような参考記事が出てきました。
Rails で TypeScript を動かそうとして失敗した記録
RailsでTypeScript、再び
1年以上前の記事なのでちょっと古いのですが、typescript-rails というgemがあることはわかりました。
とりあえず動いたっぽいということなので参考までに導入してみましょう。
とりあえず typescript-rails を試す
公式はこちらです。
github.com/kgz/typescript-rails
READMEに気になる一文が…。
Looking for a new maintainer: Since I am no longer working with TS in my day to day life, and there are some major changes coming up, I'm looking for someone who wants to take over development of this gem
もうメンテされてないようです…。とりあえずインストールだけでもしてみましょう。
Gemfileにgem "typescript-rails"を追記してbundle installしてみましょう。
setup
% cd /path/to/rails4-project/
% vim Gemfile
gem "typescript-rails"
% bundle install
インストールできたらtsファイルを書いてみましょう。
ファイル名は*.js.tsの形式で書きます。
% vim app/assets/javascripts/app.js.ts
console.log(0);
動作確認
それでは動かしてみましょう。
% rails s
「へんじがない、ただのしかばねのようだ」
やっぱ動かないのかなーと思ってレンダリングされたソースをみてみました。
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/javascripts/app.js.ts.js"></script>
<script src="/assets/application.js?body=1"></script>
なんかパスおかしい…。Rails4に対応していないようです…。
Rails4に対応したプルリクがないか調べてみる
とりあえずgithub.com/kgz/typescript-railsのプルリクやissueをみてみると、同じ問題にぶちあたっている人がいました。
Rails 4 support
https://github.com/kgz/typescript-rails/issues/10
どうやら別の人がRails4対応してプルリクを投げていたようですが、ここのやり取りを見ればわかる通り、もうメンテはされないっぽいです…。
Updated with two fixes for Rails 4 and Ruby 2.0.
https://github.com/kgz/typescript-rails/pull/11
Rails4に対応されたリポジトリをForkして使ってみる
とりあえずRails4に対応したForkされたリポジトリがあるのでそれをForkして使えるようにしてみます。
Rails4に対応したプルリクを投げていたリポジトリ
github.com/brainling/typescript-rails
上記リポジトリをForkして使ってみましょう。ForkしたらGemfileを更新してbundle installします。
% vim Gemfile
gem "typescript-rails", '>= 0.1.3', git: "https://github.com/funnythingz/typescript-rails.git"
% bundle install
動作確認
% rails s
さてどうでしょう…？
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/app.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
ファイルも参照できますね！やりましたね！
TypeScriptを書いてみる
ここまでできたらTypeScriptを書いてみましょう！
% vim app/assets/javascripts/app.js.ts
とりあえずmoduleとclassをつかってみます。
module Rails {
export class Application {
constructor() {
console.log('Typescript ready.');
}
}
new Application();
}
動作確認
var Rails;
(function (Rails) {
var Application = (function () {
function Application() {
console.log('Typescript ready.');
}
return Application;
})();
Rails.Application = Application;
new Application();
})(Rails || (Rails = {}));
「なんということでしょう。」
ちゃんとTypeScriptがコンパイルされてJavaScriptになっているではありませんか！やりました！
Rails4でTypeScriptが動いた！
細かいことはいろいろまだ試していませんが、これからがっつり試してみたいと思います。
さよならCoffeeScript！こんにちはTypeScript！
【追記】typescript-railsにメンテナー登場！【朗報】
TypeScript及びRailsファンの皆様、朗報です！typescript-railsのメンテナーにgfxさんが登場しました！これは嬉しい、嬉しすぎる！
今すぐGemfileを更新しよう
% vim Gemfile
gem "typescript-rails", '~> 0.3.0'
タッタターン！
% bundle install
確認してみましょう。
% gem list | grep 'typescript'
typescript-node (1.1.0)
typescript-rails (0.3.0)
typescript-src (1.0.1.2)
やりましたね！これでガクブルすることなく安心してRailsでTypeScriptを使うことができるようになると思います。
日々メンテナーの方に感謝しながらプログラミングしていきたいと思う今日このごろでした。
おしまい。