Modern Meteor Development with TypeScript

Introduction

I have written this series because I found that a lot of people, like myself, love using Meteor, but haven’t had the time to investigate how to integrate TypeScript.

I spent a lot time exploring various approaches, and I hope this can help getting all of us the benefits of optional static typing, or at least move us closer towards it.

PS: If you stumble upon something deprecated please let me know.

Why TypeScript?

TypeScript builds on top of modern JavaScript by adding types, interfaces and more.

Modern Javascript brings classes to the table, and TypeScript extends upon that with interfaces and more.

Modern Javascript

A lot of improvements have been made to JavaScript itself since 2014, so if you are not familiar with ES2015+, i highly recommend checking out this list of new features before diving into TypeScript.

TypeScript on top

Now that you know about modern JavaScript, go have a look at this video by Anders Hejlsberg introducing the core concepts of TypeScript.

The main takeaways from the video is that optional static types allow you
to add types to your code. These types makes it easier for you, your development environment, and your colleagues, to understand.

TypeScript replaces the runtime errors of an unstable javascript era with compile time errors, warning and assistant while still in the development phase. This becomes increasingly important as your codebase grows, which is why TypeScript is very powerful for large apps.

Excellent tooling

The tooling of TypeScript is great, featuring integration with most major editors out of the box, and a whole lot of build tools.

But is TypeScript ready for adoption? Yes!

I think all of us interested in web and mobile development can agree, that if something grows faster than React, it growing pretty fast.

Source: npmcharts.com, Comparing TypeScript and React downloads from npm.

What you will learn in this series

1. Integrate TypeScript with Meteor

Due to prior work does it at this point only require very few steps to get started using TypeScript in Meteor. We will in this part cover:

  • How to seamlessly integrate TypeScript into the Meteor build system.
  • How to configure the TypeScript compiler to suit your application structure, build target etc..

2. Add type definitions to a library

When TypeScript is installed and you start adding types to your code, you’ll soon realise that some of the libraries you use doesn’t use types. This can be resolved by adding a type definition for the relevant library. We will in this part cover:

  • How the installation of type definitions has changes lately
  • How to install type definitions with “npm”
  • How to install type definitions with “typings” (legacy)

3. Linting

Linting suddenly became more powerful than ever, due to type checking. In this part will we cover:

  • The current landscape of TypeScript linters
  • How to install a linter (TSLint)
  • How to configure the linter to match your coding style

4. View layers

TypeScript doesn’t belong to any specific doesn’t discriminate between view layers, and it will work with all of them. We will in this part see how to create a stateless and a statefull component with:

  • Angular (the new one)
  • Blaze
  • React
  • Vue (2)

They will end up looking like this:

5. Straightforward migration

One of the greatest features of TypeScript is that it is a superset of JavaScript. It means that you can make gradual migration and convert a single file at a time, without breaking your app. We will in this part cover:

  • Steps of the gradual migration process
  • How to catch more runtime errors as compile time warnings.

Learn more about Modern Meteor Development with TypeScript: