Getting to know Typescript Part 1.

January 08, 2017


javascript

Preface

I normally like my Javascript like my ice cream: plain and Vanilla, but that doesn’t mean I am not open to new flavors, TypeScript seems to be one of those new Javascript flavors, “Javascript that scales” as they promise. So come along and follow me as I try to figure out this new thing.

Step 1: Set up TypeScript

On a first quick pass, TypeScript introduces Type Annotations, handy definitions for variables:

function(**arg: string**){ //use string argument }

The above bit of code should throw a warning when not receiving a string as an argument.

The first gotcha, is the following example:

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

TypeScript is a superset of Javascript, which means that whatever runs in Typescript will probably also run in Javascript, in order to see a warning about an incorrect type, we would need a different setup so…

Step 1b: Set up TypeScript on an IDE/text editor/desktop environment
Note: You will probably also need a tsconfig file : cmd(ctrl)+shift+p + tsconfig

You will now be able to make .ts - Typescript files and Atom will warn you when your types are wrong:

Atom-TypeScript warning

Variable Types in Typescript

Step 2: What are some basic types in Typescript ?
Note: Typescript prefers the use of the more modern LET when declaring variables.

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

The more you know If you are like me, you might be thinking why learn all these new stuff, what makes Typescript scale etc,etc, in as few words as possible, Javascript is dynamically typed and as such variables are instantiated at run-time, Typescript is Static, so there are no surprises and less bugs, for a full discussion check this: What is TypeScript and why would I use it in place of JavaScript?

Interfaces

Typescript also brings Interfaces to Javascript (see Note)so…

Step 3: Make an interface, figure out what an interface does
The more you know So what's an interface and what is it good for you ask. In general, an interface is a description of the actions that an object can do or the properties it should have, in other words this class/object must have these functions/things and it is valuable because well it prevents you from designing some object or class and later misconfiguring it

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

So we have a basic interface and a function that implements it, to see it fail and why it is useful, we need to go back to our desktop editor and try to compile our typescript file, you will get the following error if you ommit part of the interface:

Atom-TypeScript interface error

Classes

Besides Interfaces and Types, Typescript adds Classes to Javascript, which you might already be using if you do ES6 ( See note ) and code sample.

The more you knowJavascript normally dealt with object based inheritance via the protoype syntax, in es6 ( new and shinny Javascript), the class syntax was introduced, which in turn is just a new name or syntactic sugar for protoypes. Typescript allows for the use of classes even when there is no browser support ( like babel or a polyfill does) plus it also adds some other niceties
Step 4: Make a class in Typescrypt

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

And breaking our new class is just a matter of ommiting a variable..

Atom-Typescript Class error

Note:In order to convert Javascript to Typescript, your editor will help you by pointing out the missing bits like so:

Atom-Typescript

Step 5: Class inheritance & other Classy things

Like in Javascript’s es6, Typescript provides some extra handy features to the Class syntax, let’s explore.

Extending Classes

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

Class Modifiers: Public & Private

The more you know What, why use them ?...Class Modifiers or Access Modifiers are very common on other languages like Java,C#, C++ etc, they allow for control over who gets to access your object variables and methods, and using them is a good idea for security and convenience.

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

So while this example still compiles an runs, in your editor you would get errors:

Atom-Typescript Modifier error

Note:There are more modifiers in Typescript beyond these basic two, check the Docs for the rest

Conclusion:

There are quite a few other things that Typescript adds to Javascript, I’ll try covering the rest on a second post, you can also check the full feature set from them, but for now I leave fairly impressed on how easy it is to get into Typescript.

Best,

Keno