Grok.TypeScript()

Goal

The goal of this app is to get you up and running with TypeScript as quick as possible. It is assumed that this is not your first programming language and that you have prior object oriented design experience in Java, C++, JavaScript, etc.

TypeScript is JavaScript with optional static typing and class-based object-oriented programming.

How it Works

  • This tutorial is interactive and you will be able to edit and compile TypeScript code write here in the browser.

  • You can run your code by hitting the run button in the top tight of the editor or you can hit 'Ctrl-Enter' or on Mac 'Cmd-Enter'.

  • Clicking on the console will clear it.

TypeScript Intro

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript starts from the same syntax and semantics that JavaScript uses. This means that you can write plain ol' JS in TypeScript and it will compile no problemo.

TypeScript was written for large scale applications that needs some strictness and safety that JavaScript couldn’t provide. Many of the errors that JavaScript developers catch at run time, TypeScript developers catch at compile time.

The main benefit of using TypeScript over JavaScript is the optional typing of variables, hence the 'Type' in TypeScript.

So instead of the following code in JS:

var name = "Jerry",
    age = 22,
    likesDogs = true;

we would write the following in TypeScript:

var name:string = "Jerry",
    age:number = 22,
    likesDogs:boolean = true;

Some basic types include

  • Boolean
  • Number
  • String
  • Array
  • Any
  • Void

You can define your own types too, but we'll get more into that later.

One thing special to TypeScript are template strings, which can span multiple lines and have embedded expressions. These strings are surrounded by the backtick/backquote (`) character, and embedded expressions are of the form ${ expr }

var name: string = `Mack`;
let numDogs: number = 101;
let words: string = `${ name } has ${ numDogs } dalmatians.`

Declaring a variable in JavaScript has always traditionally been done with the var keyword.

var x = 7;

However let was introduced in ES6

let y = 10;

The difference being that var is function scoped and let is block scoped. Take a look at the examples in the editor to understand the difference.

If you get anything out of this tutorial it's always use let and never use var and you'll be better off.

Take a look at the following JS code:
var inspect = function( cup ) {
    if ( cup.full) {
        cup.drink();
    } else {
        cup.refill();
    }
}
The problem with this function is that there is no guarantee that variable cup has any of the required properties. The programmer is assumming that the object being passed into the function has the properties full, drink(), and refill().

There could be a scenario where an object is incorrectly passed into this function and thus causing a runtime error. This scenario is easily imaginable when you have many developers working on large scale projects.

It would be nice if it was guaranteed that cup had the properties required. This is where interfaces come in. TypeScript catches these errors at compile time rather than at runtime.

We can declare an interface like this:

interface CoffeeCup {
    full: boolean;
    drink(): void;
    refill(): void;
}

Type-checking focuses on the shape that values have. This is called duck typing or structural subtyping. In TypeScript, interfaces fill the role of naming these types and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.

Take a look a the code for this chapter to gain full understanding.

TypeScript adds Class functionality and follows object oriented design similar to what you would expect in Java, C++, etc. Classes can extend one another, have private and public variables, etc etc blah blah blah. I'm not going to go into to much detail here as I would mostly being telling you things you already know.

However, constructors are different. You cannot have multiple constructors and the sytax for constructor declaration is different. Ordinarily you would do something like this:

public Object() { } 

In TypeScript you delcare the constructor like this:

constructor() { } 

Additionaly, if you declare a variable in the constructor, TypeScript will automatically save it as a class variable. Take a look at the following code to see what I mean.

class Person {
    constructor(public name, 
               private gold) {  }
}

That TypeScript compiles into the following JavaScript

var Person = (function () {
    function Person(name, gold) {
        this.name = name;
        this.gold = gold;
    }
    return Person;
}());

You can see how the two variables, just declared in the constructor, are automatically assigned to the object.

Load up the code for this chapter and dive right into it.

Generics behave as how you expect they would.

class Generic {
    value : T;
    setValue(value : T) {
        this.value = value;
    }
    getValue() : T {
        return this.value;
    }
} 

Functions are mainly the same as they are in JavaScript with the exception being that now you can add types and mark variables optional.

Load up the code and get to work.

Last, but not least.

const enum Colors {
    Red,
    Green,
    Blue,
    Rainbow = 100
}