Getting Started with TypeScript

#typescript #javascript #beginners

Getting started with TypeScript can seem scary if you look at it as an entirely new language, but in reality, TypeScript is just a layer on top of JavaScript. All of your JavaScript skills and knowledge will only help in your TypeScript journey. Let's get another thing straight, no one is expecting you to know ever piece of syntactical sugar in TypeScript, theres much better use of the finite amount of memory that we have. Just like anything else, if you can understand the concepts enough to ask google a coherent question, you're in great shape.

Getting Started

So, how do you get started? Just like with many things in JavaScript, we need to download TypeScript using NPM. If you're unfamiliar with NPM you can download it here. Once you have NPM open up a terminal and install TypeScript globally with npm install -g typescript. Once that installs, thats it! TypeScript has been installed and is ready to use... BUT we still have a few things to talk about before we can get our fingers on the keys.

So earlier I mentioned that TypeScript is a layer on top of JavaScript, in technical terms this is called a superset. A superset is a programming language that contains all of the features of a given language and adds a layer of functionality on top of it. With TypeScript the extra functionality is the ability to strongly type our code, and catch possible type errors on compile. This is great for working with larger files and for cutting down on debugging time, especially when working in larger teams.

Having the Right Setup

Having the right set up is always the first step to success with anything, and TypeScript is no different. The first thing to do is to make sure your IDE is set up for TypeScript. If you're using VS code, good news, TypeScript Support is already baked in. The next thing to do is create a tsconfig.json file. The tsconfig file allows you to customize project settings, and acts like an object with key/value pairs. You can easily create a tsconfig by running tsc --init in your terminal. This file will have some default options, and some roll your own options that you can add into your project as you see fit.

Since the internet runs on JavaScript and TypeScript is not technically JaveScript we're going to need to talk about how to transpile the TypeScript into JavaScript at run time. This is done by running the tsc command in your terminal. The tsc command looks through your root directory for the tsconfig.json file, and then turn that code into JavaScript with you having to do anything else.

Time to Get Dirty

Ok you've made it through the boring stuff, let's start programming. PSYCH! We need to talk about understanding the seven actual types of data that JavaScript has:

Undefined
Null
Boolean
Number
Object
String
Symbol

These seven types are given to us by JavaScript and are dynamic types. This means that data types are checked at runtime, and will not error out your program before you actually try to run your program. TypeScript makes these dynamic types static, so that at compile time your IDE is checking the types of your data to prevent undefined or null values being passed where they shouldn't be. This can save hours and hours of debugging and trying to find single places where they data type may be incorrect.

Ok, now we will really get into coding...

How to Type Your Data

For each different variable that you have in your application you need to type the variable. Its super easy to do this let's check it out starting with some of the easier types.

const letsRock : boolean = true

Breaking this down is pretty simple. We declare a new variable letsRock and then set it to equal true (because who doesn't like rocking). The big difference here is that I declared letsRock as a boolean type. If the value of letsRock ever equals anything except a boolean we are going to get an error.

let myAge : number = 0
let myName : string = "Phil"

the same pattern is applied to strings and numbers. You declare the variable, declare the type and then set the initial value. Thats three out of seven types down, were cooking with gas now. Let's check out some of the other types and how we can type them. This is where things get fun .

let students: string[] = ['Matt', 'David', 'Jake']

On the surface, this looks really scary, but take a step back and checkout whats happening. There is a variable of students being declared, and students is going to be an array. Arrays are a type that is given to us with JavaScript, so in TypeScript we know that we can set variables to be arrays. The cool part is that we can define the type thats INSIDE of the array! Think about this, by declaring the type that is going to be inside of an array, that could save debugging time when an error is thrown because a piece of data doesn't match the declared data type. Are you starting to catch on to what is happening here? The alternative syntax to the above code would look like this

let students: Arrray<string> = ['Matt', 'David', 'Jake']

Continuing the Journey

This should be enough to get you started with TypeScript and for you to know just enough to be dangerous. The world of TypeScript is much deeper than what we covered in this blog post, so be sure to be on the lookout for part two of this blog post.

Until next time,
Happy coding, and remember to keep that GitHub green.