Wraz z pojawieniem się nowego Visual Studio, Microsoft zaprezentował nowy język skryptowy - TypeScript. Z dużym zainteresowaniem przeczytałem o tym na blogu Somy Somesagar’a i postanowiłem przyjrzeć się temu tematowi trochę bliżej.
TypeScript - pierwsze wrażenia
Wraz z pojawieniem się nowego Visual Studio, Microsoft zaprezentował nowy język skryptowy - TypeScript. Z dużym zainteresowaniem przeczytałem o tym na blogu Somy Somesagar’a i postanowiłem przyjrzeć się temu tematowi trochę bliżej.
Jak można przeczytać na stronie projektu TypeScript - www.typescriptlang.org, jest to język skryptowy, stworzony z myślą o tworzeniu dużych aplikacji. To tak na prawdę “nakładka” na JavaScript- pozwala na tworzenie silnie typowanego, obiektowego kodu, który następnie kompilowany jest do tradycyjnego JavaScript’u, dzięki czemu może być interpretowany przez przeglądarki (lub innego rodzaju klientów, na przykład Node.js). Jako, że oparty jest na JavaScript, mamy wciąż łatwość manipulacji elementami DOM, jednocześnie jednak otrzymujemy do dyspozycji konstrukcje jezykowe znane z “poważniejszych” języków, co pozwalać ma na tworzenie dużych aplikacji.
Instalacja czyli jak zacząć pracę z TypeScript
Rozpocznijmy więc część właściwą tego posta, czyli zobaczmy jak to wszystko działa. W tutorialu dostępnym na stronie projektu, podane są dwie możliwości, skąd wziąć narzędzia do tworzenia aplikacji w tym języku: plugin do VS 2012 lub instalacja poprzez Node.js Package Manager. Ja wybrałem pierwszą opcję. Po pobraniu i instalacji, wśród dostępnych w VS projektów nową opcję (w razie gdyby po instalacji nie ich nie było - tutaj możliwe rozwiązanie) - HTML Application with TypeScript:
Tak utworzony projekt zawiera prostą, przykładową stronę html, prezentującą możliwości zastosowania TypeScript w praktyce. Przyjrzyjmy się teraz bliżej projektowi.
Przykładowy projekt
Na początek popatrzmy jakie pliki powstały po utworzeniu projektu:
Myślę, że plik app.css nie wymaga omawiania, przyjrzyjmy się więc na początek plikowi default.htm:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="app.js"></script>
</head>
<body>
<h1>TypeScript HTML App</h1>
<div id="content"/>
</body>
</html>
Jak widać, nie ma tutaj niczego specjalnego - zauważmy jednak, że w linii numer osiem, mamy odwołanie do pliku JavaScript - tak jak pisałem wcześniej, wynikiem kompilacji kodu TypeScript jest kod JavaScript, i to tego wynikowego kodu używa klient.
Kod projektu
Przejdźmy więc do pliku app.ts - to plik zawierający właściwy kod TypeScript. W exloratorze solucji, mamy możliwość rozwinięcia go - wówczas ukazuje nam się również plik app.js - w ten sposób mamy możliwość podejrzenia wynikowego kodu JavaScript (mamy możliwość jego edycji, jednak po kompilacji zostanie on i tak zastąpiony przez kod wygenerowany na podstawie pliku *.ts). Popatrzmy więc na kod zawarty w pliku app.ts:
class Greeter {
element: HTMLElement;
span: HTMLElement;
timerToken: number;
constructor (element: HTMLElement) {
this.element = element;
this.element.innerText += "The time is: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();
}
start() {
this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
}
stop() {
clearTimeout(this.timerToken);
}
}
window.onload = () => {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};
Już na pierwszy rzut oka widać, że język ten bardziej przypomina klasyczny język obiektowy - łatwiej jest czytać i rozumieć taki kod, wygląda to generalnie “czyściej”.
Na początku deklaracja klasy_‘Greeter’, przy użyciu wyrażenia _‘class’, następnie deklaracje właściwości klasy - każdy z nich ma zadeklarowany typ (silne typowanie). Kolejna rzecz to konstruktor, możemy tutaj zauważyć, w jaki sposób z poziomu TypeScript możliwe jest manipulowanie elementami DOM. Standardowa biblioteka TypeScript’u udostępnia nam też szereg klas i metod predefiniowanych - w tym przypadku mamy użycie klasy ‘Date’ i jednej z jej metod - ‘toUTCString()’.
Kolejna rzecz, to dwie metody klasy ‘Greeter’ - klasa ta ma za zadanie, przypisanie do przekazanego w konstruktorze elementu DOM, aktualnej daty i godziny, oraz jej aktualizację w czasie rzeczywistym. Spójrzmy zatem na pierwszą z metod: ‘start()’ - wykorzystano tutaj standardową metodę TypeScript’u: ‘setInterval’, która aktualizuje wartość naszego elementu aktualną datą, co zadany okres czasu (hmm… co my tu mamy??!! czy to aby nie Lambda Expression??!!). Metoda ‘stop()’ odpowiedzialna jest za zakończenie odświerzenia daty.
Na koniec kod dobrze znany z JavaScript - utworzenie klasy i wywołanie jej metody dla ‘window.onload’ przeglądarki. Tutaj jednak też widać jedną różnicę w stosunku do JavaSctipt - do ‘window.onload’ mamy przypisanie delegata metody przy użyciu Lambda Expression!
Kod wygenerowany na podstawie kodu TypeScript
Poniżej kod JavaScript wygenerowany na podstawie opisywanego kodu TypeScript:
var Greeter = (function () {
function Greeter(element) {
this.element = element;
this.element.innerText += "The time is: ";
this.span = document.createElement('span');
this.element.appendChild(this.span);
this.span.innerText = new Date().toUTCString();
}
Greeter.prototype.start = function () {
var _this = this;
this.timerToken = setInterval(function () {
return _this.span.innerText = new Date().toUTCString();
}, 500);
};
Greeter.prototype.stop = function () {
clearTimeout(this.timerToken);
};
return Greeter;
})();
window.onload = function () {
var el = document.getElementById('content');
var greeter = new Greeter(el);
greeter.start();
};
W wyniu uruchomienia takiej aplikacji, naszym oczom ukarze się strona internetowa, z dynamicznie odświerzaną datą i godziną:
Podsumowanie
Wpis ten to tylko krótkie wprowadzenie do tego nowego języka od Microsoft’u. Nie wiem jak Wy, ale ja jestem podekscytowany - dostajemy w jednym miejscu wszystkie benefity języka obiektowego, dzięki któremu możliwe będzie pisanie dużych, skalowalnych aplikacji uruchamianych po stronie przeglądarki! To wszystko wsparte przez narzędzia dostępne w Visual Studio (np. Intellisense), działające tak samo we wszystkich przeglądarkach (tak twierdzi Microsoft - myślę, że czas pokaże czy jest tak rzeczywiście…).
Myślę też, że dzięki temu może zmniejszyć się “bariera wejścia” do programowania skryptów klienckich dla developerów, którzy dotychczas programowali głownie w C# lub VB i patrzyli z “obrzydzeniem” na JavaScript ;)
Źródło zdjęcia tytułowego: http://www.ryadel.com/en/fixing-typescript-compile-on-save-feature-in-visual-studio-2015-asp-net-5-rc1/.