[HTML|JS|CSS] Wprowadzenie do TypeScript

TypeScript to język stosunkowo nowy (wprowadzony w drugiej połowie 2012 roku), opracowany przez Microsoft i pana Hejlsberga, mocno kojarzonego z językiem C#. TS ma być rozszerzeniem JavaScriptu wprowadzającym pewne znane z języków obiektowych konstrukcje. Pliki o rozszerzeniu .ts kompilowane są przez kompilator TypeScript do czystego JavaScriptu. Produktem, który idzie w parze z nowym językiem, jest Visual Studio 2012, ale sam kompilator jest darmowy i można go pobrać na przykład menadżerem pakietów Node'a, wpisując polecenie:

npm install typescript

Pliki TypeScript kompilujemy z linii poleceń komendą tsc, na przykład polecenie:

tsc sample.ts

utworzy plik o nazwie sample.js lub (oraz) wypisze błędy składniowe na konsoli.
A oto, co więcej poza czystym JavaScriptem daje programistom TypeScript:

• Klasy i typowalność

Klasy wprowadzają pewną strukturyzację kodu, co jest nieco utrudnione w JS, gdzie obiektami są funkcje. Typowalność z jednej strony zapewnia walidację, z drugiej podpowiadanie składni w VS 2012. Przykład:

//1. classes

class Customer {
    customerId: number;
    companyName: string;
    contactName: string;
    country: string;

    addCustomer(): number {
        return 0;
    }
}

var cust = new Customer();
cust.companyName = "Google";

i wynik kompilacji:

//1. classes
var Customer = (function () {
    function Customer() {
    }
    Customer.prototype.addCustomer = function () {
        //some code here
        return 0;
    };
    return Customer;
})();

var cust = new Customer();
cust.companyName = "Google";

• Modyfikatory dostępu

Properties w TS mogą być prywatne lub publiczne (domyślnie). Podobnie jak np, w C# do prywatnych nie mamy dostępu spoza klasy. Próba przypisania wartości spowoduje błąd kompilacji. Modyfikatory dostępu wpływają też na to, które properties w VS podpowiada nam IntelliSense.

//2. Access modifiers

class Employee {
    private customerId: number;
    public companyName: string;
    public contactName: string;
    private country: string;

    getEmployeeId(): number{
     return this.customerId;
    }
}

var emp = new Employee();
emp.companyName = "Google";
//error: 'Employee.country is inaccessible'
//emp.country = "USA";

• Konstruktory, statyczne properties

Wszystko działa dokładnie tak, jak w językach statycznie typowanych.

//3. Constructors, static members

class Person {
    public personId: number;
    public firstName: string;
    public lastName: string;
    static totalPeople: number;

    constructor(){
     Person.totalPeople = Person.totalPeople + 1;
     this.personId = Person.totalPeople;
    }
}

Person.totalPeople = 0;
var p1 = new Person();
var p2 = new Person();
console.log(Person.totalPeople); //2

• Dziedziczenie

Dziedziczenie, czyli większa reużywalność kodu,

//4. Inheritance

class Driver extends Person{
 public carMake: string;

 constructor(make: string){
  this.carMake = make;
  super();
 }

 getId(): number{
  return this.personId;
 }
}

var dr1 = new Driver("Ford Fiesta");
console.log(dr1.getId());

Ponadto mamy możliwość definiowania interfejsów (słowa kluczowe inteface i implements), odpowiadających interfejsom z C# oraz modułów (słowo kluczowe module) odpowiadających przestrzeniom nazw w C#.