TypeScript – część 1

[type-of-web-komentarze[bot]]

TypeScript – część 1

„TypeScript – typowany nadzbiór JavaScriptu, kompilowany do czystego JavaScriptu” – głosi napis na stronie głównej typescriptlang.org. Używam go praktycznie codziennie, w różnych projektach, z różnymi technologiami. Od pewnego czasu, w dużej mierze za sprawą Angulara 2, ale nie tylko, TS zaczął zyskiwać sporą popularność i uznanie w społeczności webdeveloperów.

https://typeofweb.com/typescript-czesc-1

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kuba		2016-07-11 22:51

Dobrze, że powstał ten wpis, właściwie to powinien on powstać dużo wcześniej, niemniej lepiej późno niż wcale :) zaciekawiły mnie te "większe możliwości interfejsów", także czekam na kolejny wpis o TS :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2016-08-08 20:07

No i jest ;) https://typeofweb.com/2016/08/08/kurs-typescript-czesc-2/

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Mike Mx	https://www.phpcontext.com/wordpress	2016-07-12 08:43

Czy TS jest użyteczny wyłącznie w kontekście aplikacji Angularowych? Czy przydaje się również w prostych skryptach wykorzystywanych w stronach WWW do manipulacji DOM'em?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Łukasz Kliś	https://lukasz.klis.co/	2016-07-12 11:43

Tak, jak napisał Michał – TypeScript to tylko nadzbiór JavaScriptu. Można go stosować praktycznie z każdym frameworkiem. Kwestia osobistych preferencji. ;)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2016-07-12 11:48

Dokładnie tak. TypeScript nie ma związku z AngularJS. Możesz z niego korzystać gdzie tylko chcesz, kiedy tylko chcesz ;) A to czy się przydaje musisz ocenić sam. Moim zdaniem: Tak.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Franek		2017-01-14 23:28

Świetny artykuł, właśnie spędzam mega dużo czasu nad ogarnięciem Angulara 2. Do tej pory siedziałem na wersji 1 i nie wierzyłem gdy mówili że wersja 2 to zupełnie co innego.
Czy ktoś zna dobra stronę gdzie wyjaśnione są wszelkie pojecia, zasady, classy itp w TP?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-01-26 20:31

Podstawowe pojęcia jak klasa i interfejs najlepiej chyba z wikipedii ;) Albo z kilku moich artykułów o TypeScript'cie – https://typeofweb.com/tag/kurs-typescript/

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Beata Sz	http://devinspe.blogspot.com/	2017-07-14 18:38

Bardzo przystępnie napisane. Dziękuję :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-07-14 18:41

Dzięki ;) Pod jakim kątem chciałabyś zobaczyć kolejne wpisy? 🤔

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Beata Sz	http://devinspe.blogspot.com/	2017-07-14 18:44

"chciałAbyś" ;) Z serii o TS mam u Ciebie jeszcze dwa do przeczytania. :) Dopiero zaczynam w TS się rozglądać, więc trudno mi na tym etapie zgłosić jakieś zapotrzebowanie.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-11-23 17:32

mea culpa
A może dzisiaj już wiesz czego byś oczekiwała w kolejnym wpisie? :)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Zenek Burczymucha		2017-11-23 16:11

W tej części interface zawiera tylko pola, w kolejnej tylko metody. Czy można to połączyć i jaki to ma impakt na klasę implementującą?

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-11-23 16:17

Tak, można to połączyć. Wtedy klasa implementująca musi definować takie pola i metody jakie ma interfejs:

interface X {  
  doSth(): string;
  data: number;
}
 
class Y implements X {
    data = 123;
    doSth() {
      return String(this.data);
    }
}

https://www.typescriptlang.org/play/

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Zenek Burczymucha		2017-11-24 09:31

Dzięki, bo właśnie mnie zastanawiało jaka wtedy jest różnica pomiędzy implementacją takiego interfejsu, a rozszerzeniem klasy bazowej. W Javie interfejsy mogą zawierać tylko metody.
Chociaż ten link, który wkleiłeś prowadzi do innego przykładu.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-11-24 09:39

Główna różnica jest taka, że w momencie kompilacji TS do JS wszystkie interfejsy znikają, a klasy zostają ;)
Poza tym w interfejsach precyzujesz tylko typy, a nie wartości. Jeśli potrzebujesz coś w stylu interfejsu ale z wartościami to należy skorzystać z klasy abstrakcyjnej…
To powiedziawszy — nigdy nie użyłem klas abstrakcyjnych w pracy zawodowej. W ogóle nie korzystam z dziedziczenia ;)

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Zenek Burczymucha		2017-11-28 09:59

