Getting to know Typescript Part 3.

April 20, 2017

Preface

Somehow overdue cause I moved countries, here is the final look at Typescript, let’s check out some of the other things that Typescript has to offer.

• Getting to know Typescript Part 1.
• Getting to know Typescript Part 2.

Modules

Modules seem to be a way to organize your typescript code better, let’s see what they entail…

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

I’ll be honest, modules seem to be a bit difficult to grasp at first and might be a deeper subject not suitable for an introduction, for now, let’s just cover the basics. The above is a simple internal module; why would you want to use an internal module ? well you can encapsulate behavior, variables, methods etc; notice for instance that the second class function is not getting out.

This was a handy internal module to showcase basic module behavior, but more likely you will encounter modules in multiple external files, let’s split the above sample into 3 files:

The first file will be Module1.ts:

export function saySomething() {
       console.log('I am a function inside module 1');
    }   

And a second file Module2.ts:

export class m1Class {
  // add other class stuff here
  sayMore() {
    console.log('I am a class method inside module 2');
  }
}

And finally a loader file (Loader.ts):

import * as module1 from "./Module_1";
module1.saySomething();

//I am a function inside module 1

import { m1Class } from  "./Module_2";
var classy = new m1Class;
classy.sayMore();

// I am a class method inside module 2

Notice that now the file names are used as the module names, that you can import the whole module or just parts of it. Modules are tricky because on top of this basic functionality there is a lot of nuance and functionality, you can explore more on the docs:

Typescript Handbook: Modules

JSX Support

JSX: The unholly marraige of HTML & Javascript was introduced along with React by facebook, typescript is jumping on this, let’s try writing some JSX in Typescript:

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

There’s not much to it, but what if we want to typeCheck JSX? (else why use typescript)…

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

Again not much to it, ( but still awesome ), you can use typechecking/typescript along with react,neat.

There is of course more to it: Typescript Handbook: JSX

Mixins

A mixin is usually a snippet of code or css you can reuse, a functions cousin if you will, Typescript supports mixins, let’s check them out:

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

So mixins are a mixed bag, you can probably get the same functionality from plain functions and classes, but if you can overlook the syntax and helper functions needed and you like the way they work/look, go for it. More about mixins in Typescript: Typescript Handbook: MIXINS

Namespaces

So we have covered a lot of what Typescript has to offer, but there is still more, although this is still a beginners guide, an overview of a few more advanced topics I think is needed, let’s start with namespaces:

Let’s try writing some namespaces in Typescript…

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

So namespaces provide a nice way of keeping things in order and avoiding conflicts, more complex scenarios can be found in the Docs: Typescript Handbook: Namespaces

Conclusion:

While Typescript might or might not be your first choice when coding something in Javascript, it’s sheer popularity ( and type checking ) makes it worth adding to your coding skills (especially if you are into Javascript), I hope this overview helps you !

Best,

Keno