notoriousb1t

TypeScript in the Browser?

The announcement about Angular 2 being built with TypeScript got me thinking: What if Google and Microsoft decided to provide native support for TypeScript in the browser? Here are some reasons I think this might be great.

Ease of Use

JavaScript does have facilities to make its code more reusable, but they can often be daunting to a newcomer from a server side language. In the past, I thought writing JavaScript was a lot like the wild west until I read Effective JavaScript and figured out how to make sense of it all.

I think TypeScript is better in this regard because its syntax encourages developers to declare these types through a clearer, more concise syntax. Consider the following JavaScript class:

JavaScript Class

var Person = (function () {
    function Person() {
        this.firstName = "";
        this.lastName = "";
        this.age = 0;
    }
    Person.prototype.getSummary = function () {
        var summary = "name: ";
        summary += this.firstName || "";
        summary += " ";
        summary += this.lastName || "";
        summary += " age: ";
        summary += this.age || "unknown";
        return summary;
    };
    return Person;
})();

This is what a newcomer might think while reasoning out this code:

"It is declaring a variable named Person, which is evaluating a function as an expression and calling it. The function has a Person function which sets 3 values on this whatever this is, and then sets a function on getSummary on prototype... It doesn't say where that field comes from... and then returns the Person function... What?"

The TypeScript way (also the unreleased ES6) to do this is much easier for someone coming from an Object-oriented language to wrap their brain around.

TypeScript Class

class Person {
    firstName: string = "";
    lastName: string = "";
    age : Number = 0;
    getSummary() : string {
        var summary = "name: ";
        summary += this.firstName || "";
        summary += " ";
        summary += this.lastName || "";
        summary += " age: ";
        summary += this.age || "unknown";
        return summary;
    }
}

This is what a newcomer might think for this example

"It is declaring a class 'Person' that has three fields with specific types and a method that returns a string"

Quite a bit clearer, wouldn't you agree? Having a better syntax for web development directly in the browser would encourage seasoned desktop and server-side developers to start doing client-side work.

Performance

Does compiled TypeScript have better performance than JavaScript? Well, no... Since TypeScript compiles to JavaScript, it can't surpass it. I think, however, that compiling TypeScript directly to machine code would result in better performance because predictability and reusability leads to efficiency.

As a language, JavaScript is pretty unpredictable expressive. Variables can change type in the same scope, functions attached to meta objects classes can be overwritten with few guarantees, and new object types can be invented on the fly using object literals. These are not bad things inherently, but they make make life very difficult for developers trying to keep a lid on things.

Shenanigans in JavaScript


function chaos() {
    // aString can be anything
    var aString = "";
    aString = 2;
    aString = new Date();
    aString = true;
    aString = /[\d]*/g;
    aString = document.createElement("input");

    // this breaks the internet
    Array.prototype.map = function() { 
        return "the same thing"; 
    }
}

TypeScript has optional static typing that can keep variable types sane. It has type declarations to declare what a function can be expected to return and what type each argument should be. It has generics and interfaces. All of these things make code more predictable for the developer and for the compiler which could lead to improved performance in the machine code. You can still write most of the expressive code like JavaScript, but there could be better performance perks for writing statically.

A good model to look at is Dart. It has an in browser compiler to make the language cross-browser, and it can run natively. I have read that native Dart is significantly faster. It stands to reason that TypeScript would be faster as well if natively run.

Accessibility

This last one is self-perpetuating. Currently, you can use TypeScript in a number of IDEs. You can also download the compiler to use in NodeJS. It is not particularly terribly difficult to start working in it. There are even online playgrounds where you can get your hands dirty.

It would, however, be far more accessible if you could use it directly in the browser tools. Do you want to learn TypeScript? Press F12 and start typing. You could interact with the living, breathing HTML Document in seconds. I'll admit that I have learned a lot of programming by causing lots and lots of errors. The faster you can create new errors, the faster you can learn how to fix them. The trend of code playgrounds for new languages speaks to the idea that people learn faster by working with interactive/live consoles.

Final Thoughts

I know that the ideas in TypeScript are going to be introduced into the ECMAScript specification eventually, but I can't help wondering if it would be better for web developers if JavaScript was forked and we had two equally competing languages. I understand that there is fear of fragmenting the market, but that is already happening in a way due to transpilers. Everyone has to use JavaScript to write code on the web, but a lot of people are jumping through huge flaming hoops to avoid writing it directly. What does that tell you about the state of the JavaScript?

I say fork it.