In this article i am going to explain some of TS features that every developer who uses Angular should know. features that i am going to explain shown below.

  • what do we get with TypeScript ?
  • types
  • classes
    • Access Modifiers and Properties
    • Static and Instance Members
    • Function Overloading
    • Constructors
    • Inheritance
    • Interfaces
  • modules
  • language utilities
    • Fat Arrow Functions
    • Template Strings

what do we get with TypeScript ?

  1. TypeScript is a super-set of JavaScript that provides typed nature to your code.
  2. The TypeScript transpiler takes our TypeScript code as input and outputs ES5 code that nearly all browsers understand.
  3. Typescript in an official collaboration between Microsoft and Google.

when you compile the TypeScript code it is converted into plain JavaScript. That means the resultant JavaScript can be used with any browser that supports JavaScript. For example, consider the following code written in TypeScript:

class Customer {
// -------- Fields ------
    customerId: number;
    companyName: string;
    contactName: string;
    country: string;
// --------- Methods -------
    addCustomer(): number {
        //some code here
        return 0;
    }
}

The above code uses TypeScript specific keywords such as class and data types such as number and string. When you compile this code the resultant JavaScript that gets outputted is this:

var Customer = (function () {
    function Customer() { }
    Customer.prototype.addCustomer = function () {
        return 0;
    };
    return Customer;
})();

As you can see this is just the plain JavaScript and can be used in any browser that understands JavaScript. In your web pages you will be referring to this JavaScript code file (*.js) and not the TypeScript code file (*.ts).

To compile the TypeScript code to JavaScript you can type after installing nodejs to use npm and install typescript in ur machine globally.  “tsc file.ts; node file.js”


Data Types

When you declare any variable in JavaScript you typically do so using var keyword without specifying any particular data type for the variable. For example consider the following variable declaration:

window.onload = function () {
    var data = 10;
    alert(data);
    data = "hello world";
    alert(data);
}

In the above piece of code, variable named data is first assigned a number and then a string. As you might have already guessed both the alert() calls correctly output the respective value. However, this can lead to hard to maintain code and can introduce serious errors.

TypeScript allows you to declare variables with a specific data type. The types can be classified as primitive or object types.

  • The primitive types include number, bool and string
  • object types include modules, classes and interfaces.

Capture

As you can see three variables viz. age, firstName and flag are declared of type number, string and bool respectively. If you try to assign values to any of these variables that are not of the specific type, the TypeScript compiler will throw an error.

Types can also be used with function parameters or return values of the functions.

MyFunction(message:string,flag:bool): number {
    if (flag) {
        document.getElementById("div1").innerText = message;
        return 10;
    }
    else {
        document.getElementById("div1").innerText = message;
        return 20;
    }
}

As you can see, the MyFunction accepts two parameters of type string and bool respectively and returns a number. TypeScript also has a data type called any that can accept any type of data.

By allowing you to declare variables of a specific type, TypeScript avoids lot of errors that may otherwise be introduced in the code.

Built-in Types

  • Strings
    • var fullName: string = ‘Ahmed Yehia’;
  • Number
    • var age: number = 36;
  • Boolean
    • var married: boolean = true;
  • Array
    • var jobs: Array <string> = [‘IBM’, ‘Microsoft’, ‘Google’];
    • var jobs: string[] = [‘Apple’, ‘Dell’, ‘HP’];
  • Enums
    • enum Role {Employee = 3, Manager = 2, Admin = 1};
    • var role: Role = Role.Employee  // 3
  • Any
    • any is the default type it receives any kind of value.
  • Void
    • Using void means there’s no type expected this is usually in functios with no return value
      function setName(name:string): void {
      this.fullName = name;}

Classes

In JS ES5 object oriented programming was accomplished bu using prototype-based objects. this model doesn’t use classed, but instead relies on prototypes.

The following class declaration shows how:

class Customer {
    customerId: number;
    companyName: string;

