Getting to know Typescript Part 3.

April 20, 2017



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.

Check out the other posts on this series,a good place to start if like me you are getting started with Typescript:


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

Step 1: Make and use a module

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:

Step 2: Make and use external modules

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";

//I am a function inside module 1

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

// 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:

Step 3: Write some JSX in Typescript
Note: You need to import React and know a bit about it for this to make sense, I did a few introductory tutorials you might want to check: Getting Started With React

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)…

Step 3.b: Write & Type Check some JSX in 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


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:

Step 4: Create and use a mixin.

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

Note: So when would you use a mixin ? according to the fine people at Stack Overflow:

A mixin is a special kind of multiple inheritance. There are two main situations where mixins are used:
  • You want to provide a lot of optional features for a class.
  • You want to use one particular feature in a lot of different classes.
Sounds good to me.

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


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:

Note: So What is a namespace anyways ?
From stackOverflow "A namespace provides a container to hold things like functions, classes and constants as a way to group them together logically and to help avoid conflicts with functions and classes with the same name that have been written by someone else."

Let’s try writing some namespaces in Typescript…

Step 5: Create 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

Note: Namespaces in Typescript can be a deep dive, when using external Javascript libraries for instance, you might want to add a declaration file ( there's a repo of them here: Github:DefinitelyTyped).


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 !



Final Note: You might still be wondering When to use Typescript ?
We covered some reasons in the first part, but this little article goes further in depth (hint: Angular 2, performance , project size , etc) : When should I use Typescript ?