As I'm currently learning TypeScript, I wondered if I could apply it to my little Ruby on Rails project Strafforts (A Visualizer for Strava Estimated Best Efforts and Races), so that I could use this real world project to help me learning TypeScript quickly.
Even though there is a gem called typescript-rails which is a Rails asset pipeline wrapper for the TypeScript, I have decided to create my own quick and hacky way of introducing TypeScipt to my Ruby on Rails project, mostly due to the following reasons:
- The purpose is to learn TypeScript with all its setup process, so why not start from scratch by myself as I'm not trying to create a nice and complete solution for everyone.
typescript-railsproject hasn't been updated for almost a year. Is it well maintained and fully compatible with the latest Rails 5.1.x?
- Rails 5.1.x supports Yarn now. Why not try the traditional Node.js way instead of the Rails way?
Therefore I have added TypeScript support to my Ruby on Rails project in a quick and hacky way.
- Install Yarn
- Install TypeScript through Yarn
- Write TypeScript
- Add tsconfig.json
- Add Rake build task
To install Yarn, please follow the official installation guide here. For macOS users, simply use homebrew
brew install yarn.
Install TypeScript through Yarn
For projects with Rails 5.1 or above,
package.json should have been created automatically when app was created. Otherwise for older versions of Rails, use
yarn init to create a
Add TypeScipt package
Use the following command to add TypeScript package to the project.
yarn add typescript
It will create
node_modules folder under project root and a
yarn.lock file containing information about the package versions. If installation is successful, TypeScript binary should be accessible in
Add to assets paths
For users with Rails 5.1 or above, this step should have been done automatically. But for users with older Rails versions,
node_modules folder needs to be added to Rails assets paths manually.
To do so, add the following line to
For users with Rails 5.0 or under, once
node_modules folder is created, remember to add it together with Yarn's error log file to
.gitignore, so that they will not be commited to the repository.
tsconfig.json to the project.
The presence of a
tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. It specifies the root files and the compiler options required to compile the project.
Here for example, create a
tsconfig.json file with some common options, and tell compiler to convert
generated/welcome.js, where everything in
generated folder can be added to
Add Rake build task
rake assets:precompile task, so that every time
rake assets:precompile is executed,
assets:tsc will be run first.
For example, add a
assets.rake file to
lib/tasks folder with the content above, then call the following command to compile TypeScript.
A simple demo for this tutorial is hosted on GitHub.