TypeScript, WTF?!

By  on  

If you hang around in the JavaScript community, along with left-pad you almost have certainly heard of TypeScript. Having large frameworks, like Angular 2 and EmberJS embrace it have given it a lot of focus. I would like to think too, that Dojo 2 being built on TypeScript adds something to the conversation and I would like to explain in part why you might want to spend time getting to understand TypeScript as well.

Microsoft, Bleurgh

I remember hearing the announcement of TypeScript from Microsoft and immediately dismissed it. I generally did that with most things from Microsoft. They were in my eyes, like a lot of large software enterprises, a good place to crush innovation and focus on brand and marketing. At the time, I was a fairly senior IT manger by day, and closet Dojo committer by night. I had an endless stream of software companies who had solutions to my problems, no matter what my problem was and on the surface, I thought TypeScript was another way to tie enterprises into a Microsoft roadmap.

I was totally wrong.

Fanboy Moment

Part of the understanding of why TypeScript is different, in my opinion, I have to self a bit of fanboyness for a moment. Anders Hejlsberg. As I started to look into TypeScript, I realised that name was vaguely familiar. In the late 80s and early 90s, I was using Turbo Pascal and when Delphi came out, I migrated to it. I loved it and often preached the religion of Delphi to whomever might listen. Direct programming started to become less and less relevant to my day job, but Delphi was my safety language whenever I wanted to hack something together myself. I remember the day when I heard that "big ole mean" Microsoft had "stolen" the core of Delphi from Borland to work for Microsoft.

Of course a few years later, I started hearing about C# and I dismissed it as a "Delphi ripoff" at first, but slowly, it seemed to evolve and actually go beyond what Delphi helped bring to the world. Of course, a large part of C# owes its existence to Anders.

When I made the connection that Anders vision (and code) were large parts of Turbo Pascal, Delphi, C#, and now TypeScript, that made me excited.

It Ain’t Pretty, But It’s All We Got

I don’t really think there are many, if any, JavaScript developers wake up in the morning and say "I am really glad I work with JavaScript, it is such a wonderful language." Brenden Eich often finds himself as chief JavaScript apologist. JavaScript is a perfect example of the Law of Unintended Consequences. It has exploded though, for lots of various reasons. Even with huge detractors and critiques, it is a reality that cannot be denied.

Maybe it could be compared to English, it isn’t a perfect language, it has lots of broken parts, a load of dialects of which only a subset of the language could be considered "globally understood" and many many people don’t really use it all that well. The universal language should have been well thought out and far more rational and organised, but I don’t speak Esperanto, do you? We are not going to get rid of English.

But what if we could add some markup for English, so we could organise our language a bit better? You could take English and optionally apply some rules to it. Maybe something like markdown even, that allows you put things like headings and hyperlinks and code blocks, all the while not breaking the underlying language? Sounds good, well that is TypeScript.

I Don’t Understand

The flexibility and unstructured nature of JavaScript made it "easy" to code, but it never was easy to scale. Scale in large complex maintainable code bases, scale in the ability for people to understand the code, scale in others using your code. The whole way the web works today is through extension and interaction and the biggest roadblock to that is understanding intent.

The first step was to stop writing JavaScript code inline in our HTML markup and breaking it out into separate files we could maintain, creating functions:

function myGreatApi(options) {
  /* Hopefully no one needs to read this */
}

Ok, that is great, but I would still have to write up some documentation, so someone could use my code. So maybe we could agree on something like JSDoc:

/**
 * My Great API does something great, just use it
 * @param   {Object} options Some options I need...
 * @returns {Object}         The results of my great API
 */
function myGreatApi(options) {
  /* Hopefully no one needs to read this */
}

Ok, that is better, but what if I wanted options to be optional? What if I wanted to express what properties I expected in options? How do I describe what the return value is a bit better… I could in theory add this all to really complex JSDoc, but that isn’t really maintainable and it isn’t actually enforced (though things like Closure Compiler can give me hints that I might be abusing it). What if there was some way of describing this in a way that could allow someone else just consume this without know a huge amount about it?

interface MyGreatApiOptions {
  /**
   * The URL target for my API
   */
  target: string;

  /**
   * Translate from one language to another
   */
  translate?: boolean;
}

interface MyGreatApiResult {
  /**
   * The headers returned from the request
   */
  headers: { [header: string]: string };

  /**
   * The response
   */
  response: string;
}

/**
 * My Great API does something great, just use it
 * @param options Some options I need, maybe, if you want
 */
function myGreatApi(options?: MyGreatApiOptions): MyGreatApiResult {
  /* now, no one has to read this */
}

Now, not only do I have a completely documented API, it is enforceable at compile time and it many IDEs, code completion is available, so a developer can receive real time insight into how the APIs are consumed.

