Getting to know Typescript Part 2.

February 17, 2017

javascript

Preface

Let’s check out more Typescript ! These will still be very beginner friendly Typescript code samples, but hopefully we will end up with a general overview of what typescript brings to the table.

Check out the first post on this series,a good place to start if you have no idea what Typescript is:

Getting to know Typescript Part 1.

Functions

Step 1: Figure out function types

See the Pen TypeScript - Function Types by Eugenio Keno Leon (@k3no) on CodePen.

Not much to it, we can now add types to our functions by adding a type declaration to the function…

Note: In case you need a reminder, the reason types are considered useful, is that Javascript variables are instantiated at run-time, Typescript is Static, so there are no surprises and less bugs since you can check them with your compiler before running the script

Step 2: Figure out function parameters

Speaking of functions, so what would happen if you gave a function more parameters than it’s function definition had ? well, you would get an error in Typescript like this one:

Atom-TypeScript function parameter error

In order to better deal with this sort of situation, Typescript provides support for both Optional Function parameters and default parameters, let’s check them both:

Step 2a: Figure out Optional function parameters...

See the Pen TypeScript - Optional Function Parameters by Eugenio Keno Leon (@k3no) on CodePen.

Note: I've included a common way of doing the same thing in plain (vanilla) javascript for comparison

Step 2b: Figure out Default function parameters...

See the Pen TypeScript - Default Function Parameters by Eugenio Keno Leon (@k3no) on CodePen.

Note: ES5 (plain javascript) and new ES6 syntax also added for comparison

More on functions… There are a few other things involving functions and Typescript (This, overloading for instance), check out the official docs for more… Typescript- HandBook: Functions

Data Constructs in Typescript

Typescript also supports many newer Javascript data functions and also has some of it’s own, let’s check them out:

Step 3a: Figure out what enums are and how to use them

See the Pen TypeScript - Enums by Eugenio Keno Leon (@k3no) on CodePen.

An enum is a way to organize a collection of related values (like an array with internal operations), check out:Typescript Deep Dive - Enums for more.

The more you know: So why would you use enums? , well, if you have a number of variables that are not going to change much (flags,constants etc), you can use enums and your code (your method calls) reads better, instead of

chose(option[2])

you can write chose(option.optionA)

Step 3b: Figure out what for..of is for and how to use it.

See the Pen TypeScript - For..Of by Eugenio Keno Leon (@k3no) on CodePen.

For..of is a convenient way of Iterating over an iterable and returning values instead of keys as in the first Javascript example (which returns keys instead of values) note that it is not exclusive to Typescript, and the syntax is the same as in ES6, you can read more about iterables in Javascript here:Iteration protocols

And that’s it for now, I’ll come back for a final overview on Typescript and how to organize your files, I hope this code samples help you getting started with Typescript…

Best,

Keno