An introduction to the programming language TypeScript and why you might want to learn it.

Diana Lease
Jan 30, 2018 · 4 min read

What is it?

TypeScript is a superset of JavaScript, meaning that it contains all of the functionality of JavaScript and then some. Therefore, any program written in valid JavaScript will also run as expected in TypeScript. In fact, TypeScript compiles simply to plain JavaScript. So, what’s the difference? TypeScript offers us more control over our code via type annotations, interfaces, and classes. I’ll explain each of these later.

Who created it and why?

TypeScript was created by Microsoft and was released in 2012 after two years of development. It was created to allow for optional static type checking, which would be particularly useful when developing large scale applications. Interestingly, one of the reasons Microsoft developed TypeScript was because their internal teams were having trouble making JavaScript scale for Microsoft’s own projects, notably the team working on Bing Maps.

TypeScript is open-source, and the code is written in TypeScript itself. You can check out the code on GitHub.

What is static type checking and how does TypeScript implement it?

JavaScript is dynamically typed. Therefore, programs written in JavaScript do not know the data type of a variable until that variable is assigned a value at runtime. The variable can be reassigned or coerced into a value of a different type with no issues or warning. This can result in bugs that are often overlooked, especially in large applications.

TypeScript, on the other hand, uses static typing. Variables can be given a type when they are declared. TypeScript will check types at compile time, and throw an error if the variable is ever given a value of a different type. However, the error does not prevent the code from executing. The code will still be compiled into plain JavaScript and run normally. In this way, TypeScript is kind of like a “spellcheck” for your code. It will let you know when something looks off, but it won’t change how your code runs.

Static typing is optional in TypeScript. Variables can be given the type any, which will allow its values to be any type. If no type is given, the type will be set to any by default.

Assigning types in TypeScript

Below, we assign the type string to the parameter of a function.

function askForFood(food: string) {console.log(`May I please have ${food}?`);}

If we call askForFood(11), we will receive this error at compile time: Argument of type ‘11’ is not assignable to parameter of type ‘string’. However, the JavaScript file will still be created, and when ran, the following will log to the console: May I please have 11?

TypeScript will also inform you if a function has been called with an unexpected number of arguments. If we call askForFood(), we will receive the error: Expected 1 arguments, but got 0. When ran, the JavaScript program will still log the following: May I please have undefined?

Using interfaces to describe objects with properties

We can use interfaces to give types to object properties. We use the interface when creating objects that should have properties matching the ones we described in the interface.

interface Student {
name: string,
major: string
graduationYear: number
}
const bestStudent: Student = {
name: 'Anne Smith',
major: 'History',
graduationYear: '2018' //notice we are using a string
}

When compiling the above code, we would see the error: Types of property ‘graduationYear’ are incompatible. Type ‘string’ is not assignable to type ‘number’.

Defining classes

It wasn’t until the introduction of ECMAScript2015, or ES6, that JavaScript introduced classes to the language. However, it is important to note that these classes do not change the language’s prototype-based inheritance.

TypeScript allowed for the ability to use classes before they were officially implemented in ES6. TypeScript allows the developer to extend existing classes to construct new ones using inheritance.

class Feline {
catchMice(numberOfMice: number) {
console.log(`This fierce feline caught ${numberOfMice} mice.`);
}
}
class Tiger extends Feline {
rawr() {
console.log('RAWRRR!');
}
}
const tiger = new Tiger();
tiger.rawr();
tiger.catchMice(10);

Because Tiger inherits methods from the base class Feline, when we create an instance of Tiger, the instance tiger has both the method catchMice() and rawr().

What else can TypeScript do?

In addition to displaying the errors at compile time, certain IDEs such as Visual Studio Code will present the errors to the developer while they are typing the code. This makes correcting simple careless errors much quicker and easier.

TypeScript can also infer types that aren’t explicitly declared by the developer, such as inferring the return value type of a function. If the function is adding two parameters that were declared as both number, TypeScript will infer the return value must be of type number.

Furthermore, TypeScript offers more advanced functionality than the simple examples offered in this blog post. You can visit the language’s documentation for the most up-to-date features and how to use them.

Who’s using TypeScript?

Teams at AngularJS, Ionic, NativeScript, Aurelia, SitePen, and Epic are all using TypeScript to make their code more manageable, improve their development workflow, and assist in the debugging process.

If you are using JavaScript to write large programs, or you often find yourself consistently finding bugs due to mismatched types, you may wish to give TypeScript a try.

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Diana Lease

Written by

Full-stack JavaScript developer

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade