TypeScript - The Basics

September 23, 2015

I sometimes find it helpful to make notes to myself when learning, experimenting with, or just trying to reinforce some technology I've used in the past. These notes often rot away in a Word document that I later have trouble finding. I thought I would try posting my notes about TypeScript here as an experiment. Hopefully I won't lose them and maybe one or two other folks will stumble across them and find them helpful.

This is the first in what I hope will be several posts with notes about TypeScript. They will just be short expalanations and reminders about how various features of the language work. They will often be accompanied with very terse code samples.

Let's get started...

Declaring Variables

Just as you can in JavaScript, you can use the var keyword to define a variable globally, or locally to an entire function regardless of block scope.

var myString: string = 'this is a simple string';  
var myNumber: number = 10.0;  

ES2015 introduced the let keyword that allows declaring variables limited to block scope. It also introduced the const keywords for declaring constants.

let blockString = "hello world";  
let blockNumber: number = blockString.length;  
const cannotChange: number = 100;  
cannotChange++; // compile error  

The function below demonstrates the accessibility of variables being declared with var, let, and const.

function testingScope(): void {  
    if (true) {
        let scopedString: string = 'scoped inside the block';
        var globalString: string = 'globally inside the function';
        const done: boolean = false;
    }
    // the following statement compiles
    // because the variable is not scoped
    // to the block above
    console.log('Available: ', globalString);
    // these statements won't compile
    // because both variables are scoped
    // to the block above
    console.log('Available: ', scopedString);
    console.log('IsDone? ', done);
}

Declaring Arrays

You can declare arrays in TypeScript in two different ways. The first is to use the square brackets after the type that will be contained in the array.

let stringArr: string[] = ['this', 'is', 'a', 'string', 'array'];  

The second way is to use the generic Array type passing the type contained in the array as the generic parameter.

let anotherArr: Array<string> = ['here', 'is', 'another', 'array'];  
let numArr: Array<number> = [0, 5, 3, 4, 3];  

Enums

Enums let you give friendly names to sets of numeric values. By default, the first item in the enum has the value 0. Each subsequent item is increased in value by 1. You may also set a different intial value by explicitly assigning a value to the first item. Each item may also be given an explicit value as show in the example below.

You can retrieve the friendly name associated with a value by specifying the value in square brackets after the name of the enum.

enum Teams {Tigers = 2, Vols = 4, YellowJackets = 6};  
console.log('Tigers: ' + Teams.Tigers);  
console.log('Vols: ' + Teams.Vols);  
console.log('YellowJackets: ' + Teams.YellowJackets);  
console.log('Value at 2: ' + Teams[2]); // Tigers  
console.log('Value at 4: ' + Teams[4]); // Vols  
console.log('Value at 6: ' + Teams[6]); // YellowJackets  

any and void

You may opt-out of type checking by declaring variable to be of type any. This effectively falls back to the native JavaScript dynamic type system allowing you to assign any type to the variable at any time.

let someVal: any = 5;  
someVal = 'now it is contains a string';  
someVal = true; // and now it contains a boolean  

If a function is not programmed to return a value, you should specify the return type as void.

function noRetVal(): void {  
    console.log('This function returns no value.');
}

In the next post, I'll cover TypeScript interfaces.

Author image
About Brice Wilson