Setting up TypeScript for the First Time/Enabling Errors

If you found this article then you probably have an intermediate understanding of JavaScript and are now taking your first baby steps at learning Microsoft’s TypeScript. If you are more experienced with T.S, I hope this can be a quick refresher for you!

Guide

1. What is TypeScript & Why use it?
2. Setting up TypeScript.
3. Examples Static Typing & Errors in TypeScript.

What is Typescript and Why Would I use it?

TypeScript 101: To answer your question TypeScript is a “superset” of JavaScript, that gives vanilla J.S additional powerful methods. The way I like to remember this relationship is by comparing it to a turtle or Iron Man if you are into superheroes. Think of JavaScript as Tony Stark and TypeScript as the suit that allows him to fly and shoot lasers out of his hands.

Now you wont be able to shoot lasers after installing typescript; however, typescript’s super power is its ability to add static typing to your code. You will catch errors as you type, saving you the heart ache of seeing red line after red line of errors after running your file.

Setting up Typescript for the First Time (VS Code):

Commands:

1. mkdir ts-practice -> code . (creates practice directory and opens it)
2. npm init -y (gives us package.json to download node modules)
3. npm install typescript (installs module)
4. touch index.ts (creates our first typescript file)

In any directory you want follow the commands above to get your first typescript environment set up.

Optional/Extremely suggested:

Command + Shift + p
(control for Operating systems)

Search for “default settings”, type in “typescript.validate”, and make sure that this section is set to true. This is very important for seeing errors later down the development line… and conveniently for the next section.

Static Typing Fundamental's/ Error Examples

With the TypeScript environment set up, lets discuss static typing. When declaring and using variables in T.S you are able to add regulations for each data type. An error will show immediately in your IDE if not done correctly.

Example 1:

Error: “Type ‘string’ is not assignable to type ‘number’ ”.

Example 2:

Error 2: Type ‘string’ is not declared in ‘Mixed’.

Example 3:

Error 3: You can not change myObject’s age to a string. The function sum works with the arguments 2 & 5 because these are both numbers.

As you can see the variables above have a pre-existing ruleset/type that will provide an error(red squiggly) if not followed. Debugging in this manner is favorable because we do not have to wait for results like we would with Dynamic typing.

Quick note on types: Null and Undefined are unique.

Conclusion

Static typing is one of typescript’s major benefits especially when it comes to debugging. You are able to create many different scenarios for your data, and in the next article I will show you how to compile typescript into JavaScript, add interfaces to your data, as well as some more tips and tricks.