    addCustomer() {
        //some code here
    }

    removeCustomer() {
        //some code here
    }

    updateCustomer() {
        //some code here
    }

    getCustomer() {
        //some code here
    }
}

The above code creates a class named Customer using the class keyword of TypeScript. Just like C# classes a TypeScript class can have properties, methods and constructors. Once created you can initialize an object of Customer class as shown below:

var obj = new Customer();
obj.customerId = 100;
obj.companyName = "Some Company";
obj.addCustomer();

Access Modifiers and Properties

Access modifiers control the accessibility of the members of a class. TypeScript has two access modifiers – public and private. By default the members are public but you can explicitly add a public or private modifier to them. Consider the following piece of code that declares two public and one private variable.

TypeScript-10-Figure02

The above code defines a class named Customer that has three members viz. customerId, companyName and country. Since by default members are public the customerId can be accessed from theoutside world as shown by the IntelliSense window. On the same lines the companyName is explicitly marked as public and hence it is accessible from the external world. The country, however, is marked as private and hence won’t be accessible outside the class as can be seen from the IntelliSense window.

When you declare members as private you may want to allow access to them them via public get and set properties. Luckily TypeScript allows you to do just that. The following code shows how:

get Country(): string {
    return this.country;
}

set Country(value: string) {
    this.country = value;
}

Here, the get and a set functions for Country property are defined. Inside the get function you return the value of private variable country whereas in the set function you assign a value to it. Once created you can use this property as follows:

var obj = new Customer();
obj.Country = "USA";

Note that in order to compile the above code correctly you must use –target switch and set its value to ES5 (ECMA script version 5). This is because the property get and set are supported in ECMA5 and later versions (the error thrown at you will be “Property accessors are only available when targeting ES5 or greater”). To compile the above code from the command line you would run the following command:

tsc.exe --target ES5 app.ts

Static and Instance Members

The classes you create in TypeScript can either contain static members or instance members. For example consider the following piece of code:

class Customer {
    customerId: number;
    companyName: string;
    static data: string;

    static test() {
        alert(Customer.data);
    }
}

The above code declares a class named Customer. The Customer class declares a static property – data – of type string. The static function test() then displays this property value to the user. Notice how static members are accessed using

<class_name>.<static_member_name> syntax.

Function Overloading

TypeScript allows you to define overloaded functions. This way you can invoke different implementations of a function depending on the parameter. Remember, however, that TypeScript function overloading is bit odd and requires type checking during the implementation. This limitation is due to the fact that TypeScript code finally gets compiled into plain JavaScript and JavaScript doesn’t support the concept of function overloading in its true sense. The following simple example shows how two versions of a function can be created in TypeScript:

addCustomer(custId: number);
addCustomer(company:string);
addCustomer(value: any) {
    if (value && typeof value == "number") {
        alert("First overload - " + value);
    }
    if (value && typeof value == "string") {
        alert("Second overload - " + value);
    }
}

As you can see the first two are merely function signatures without any implementation. The first signature has one parameter of type number whereas the second signature has a parameter of type string. The third function contains the actual implementation and has a parameter of type any. The any data type indicates that any type of data can be passed in the parameter. The implementation then has a series of if blocks, each checking the type of the supplied parameter. Accordingly a different piece of code is executed. If you see the IntelliSense for the addCustomer() function it will indicate all the overloaded versions of the function as shown below:

TypeScript-10-Figure03

Constructors

Constructor is a special method that is executed when a new instance of the class is being created. constructor can’t return any values. if a class has no constructor defined explicitly one will be created automatically.

constructor(custId:number,company:string,country:string) {
    this.customerId = custId;
    this.companyName = company;
    this.country = country;
}

The above code declares a parameterized constructor for the Customer class. The constructor has three parameters and inside the constructor their values are assigned to the respective properties. Once created you can instantiate the Customer class as shown below:

