Do strongly-typed JavaScript Exist?

When JavaScript was first introduced to the world in 1995 alongside HTML and CSS, it changed the way people interact with web pages and opened up much more possibilities in web development. As time goes by, JavaScript has evolved from being recognized as a client-side scripting language that handles mouse-clicking, key-pressing to the most popular programming language that is multi-paradigm friendly, prototype-based object-oriented, and dynamically typed. While dynamical type languages have their strength, it could be a headache to debug because of the nature of it. What if you accidentally altered the type of a variable in a function mid runtime, or forgot the value of a variable being imported from a different file, was it a function or a number? The coding debt would be heavier and heavier as the number of developers contributes to the project gets larger.

A solution to this is, you guessed it, TypeScript! The amazing team at Microsoft developed TypeScript in 2012 to help with this type of issue. TypeScript is a superset of JavaScript and was developed to overcome code complexity for large projects. Codes written in TypeScript will be compiled into JavaScript before running in the browser. Essentially, all JavaScript code is also valid in TypeScript and is JavaScript, but with additional features.

What Does TypeScript Offer?

Optional Static Type Checking is the biggest advantage of writing in TypeScript instead of vanilla JavaScript. When declaring variables, functions, or any type of data, we will have the option to assign a type to the data and cannot be changed during compiling. Unlike other high-level programming languages like Java, static type checking in TypeScript is completely optional.

ES6 Compatibility, Since TypeScript is a strict superset of ECMAScript 2015(commonly known as ES6), it has the full support of the modern syntax and scoping capability.

Class Based Objects was introduced in ES6, therefore you may also write code in an object-oriented manner in TypeScript instead of the prototypes.

How to run TypeScript

As I mentioned above, codes in TypeScript are compiled into JavaScript code before execution, therefore we need a compiler tool to help us to set this up. In your terminal, run the following command.

npm install -g typescript

This will have the TypeScript install in the global scope in your environment using npm package management. If you don’t have npm or node installed, you may refer to this link for help. You may also test your install by checking the version or help.

tsc --version
tsc --help

The TypeScript Compiler is shipped with TypeScript and is to be used to compile .ts file to .js. Remember the .ts is the file extension for TypeScript files.

To compile, run the following line in your terminal,

tsc <FILENAME>

*NOTE: you may also add the watch flag(-w) after the filename to put the compiler in the watch mode, so the file will be compiled automatically after each saves.

A .js file with the same filename will be generated by the compiler that you can run with node runtime.

Here we don’t see much of a difference because we haven’t put in any type restrictions to it yet. But now that we know how to compile TypeScript, let’s take a look at a few examples of how to implement type checking.

Implementation

The general syntax is to add a colon after the name of variables, parameters, functions. On the right side of the colon, we state the expected data type that said object should be receiving, this process of assigning type is considered as an explicit type declaration. When you declare a variable with an assigned value, the type would be implicitly assigned according to the initial value.

Additionally, we can also custom a type using the ‘type’ keyword ourselves to restrict certain variables.

When constructing an object, we have another tool called an interface that follows the colon syntax. Noted that the object that inherits from an interface would restrict not only the type of its key-value pair but also the amount of key-value pairs there could be. If you would like the object to be expandable, you can add [key:string]:any to the interface for flexibility.

When dealing with function and wanted a specific type of return value, we will add the type between the ending parenthesis and the curly bracket for the body of the function code as follow,

You might notice we can explicitly restrict the data type of a collection by stating the data type expected following by the syntax for the data type from the screenshot above in the argument “arr”.

I hope you get a brief idea of how TypeScript is run and got excited about what you can do with it in a large-scale project. This blog was meant to be an overview of this particular programming language and I’m looking forward to diving deeper into it and I’ll be sharing any tips and tricks I find along the path of mastering TypeScript in the upcoming weeks. Thanks for reading and happy coding!

--

--

--

Software Engineer, React.js || Javascript || RoR

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How I Setup My VIM as Modern Text Editor

Sendbox Shipping Insurance: Your Packages Are Protected

The MECH Stack — Solving JavaScript Framework Fatigue

Introduction to React Native

Authentication

JS Reminder6 Objects continue..

Design of a json migration tool

How to add and customize Bootstrap in Nuxt.js

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pan Li

Pan Li

Software Engineer, React.js || Javascript || RoR

More from Medium

Cerebral Devlog [2]

Explanation “this” in javascript.

Async Await in JavaScript

The Web Almanac AMA

The Web Almanac AMA held on Jan 26th with the recording attached.