I have found that TypeScript allows me to not only explain my APIs to others, it helps me structure my code and requires me to remember less about the code I have written, focusing on writing productive code and less time reading and re-reading code I had already written.

Openness

One of the best things about TypeScript is its openness and transparency. It is a first class Open Source project. The team have not only open sourced the TypeScript compiler, they continue to raise the standard and pressure the rest of Microsoft to find ways to open source the tools that they rely open. For example, the tool that builds the browser library definitions has been open sourced. Also, the intelligence that they used to create the in browser editor was released as part of the open sourcing Visual Studio Code.

Hook

Developers are a needy bunch and TypeScript being developed in the open means that people can often express those needs.

Needy Developers

Also, sometimes developers confuse open source with democracy. Open source is about being open, allowing people to see your code and your development process and being transparent about what decisions you make and why. It doesn’t mean because you "really need" something that it will be included. TypeScript has articulated their design goals, which is great reference point for making decisions about the direction of the language.

TypeScript doesn’t (yet) have the concept of plugin transformations, which differs it from the likes of Babel. I can see how such functionality could very well satiate needy developers, I can almost see it being a foot-gun for a language that is trying its best to help developers not write "bad" code. Already we are seeing in the Babel community poorly written and maintained transforms that cause all sorts of carnage and problems.

TypeScript is still relatively "young" and therefore it is growing daily, but in my opinion it has largely grown under really good stewardship and in the right directions. There are some significant changes coming in TypeScript 2.0 that continue to deliver on the promise of making JavaScript scale. This includes a whole rewrite of the way types are analysed in the flow of the code and an opt-in feature that starts to deal with logic errors around the flexibility of things being undefined or null in JavaScript.

Given the youth though, TypeScript is still mature beyond its years. By being a superset of JavaScript, it isn’t reinventing the wheel, it is building on top of the language that, for good or bad, powers the web. Coupled with those being involved having a depth of experience in language construction and drawing upon the experience of everyone else by being open has really accelerated it to being ready for production now.

Finally...

So, if you haven’t taken a look at TypeScript, I have hopefully convinced you that it is something to at least worth a bit of your time. I personally believe it is part of a major cultural shift at Microsoft, but even if that isn’t important to your, it can be judged wholly on its own merits. It has some of the best minds focused on making JavaScript scale and the team is going about it in a way that is open and transparent. By embracing the reality of JavaScript and building on top of it, in my opinion TypeScript is transforming the common language of the web, for the better.

Kitson Kelly

About Kitson Kelly

Kitson Kelly is CTO at SitePen Inc. which provides services in building enterprise web applications. He is also the project lead on Dojo 2. He has been involved in the JavaScript community since 2008 and a Dojo committer since 2012.

Recent Features

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

Incredible Demos

  • By
    Chris Coyier’s Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • By
    CSS Vertical Center with Flexbox

    I'm 31 years old and feel like I've been in the web development game for centuries.  We knew forever that layouts in CSS were a nightmare and we all considered flexbox our savior.  Whether it turns out that way remains to be seen but flexbox does easily...

Discussion

  1. Julie

    Turbo Pascal….one of the first languages I programmed in! Thanks for a great article on TypeScript. I’m starting to open my eyes to Microsoft with the advent of TypeScript and Visual Studio Code.

  2. Ha, is it TypeScript week or something?

    Two days ago I published Static typing: the good parts, and three days ago Eric Elliot published The shocking secret about static types.

    Thanks for your article!

  3. chris-l

    I don’t really think there are many, if any, JavaScript developers wake up in the morning and say “I am really glad I work with JavaScript, it is such a wonderful language”.

    Well, I do. I do think is a wonderful language.

    • Kitson Kelly

      I suspected there were a few. Good to know they do exist.

    • Kyle

      Whatever dude. I’m one of those people who love JavaScript as well and I’d bet my life on JavaScript and babeljs before taking on a useless dependency like TypeScript.

      I find most cries for TypeScript indistinguishable from the fear drenched cries for Hungarian notation.

    • Joeri

      Funny you should say that, because the reasons to use typescript are analogous to the original reasons hungarian notation came into use. Hungarian notation still makes sense today, but not in the way the masses came to see it. See Joel Spolsky’s explanation of what it is, why it is useful, how it became misunderstood, and how it fell out of favor: http://www.joelonsoftware.com/articles/Wrong.html

      I have come full circle on this myself. I went from Delphi, C++ and Java to PHP and JavaScript because I was tired of strict typing and its tendency towards uglifying code and making everything cumbersome. Then I spent a decade living on the weak typing side of the fence, and now I’m back to Java and TypeScript. There’s nothing like experiencing a large long-lived weakly typed codebase to make a person appreciate the trade-offs that strict typing makes.

    • Sylvain POLLET-VILLARD

      Same here. I am really glad I work with JavaScript, it is such a wonderful language. I worked with many other languages but always came back to JS. It’s a shame so many people are trying to turn JS into Java while they did not took the time to learn the best parts of the language, such as prototypal OOP, first-class functions, type coercion, object descriptors…

    • weisk

      Seriously though. Considering the huge amount of javascript developers in the world, do you really think they all hate the language?

    • leptons

      I love Javascript and don’t find the need for anything like Typescript, and I work in teams of other Javascript developers who feel the same. Don’t believe the transpiler hype, don’t believe the typescript hype. It’s a small but very vocal community of bandwagon jumpers.

  4. angel mai

    what do you think about facebook flow?..for me it’s a step foward typescript, the type inference is great and you’ve incremental type, so you start with plain untyped js and gradually add types and works great, also is supported by babel, so you don’t feel away the js world

    • Kitson Kelly

      I think Flow isn’t maturing as fast as TypeScript. Personal opinion is that there is more momentum behind TypeScript, wider adoption and that if TypeScript had been further along, Flow wouldn’t have existed. In ways, Flow + Babel is just as un-JavaScripty as TypeScript. But in the end, they both solve similar problem spaces and anything that helps people produce better safer code is great!

  5. Kyle

    Cool story, until the library you need doesn’t have a TSD…

    • cybwn

      If your library doesn’t have type definitions, just use it as if it was pure JavaScript.

  6. Loïc

    I think that JavaScript is a fine language indeed, complex but fine. Its worst flaw is that most people expect it to behave like the others object-oriented languages. I do not know if these guys have been sleeping when they had their oo programming courses, but prototyping-oriented languages are object-oriented programming too.
    “Javascript, the good parts” should be a mandatory read for all Javascript coders, even ES6+ aficionados.
    Well, JavaScript is fine, but I do admit that NPM is a smoking pile of crap.

    About TypeScript, like every alternative language running on the same stack, just like JVM and CLR, the fact that it promotes platform fragmentation is really bad. It is just like the xkcd about standards said (https://xkcd.com/927/). People, as a lead programmer I tell you, you should just keep using the main language of the platform you use for a living, unless you have the damnest fine reason not to.

    I mostly code C# and Java for a living, but JavaScript is not bad, it is just different.

    • Kitson Kelly

      About TypeScript, like every alternative language running on the same stack, just like JVM and CLR, the fact that it promotes platform fragmentation is really bad.

      I think that is what makes TypeScript different, in being a superset of JavaScript, it isn’t an alternative language. The team work really hard to try to allow plain JavaScript to “just work” in TypeScript. In fact, Visual Studio Code uses the TypeScript language services to power the intellisense for plain JavaScript and TypeScript has a compiler directive name allowJs which allows .js files to reside along .ts files.

  7. George Marecheau

    Great work by MS. All they have to do now is open source Internet Explorer.

  8. Philippe

    There is a ecmascript-like typed language that compiles to JavaScript since around 2006.
    And it offer much powerful transformations than babel and in a strongly typed fashion.
    This language is Haxe.

    • Kitson Kelly

      I have a lot of respect for Haxe. A couple years ago I started looking at both Dart and Haxe. Both languages I liked, but the I think the challenge with both of them is they try to “fix” JavaScript. I think what is making TypeScript successful is that in it being a superset of JavaScript it solves the problem in a different way and isn’t dealing with a new but similar language.

  9. My prediction’s that at some point, Typescript will become a “de facto” standard and Javascript will go to hell. (Note the sarcasm).

  10. ahan

    I like Javascript. In general I do not think that interfaces, classes, static types, inheritance and all this Java-stuff is always required and just overkill. We should keep things easy, fast and fun.

  11. Kans Parmar

    Great article Kitson. Many thanks.

  12. Guillaume

    I create a nice template to develop with typescript or just develop web project!

    It include a Gulp with Scss & js minify, livereload, watch files, font & image minify. I also include pug if you want to use it. You simply can use html if you want.

    I also include Foundation(framework).

    Why typescript is nice?
    You can use it to “import” .js in your main.js like an main.scss that you @import all your style.scss.

    https://github.com/t1gu1/front-end-typescript-template

    Follow me and leave comments on my github! ^^

  13. Jan

    “Ok, that is better, but what if I wanted options to be optional?”

    function myGreatApi(options = "optionsSettings") {
      /* Hopefully no one needs to read this */
    }
  14. Trober

    Even if a culture shift, it puts ***proprietary control*** beneath what has been vendor-independent since the beginning of the web. And, that culture shift will change back to using that control for recurring revenue purposes.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!