UPDATE: TypeScript 2.0 was released on Sept. 22, 2016
In continuing with my recent trend of using TypeScript, I wanted to illustrate how to create functions and variables in TypeScript, because this initially threw me into a loop. The code for this example can be found here.
JavaScript and C# are the two languages I use in most of my day-to-day work, so I figured combining the two would be a joy. And it is! There isn’t much of a learning curve, as I’ve found it more to be about switching sides of your brain, because I kept going forward with a JavaScript mentality. I wanted to just instantiate things on-the-fly and use them willy-nilly, but that isn’t the case here.
Why bother with TypeScript if I already know JavaScript?
I pondered this at first, too. I’m already proficient with JavaScript and know the language well, so what benefit could this new language offer me? Looking back on older projects, it became clear: Type safety.That is the obvious answer, but it will also make your project far easier to debug in the future.
This may not sound like a huge benefit at first, but when you begin working on a JavaScript project with several developers and you all have different coding styles, things can grow unwieldy, especially as the codebase grows. I had worked on a project at a previous employer, and on several occasions there were JavaScript functions with 10+ parameters, and none of which had clearly defined types.
For example, the parameter rating. What does that mean? Are we accepting a string, float, or perhaps some unique type that we created?. Even worse, because JavaScript is a dynamic, loosely typed language, during interpretation (it is also compiled, but that’s a story for another day — think about how eval works), the project can still run despite having errors. You simply witness these errors at runtime.
To make things more difficult, the JavaScript debugger in the browser wasn’t clear as to what the issue was, because we started with an empty DOM, and used JavaScript to generate all of the HTML. This can work in certain instances, but without improved debugging tools and a type-safe language, this was a recipe for disaster.
Prefixing variables
When I write JavaScript, I like to prefix my variables with a single character to represent its type. This makes it easy for another developer to come by and even at a glance understand what I’m doing.
// float fRating // string sRating // object oRating
That can save you a lot of trouble in the end. Even so, I can accidentally pass in the wrong type, and the debugger won’t tell me. But with TypeScript, I don’t have that issue!
Here is an actual template that I’m using to generate some HTML for a container with biographical information about evangelists:
Here is that same code, but with TypeScript:
Intellisense
IDEs and text editors have a bit of intellisense for JavaScript, but because the language is dynamic in nature, it is difficult for the editor to know exactly what you are looking for. Therefore, it is a best guess, and most of the time it will throw everything at you, including the kitchen sink.
With TypeScript though, you have intellisense through type definitions, which I wrote about in-depth here.
Conclusion
Type safety, productivity, intellisense, and debugging. I’ll illustrate how to declare variables and functions in my next tutorial, as well as how to mix it in with your JavaScript.
David Catuhe, one of the engineers behind the open source WebGL project, BabylonJS, had a great blog post two years ago about why they made the switch to TypeScript as well.
You can find all of my TypeScript tutorials here.
-----------------------@DaveVoyles
