Typescript: Initial Impressions

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
tsc app.ts

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.

--

--

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