Developing in TypeScript on a Mac with Sublime

Luke Hoban [MS]

Within the TypeScript team, many of us have Macs that we use for development. We’ve also heard from some of you that you’d like to use your OS X machines to build TypeScript projects. So recently, we’ve been focusing on building a natural and rich developer toolset for Mac and Linux fans.

Starting with TypeScript 1.5, TypeScript projects have complete tooling support in OS X using Sublime, Atom, and Visual Studio Code.

In this article, we’ll be talking about how to set up your Mac for developing TypeScript using Sublime.

Getting started

First, install the TypeScript compiler, which you can get via npm.  You can install this once you have node by installing the ‘typescript’ package.  Since this installs globally, we run the command using ‘sudo’:

> sudo npm install -g typescript

Next, we’ll add the TypeScript support for Sublime.  The TypeScript package is available via Package Control.  Once you have Package Control installed, you can search for the TypeScript package.  First, bring up the command palette with Cmd+Shift+P.

Next, select Package Control: Install Package and search for ‘typescript’.  You’ll see there are a few packages that match ‘typescript’, but the one we want is simply ‘TypeScript’.

After you’ve installed the ‘TypeScript’ package, you’ll be able to begin working with TypeScript projects.  You can do a quick test to make sure everything is working by starting up a new TypeScript (*.ts) file.  Let’s make a hello.ts:

// hello.ts
function greet(msg: string) {
  console.log(msg);
}

greet(42);

Notice that Sublime will help you as you type in the example, giving auto-complete help as you dot into console and argument help as you begin the call into log.

TypeScript also warns us against passing a number when we intended to pass a string by squiggling under the number and changing the status at the bottom of the editor when we click on the squiggled text.  This is pretty helpful for finding simple bugs before we deploy our project.

Now that we’re set up Sublime to work with TypeScript, the next thing we want to do is to create a TypeScript project.  Starting with 1.5, TypeScript supports a lightweight project file called ‘tsconfig.json’.  We can write a tsconfig.json for our hello app:

The ‘tsconfig.json’ file has two main parts: the options passed to the compiler and the list of files.  In the example, I switch on source maps, so the TypeScript compiler will generate a .map file we can use to directly debug the TypeScript rather than the generated JavaScript.  I also list the files explicitly to show how you can control which files are included in the build.  For this example, this step is optional.  If you leave off the “files” section, ‘tsconfig.json’ will compile all *.ts files in the same directory.

We have all we need to build the app now.  We can open a terminal, cd to our project directory, and run the compiler with the ‘tsc’ command.

Oh right!  We forgot to fix the issue in ‘hello.ts’.  Let’s update hello.ts to pass in a string instead:

// revised hello.ts

function greet(msg: string) {
 console.log(msg);
}

greet(“Greetings, OS X”);

Now, when we re-run the build, the error goes away.  We can also run our file using node.

Debugging our app

If we look at our project directory, we’ll see the output JavaScript as well as the source map file we enabled earlier:

Let’s use the source map file so we can debug our TypeScript source.  To do so, we’ll create a small html page that will call our hello.js:

Next, we’ll open up Chrome and our index.html.  Opening the Developer Tools in Chrome via Option+Cmd+I or through the “More tools” menu, we can see the same output we saw running the app in the terminal earlier:

We can also work with the TypeScript we created by clicking on the “hello.ts:2” link to the right or switching to the Sources tab.  Notice how Chrome uses the source map file to map from the hello.js file back to the original hello.ts.

What’s next

We’re just getting warmed up.  There are a lot of resources to help you get going.  You can browse the TypeScript handbook to learn TypeScript, ask the team and the TypeScript community questions via StackOverflow and the TypeScript GitHub site, and start working with a variety of JavaScript libraries by adding their type information to your project.  If you’re using TypeScript on a Mac and have some suggestions for how we can make the experience better, we’d love to hear them!

Luke Hoban [MS]

Follow