A QuickStart Guide For TypeScript

Introduction

TypeScript is a strongly typed programming language developed by Microsoft and released in 2012. The language was created in order to address the criticisms of working with JavaScript mainly addressing how it is dynamically typed. Since JavaScript is interpreted within the browser's compiler and not at the time of writing the code, if a mistake is made, it will not be caught until the browser compiles the code and shoots back an error. TypeScript fixes this by running the code through its own compiler and adding strict 'types' to your programming meaning you can catch mistakes quickly and easily before production. The best part is since TypeScript is a superset of JavaScript, it has virtually no learning curve for a JavaScript developer.

Installation

In order to install TypeScript, you are going to need Node js. To Install Node, navigate to here follow the instructions for your appropriate operating system.

After Node is installed, you can install TypeScript by running the command npm install typescript --save-dev within your terminal.

Basic Use

We can create a new TypeScript file by adding .ts to the end of any of our file names. For example, if we wanted to create a new file named "Practice" we can just run the command touch practice.ts. With this created, we can go ahead and start writing our TypeScript code within the file.

Since TypeScript is a superset of JavaScript you can get away with just typing plain JavaScript within your .ts file and it will still compile perfectly fine. So to test this, we can go ahead and write the code this code on our first line.

console.log("TypeScript Practice");

Now that the code is written, we can run this code by using the command tsc ("TypeScript Compiler") followed by our filename. So if we go ahead and run tsc practice.ts from within our terminal you should see a new file named "practice.js" pop up. This is our TypeScript which has been run through our compiler and translated into JavaScript. Notice since we have used basic JavaScipt within our .ts file that nothing has changed.

Types

Now we can get into one of the main reasons to get into TypeScript is it's enabling of static typing. One reason it achieves is by assigning each variable you create its only strong "Type". You can assign the type of each variable by adding a colon during the variable declaration following whatever primitive you wish to assign it. For example, if I wanted to assign an age to the type of number and set its value equal to 25, I can write the code let age: number = 25;. Now, if further down the line I try to assign the variable age to anything besides a number such as age = "Twenty Five";, the compiler throws an error allowing us to fix the issue immediately while knowing its exact position if we use a compatible text editor such as VSCode.

TS Config

TypeScript has a huge array of options you can mess with in order to change the language and compliers behavior. For example, within our practice.ts file lets create an async function like so.

async function practice() {

}

Now if we run tsc practice.ts and navigate over to our practice.js file, we can see that the JavaScript looks quite a bit messy compared to what we're used to for an async function. This is because typescript is built to be used with multiple different versions of Javascript and currently defaults to ES5. This behavior can be changed by adding a tsconfig.json file. Go ahead and run touch tsconfig.json within your terminal and open the newly created file within your text editor. From here we are going to add this code in order to default or compilers behavior to the latest version of JavaScript. Now if we run tsc within our terminal we should see our practice.js file should look much cleaner now that we are using the latest version of JavaScript by default.

Interfaces

One last awesome tool I would like to talk about when it comes to TypeScript is the interface. When creating a new JavaScript object, we can create something called an interface meaning we can give Types to all of our object's values. For example, I could create an interface to a new object we are creating called Sandwich by typing out this.

interface Sandwich {
  meatType: string;
  numberOfCondiments: number;
  breadType: string;
}

Now we can create a new object and assign it to the interface of Sandwich which will allow all of our variables to have a strong Type. So if we were to code the following below.

let newSandwich: Sandwich = {
  meat: "Turkey",
  numberOfCondiments: "2",
  breadType: "Wheat"
}

We would be warned that our numberOfCondiments value contains the wrong type and should be changed to avoid an error.

Comments

[Jon Randy 🎖️]

Being dynamically typed is one of JavaScript's strengths if you ask me. TypeScript feels like a crutch for developers coming from strongly typed languages, who are unwilling to do things a different way