Typescript Cheatsheet

Below is my cheatsheet for programming in Typescript. A large amount of the content here comes form Introduction to TypeScript which I recommend you watch if you are just getting started.

Basic Types

  • Number
  • String
  • Array
  • Tuple
  • Enum
  • Any
  • Void
  • Null
  • Undefined
  • Never

Creating Variable With Types

var x: number = 3;
var y: string = "hello world";

// Old fashioned javascript without types still works
var y = "hello";

Functions with Types

function hello(name: string)
{
    console.log("hello " + name);
}

hello("John");
hello(5); // Will raise an error

Classes

Creating A Basic Class

Below is a very basic class for creating a dog with a name.

class Dog 
{
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    sayName() {
        console.log("My name is " + this.name );
    }
}

var myDog: Dog = new Dog("Rover");
myDog.sayName();

Note that constructor is a keyword that allows you to use the new functionality later to create an instance of the class.

Using An Interface

Carrying on from the previous example, we can use an interface for if we wanted to create other animal classes such as Cat later.

interface AnimalInterface 
{
    name: string;
    sayName(): void
}

class Dog implements AnimalInterface 
{
    name: string = '[Animal]';

    constructor(name: string) {
        this.name = name;
    }

    sayName() {
        console.log("My name is " + this.name );
    }
}

var myDog: Dog = new Dog("Rover");
myDog.sayName();

Notice how an interface can force a class that uses the interface to have specified member variables, not just methods. However, I was unable to use private in this example without errors being raised in Netbeans. I am not sure if this is a bug with the plugin I am using.

Accessors (Getters and Setters)

If you configure Typescript to be targeting ECMAScript 5+ then you can use the accessors as demonstrated below:

class Dog 
{
    _name: string = '[Animal]';

    get name(): string { console.log("Using name accessor"); return this._name; }
    set name(name: string) { console.log("Using name setter"); this._name = name; }

    constructor(name: string) {
        this._name = name;
    }

    sayName() {
        console.log("My name is " + this._name );
    }
}

var myDog: Dog = new Dog("Rover");
myDog.name = "Sally";
console.log("My dogs name is " + myDog.name);

If you execute the compiled javascript for the script above, you will get the following output:

Using name setter
Using name accessor
My dogs name is Sally

As you can see, even though we have no public name variable, since we have a name setter and getter, we can name like a property of the class as shown by these lines:

myDog.name = "Sally";  
console.log("My dogs name is " + myDog.name);  

These will use the get and set functions accordingly, which may perform additional functionality other than just setting a member variable. This could be something like performing validation of the input data.

Extending Classes / Creating Child Classes

In the example below we create a Dog class that extends the Animal class. The dog class simply has one more method, which is bark but still has the methods of the parent class.


class Animal 
{
    _name: string;

    constructor(name: string) {
        this._name = name;
    }

    sayName() {
        console.log("My name is " + this._name );
    }
}

class Dog extends Animal
{
    bark() 
    {
        console.log("Woof");
    }
}

var myDog: Dog = new Dog("Rover");
myDog.sayName();
myDog.bark();

References

Author

Programster

Stuart is a software developer with a passion for Linux and open source projects.

comments powered by Disqus
We are a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites. More info.