Faktycznie, nie zwróciłem na to uwagi. Ja ostatnio tez coraz mniej korzystam z dziedziczenia i interfejsów (a przynajmniej jawnie), bo w świecie mikroserwisów coraz bardziej schodzi to na drugi plan.

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2017-11-28 15:43

Chyba nie rozumiem co mają microservices do dziedziczenia i interfejsów. Rozwiniesz to jakoś?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Piotr		2019-01-04 11:27

Zastanawiam się, dlaczego kod czystego JS zapisany w pliku .ts:

Object.is(0, 0*5);

przy kompilowaniu zwraca "error: Property 'is' does not exist on type 'ObjectConstructor'."

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-06 12:19

A jak wygląda tsconfig.json?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Piotr		2019-01-04 11:27

Czy aby na pewno to jest dobrze?

class Animal {
    private name: string;

    constructor(givenName: string) {
        this.name = givenName;
    }

    public sayHello(): string {
        return `Hello, my name is ${this.name}!`;
    }
}

const dog = new Animal('Burek');
dog.sayHello(); // 'Hello, my name is Burek!';

Owszem:

dog.name; //wykaże  Error: Property 'name' is private and only accessible within class 'Animal'

Ale po skompilowaniu do czystego js ma to postać:

var Animal = /** @class */ (function () {
    function Animal(givenName) {
        this.name = givenName;
    }
    Animal.prototype.sayHello = function () {
        return "Hello, my name is " + this.name + "!";
    };
    return Animal;
}());
var dog = new Animal('Burek');
dog.sayHello(); // 'Hello, my name is Burek!';

A wtedy:

dog.name; // "Burek" - i już nie jest private

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-01-04 11:27

A jakiego zachowania byś oczekiwał?

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Piotr		2019-09-06 12:19

Jeśli mielibyśmy np.:

class Animal {
    private name:string;
    private owner:string = "Piotr";

    constructor(givenName:string) {
        this.name = givenName;
    }

    public sayHello():string {
        return `Hello, my name is ${this.name}!`;
    }
}

to ja bym oczekiwał, że owner jest niedostępny (private).
Dlaczego zatem po skompilowaniu:

const dog = new Animal('Burek');
dog.owner; //"Piotr"

?
Uczę się i w tym wypadku nie widzę różnicy pomiędzy private a brakiem deklaracji private :) Co zatem daje private po kompilacji?
Oczekiwanie bierze się z analogii w PHP, gdzie:

class Animal {
    public $name;
    private $owner = "Piotr";
}
$dog = new Animal;
$dog->name="Burek";
echo $dog->name;  // Burek
echo $dog->owner;  // FATAL ERROR Uncaught Error: Cannot access private property animal::$owner

A właśnie z takich języków jak PHP wzięto analogię klasy do ES6 :)

 
 

Komentarz zaimportowany z WordPressa

[typeofweb]

Gravatar	Imię	Adres	Data
	Michał z typeofweb.com	https://typeofweb.com	2019-09-06 14:33

Po kompilacji nie daje nic, jak w każdym (?) języku. Oglądanie kodu po kompilacji ma sens tylko dydaktyczny, w praktyce powinieneś traktować go jak czarną skrzynkę. Nie ma znaczenia co w niej jest. Ważne, że kompilator wyłapie takie błędy w momencie kompilacji.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Piotr		2019-09-06 17:18

Rzeczywiście z dokumentacji wynika, że:
"Private and protected accessibility is enforced only at compile-time and serves as no more than an indication of intent. Since JavaScript provides no mechanism to create private and protected properties on an object, it is not possible to enforce the private and protected modifiers in dynamic code at run-time."
Czysty JS nie obsługuje zatem (przynajmniej na razie) private oraz protected.
Dzięki i gratulacje za podjęte tematy w blogu.

 
 

Komentarz zaimportowany z WordPressa

[type-of-web-komentarze[bot]]

Gravatar	Imię	Adres	Data
	Kamil		2019-07-16 21:26

Dobra robota - pozwolę sobie często podlinkowywać ten wpis :)

A jeśli ktoś chciałby spróbować swoich sił z gamedevem w TypeScriptem... to zapraszam na mojego świeżo upieczonego bloga TypeError.pl, gdzie na rozgrzewkę próbujemy napisać prostego tower defensa =)

 
 

Komentarz zaimportowany z WordPressa