var obj = new Customer(100,'Some Company','USA');
alert(obj.country);
constructor(public customerId:number,
            public companyName:string, public country:string) {
}

The above constructor has three parameters and they are marked as public. This way the Customer class gets three public properties, viz. customerId, companyName and country, even if you didn’t explicitly defined them. You can then use these properties just like any other explicitly defined properties.

Inheritance

TypeScript allows you to inherit from existing classes. By inheriting classes you can extend their functionality as per your requirement. For example, you may have a class named Person. You can create specialized classes based on the Person class by extending it in the other classes (say Employee or Contractor). The following code shows how this can be done.TypeScript-10-Figure04

The above code defines two classes Person and Employee. The Person class has two properties viz. firstName and lastName. The Employee class inherits from the Person class using the extends keyword. Notice how the base class constructor has been called in the inherited class using the super keyword. As shown in the IntelliSense the Employee class in all has four properties – two properties from base class and two properties of its own.

Interfaces

Just as TypeScript supports inheritance, it also supports interfaces. You can define an interface and then implement it in one or more classes. For example, you may have an interface called ITax that defines some properties and functions. You can then implement ITax in other classes say IncomeTax and ServiceTax. The following code shows how this can be done:

interface ITax {
    taxpayerId: string;
    calculateTax(): number;
}

class IncomeTax implements ITax {
    taxpayerId: string;
    calculateTax(): number {
        return 10000;
    }
}

class ServiceTax implements ITax {
    taxpayerId: string;
    calculateTax(): number {
        return 2000;
    }
}

As you can see from the above code an interface ITax has been defined using the interface keyword. It has one property named taxpayerId and a function calculateTax(). Then there is a class IncomeTax that implements ITax using the implements keyword. It is mandatory for IncomeTax class to implement taxpayerId property and the calculateTax() method. Similarly, another class named ServiceTax implements ITax.


Modules

As your TypeScript code base grows it becomes important to organize classes and interfaces for better maintainability. TypeScript modules allow you to do just that. A module is a container for your code that helps you organize your code in a neat way. Conceptually you may find them similar to .NET namespaces. Let’s see how to create a module.

module Company {
    class Employee {
    }
    class EmployeeHelper {
        targetEmployee: Employee;
    }
    export class Customer {
    }
}
var obj = new Company.Customer();

The above code defines Company module using the module keyword. The Company module contains three classes – Employee, EmployeeHelper and Customer. By default all the classes from a module are accessible only within that module. That is why it is alright to access the Employee class inside the EmployeeHelper class from the same module but you can’t access the Employee class from outside the Company module. If you wish to access a class from a module from the outside world you need to “export” it as in the case of the Customer class.


Utilities

TypeScript provides a number of syntax features that make programming really enjoyable. Two important ones at:

  • fat arrow function syntax.
  • template strings

Fat Arrow Functions

fat arrow => functions are a shorthand notation for writing functions.

// ES5
var data = ['Alice Gren', 'Paul Pfifer','Louis Blakenship'];
data.forEach(function (line) { console.log(line); });

However with the => syntax we can instead rewrite it like so:

// TS
var data: string [] = ['Alice Gren', 'Paul Pfifer','Louis Blaken'];
data.forEach( (line) => console.log(line); );

One important feature of the => syntax is that is shares the same this as the surrounding code. this is important and different than what happens when you normally create a function in JS. Generally when you write a function in JS that function given its own this. (Function Scope concept ins JS)

Template Strings

the two great features of template strings are

  1. Variables within strings (without being forced to concatenate with + ).
  2. Multi-line strings

Variables in strings

var firstName = 'Ahmed';
var lastName  = 'Yehia';
var greetin = `Hello ${firstName} ${lastName}`;

Multi-line strings

there is a great feature in TS is “Backtick” (`   `)Multi-line strings are a huge help when we want to put strings in our code that are a little long like template.


what’s the difference between let and var ?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Advertisements