Reid  Rohan

Reid Rohan


What is TypeScript? A Comprehensive Introduction for Beginners

Typescript, for those that have heard about it and would like to know more about it, is a superset (think extension or enhancement) of JavaScript that provides optional static types. Being a superset of JavaScript means that all valid JavaScript by default is valid TypeScript.

What this means is that if you are an experienced JavaScript developer and want to try out TypeScript, you can simply convert all of your .js files to .ts and the majority of the files should be able to run with very few errors.

I say very few instead of none because there might be a function call or a variable definition that somewhere in your code is being used wrong that you will have to fix. But typically a .js file can be converted to .ts and run just fine. Of course, that begs the question, “Then what’s the point of switching?” I’m glad you asked.

Types in TypeScript are stripped away during a compilation process known as transpiling. This transforms TypeScript code into valid JavaScript. The compiled JavaScript is compliant with ES3(ECMAScript 3) by default, but can be modified using a config file to compile to newer versions. Typically when using TypeScript in order to make sure that your code targets every browser in use you’ll want to target the lowest version of JavaScript as possible.

Leaving it at ES3 isn’t necessarily a bad thing in other words. Since you can write the latest and greatest JavaScript and have TypeScript compile it to older versions you get the best of both worlds so to speak. There are some caveats as not every new feature of JavaScript is supported by TypeScript but a vast majority of them are. A good reference for knowing whether a feature is supported can be located here.

ECMAScript, What?!

ECMAScript is the language specification that JavaScript adheres to. Beginning with ES2015, a new version of JavaScript is published every year using a naming convention that contains the year the spec is completed. For example, ES2015 was completed in 2015 therefore the name is ES with the year appended, thus making it ES2015.

Examples of TypeScript versus JavaScript

I want to go over a quick example of the language. The code below is written in ES5 compliant JavaScript, attempts to log a greeting message. The greetingLogger function accepts a string message and logs a greeting constructed using the input string

function greetingLogger(message) {
  console.log('Hello there, ', message, '!');
var person = { name: "Jonathan" };

#programming #javascript #typescript #coding

What is TypeScript? A Comprehensive Introduction for Beginners