TypeScript

What is TypeScript

• Superset of JavaScript

• Strongly typed

• Supports Object Oriented design

• Angular is written in TypeScript

• Easy transition from JavaScript -- looks very similar

• Similar to strongly typed languages like C# and Java

• Can auto upgrade transpiled code as browsers support new features

• Can be used on any project type where JavaScript is used.

JavaScript vs TypeScript

Variables

variables.js

var foo = "Hello";  // string
var bar = false;    // false
var bam = 123;      // number

// can reassign type
foo = bar; // foo is now a boolean

Arrays

arrays.js

var names = ['Bob', 'Mike', 'Jim'];
var ages = [10, 20, 30];
var friends = [{name: 'Bob', age: 10}, {name: 'Mike', age: 20}, {name: 'Jim', age: 30}];

arrays.ts

var names: string[] = ['Bob', 'Mike', 'Jim'];
var ages: number[] = [10, 20, 30];
var friends: Object[] = [{name: 'Bob', age: 10}, {name: 'Mike', age: 20}, {name: 'Jim', age: 30}];

Types in Functions

Inference

TypeScript is smart and can infer types based on what is assigned.

inference.ts

var foo0 = 'Bob';  // inferred as a string
var bar0 = 123; // inferred as a number
var bam0;   // inferred as any

// infers the output type is a string
function greet1(name: string) {
    return 'Hello ' + name;
}

Specifying types makes your code more readable and will make refactors later much easier.

Avoid: Use the any type sparingly and only as a last resort. It makes your code less reliable. Consider using a pipe operator if your variable needs to support multiple types.

var foo: string | number; // accepts strings or numbers

Classes

TypeScript supports classes and can be used to create complex data structures

person-0.ts

class FirstPerson {
    name: string;
    age: number;

    greet?() { // '?' signifies an optional property or method on the class
        return 'Hi, my name is ' + this.name + ' and I am ' + this.age + ' years old';
    }
}

let person0: FirstPerson = {name: 'Bob', age: 25};
let person1: FirstPerson = {name: 'Mike', age: 37};
let people0: FirstPerson[] = [person0, person1];

person0.greet();  // "Hi, my name is Bob and I am 25 years old"

Class Constructors

person-1.ts

class SecondPerson {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        //  set private variables to constructor values
        this.name = name;
        this.age = age;
    }

    greet?() {
        return 'Hi, my name is ' + this.name + ' and I am ' + this.age + ' years old';
    }
}

let person2: SecondPerson = new SecondPerson('Bob', 25);
let person3: SecondPerson = new SecondPerson('Mike', 37);
let people1: SecondPerson[] = [person2, person3];

person2.greet();  // "Hi, my name is Bob and I am 25 years old"

Class Constructor - Public params

Declaring parameters as public on the constructor dynamically adds a public variable to the class and no assignment is necessary.

Classes also support private and protected scoping on variables and work just like any other strongly typed language

Interfaces

TypeScript supports interfaces and enforces interface contracts. If a class implements an interface it has to implement all of the properties and methods of the interface.

ES6 Modules

TypeScript supports exporting classes, interfaces, modules, functions, and variables to be used in other files.

person-interface.ts

export interface IPerson {
    name: string;
    age: number;
    greet?(): string;
}

person.ts

import { IPerson } from './person-interface';

export class Person implements IPerson {

    constructor(public name: string, public age: number) {}

    greet() {
        return 'Hi, my name is ' + this.name + ' and I am ' + this.age + ' years old';
    }
}

person-component.ts

import { Person } from './person';

let person1: Person = new Person('Bob', 25);
let person2: Person = new Person('Mike', 37);
let people: Person[] = [person1, person2];

person1.greet();  // "Hi, my name is Bob and I am 25 years old"

Var, Let, Const?

What is the difference and when do I use which?

• Var

  • Part of JavaScript and supported by TypeScript

  • Are scoped to a function

  • Are easily created as globals and have bad consequences

• Let

  • Introduced in TypeScript

  • Prefer over Var

  • Block scoped

• Const

  • Only assigned once

  • Cannot be reassigned

  • An object's properties can be reassigned

Arrow Functions

Otherwise known as fat arrow functions and sometimes called a lambda function.

• Don't have to keep typing function

• The this value of the enclosing lexical scope is used

• lexically captures meaning of arguments

• Commonly used with RxJs

this.configService.getConfig()
    .subscribe((data: Config) => {
        this.config = data;
    });

Template Strings

String concatenation can be messy and slow. Consider this:

template-strings.ts

let name = 'Bob';
let age = 25;

console.log('hello my name is ' + name + ' I am ' + age + ' years old');

vs

console.log(`hello my name is ${name}, and I am ${age} years old`);

• Uses back-tick character to indicate string

• Tokens are replaced with variable values, i.e., ${variable-name}

• Can be multiline

Generics

Allows functions and classes to work with a variety of types instead of just one. This concept is borrowed from languages like C# and Java.

some-function.ts

// convert to allow multiple types
function someFunction1(arg: any): any {
    return arg;
}

// convert to generic
function someFunction2<T>(arg: T): T {
    return arg;
}

The Angular HttpClient uses generics to enforce the type returned by our API call.

config-service.ts

import { Config } from './models/config';

getConfig() {
  // now returns an Observable of Config
  return this.http.get<Config>(this.configUrl);
}

Generics with Types

Sometimes our functions need to enforce that the parameter follows a given contract.

TypeScript Transpilation

Browsers don't understand TypeScript, so it must be transpiled to JavaScript.

• tsc transpiles TypeScript to JavaScript

• tsconfig.json is used to configure tsc

• The Angular CLI handles calling tsc

Summary

• Differences between JavaScript and TypeScript

• Classes, constructors, and interfaces

• Modules

• Arrow functions

• Template Strings

• Generics