Typescript: Initial Impressions

Recently I attended a coding meetup where there was a presentation on typescript. I was left so inspired by what I saw and learned that I immediately signed up for classes to find out more about this useful tool. Previously I had been noticing the requirement for aptitude with typescript showing up on many positions I had been applying for. I have been working with it for a bit now and this article will cover some of the things I have learned and perhaps provide a brief presentation of typescript that will inspire others to begin learning it as well. First we will go into how to install and use typescript

How To Install Typescript

In order to install typescript you will first need Node.js as an environment to run the package. If you are using node package manager enter the following into terminal to install typescript:

npm install typescript --save-dev

This will allow you to create .ts files in your text editor which you will compile into javascript by the tsc command followed by the filename (as long as your terminal is in the same directory as the file). An example of compiling a .ts file called app.ts via the terminal would be by entering:

tsc app.ts

this will create a file in the same directory consisting of the javascript code compiled by app.ts the file will be called app.js it is important to note that if you are running javascript as a script in your html file you will need to use this app.js file. This is because html has no idea what to do with a .ts file. If you are interested in some of the syntax that this .ts file might be written in please examine the typescript docs. Next lets try’n answer a question you might be asking…’but WHAT IS typescript???’.

What Is Typescript?

Typescript is javascript that adds additional syntax to support type enforcement. It is written in a .ts file and compiles to javascript that is cleaner and more concise than what you would generally write on your own. It also provides many handy error messages which reference type enforcement that will fire off once the typescript is compiled into javascript. These error messages will not prevent this javascript from running or be presentable on a browser (browsers don’t know what to do with typescript, it is a language for development only). These types are closely aligned with javascript datatypes. If you followed both of those links you will notice a few distinct differences. We will go into some of these types in the next section.

A Few Data Types In Typescript

I’ll now go into a review of some of the types I have learned about and the syntax required to define values with them. Without further a-do here are some of the different types in typescript:

• Tuple-is an array with fixed specified types. Here are some examples of how to define a tuple:

• Enum-is a type which by default provides labels to numbers in sequence. This sequence can be changed at any point during initialization and the sequence will continue where ever you left off. An example of an enum initialization would be:

In this example if you added another enumerator between the brackets you would have to initialize it with a value much like NEW_COUNT did when it was set to 10. This is because STR breaks the count by being a of a type other than a number (in the case of STR it is of type string).

• Any-is a type that means it’s value can be of any type. They are less useful because they negate a lot of the development error message guard rails that typescript provides and should be avoided. A use case scenario may be if you are unsure of what types something might be and need to support all types for that value. An example of setting an array to being able to hold any type would be:

by declaring this without initializing it you can later set its value to something like: arr3 = [“string”] OR you might also set it to something like: arr3 = [1, true] …again NOT generally a good idea to use this type if you can avoid it.

• Union — is a type which allows for multiple defined types. This is different than the any type because you are still limiting its value to the types you define. An example of a union type might be:

It is a good idea to include some run time checks when using union types to provide different use cases such as the if (typeof) statement in the function above. In this example if input1 & input2 are of type number the return will be both of these added together. If they are of type string a concatenated string will be returned.

• Literal — is a type that will only allow specified values(s). This can be useful to detect a misspelling for a string argument in a function that uses a case switch statement, or to only allow certain enum values as arguments for a function without throwing a typescript error. An example of a function that utilizes a literal type might be:

In this example the argument of role not only has to be of the string type but must be either admin, user, or guest. This function will return an object with privileges that correspond with the given role.

Conclusion

Typescript is a useful tool for writing clean javascript code that functions exactly the way you intend it to. It also easily communicates to other developers what you desire your code to do. When developing with typescript you are compelled to adhere to the types you define thus unknown values occur less frequently (if at all). I am still learning this technology but as of right now I like to use the analogy in my head of: I can draw a circle freehand, or I can draw a circle better using a protractor. I can write working javascript, or I can write precise javascript using typescript.