TypeScript

29 Mart 2018 Frontend Istanbul icin yapmis oldugum TypeScript sunumu

Transcript

1. Frontend Istanbul

   29.03.2018
   

   View Slide

2. HAKKIMDA
   ESER ÖZVATAF
   ▸ Kurumsal Mimari @ KoçSistem
   ▸ Açık Kaynak Gönüllüsü
   ▸ Halen Lisansüstü Öğrencisi
   /eserozvataf
   /eserozvataf
   

   View Slide

3. HAKKIMDA
   BUGÜNE KADAR…
   ▸ 1994 ilk kod, 2002’de profesyonellik
   ▸ >50 proje
   ▸ 6 adet dil

   Basic > Pascal/Delphi > C/C++ > PHP > .NET > JavaScript
   Type’lar
   

   View Slide

4. ‣ TYPE’LAR
   ‣ KUTU AÇILIŞI
   ‣ NE DEĞİL?
   ‣ AVANTAJLARI
   ‣ NASIL BAŞLANIR?
   Bugün bahsedeceklerim:
   

   View Slide

5. TYPE’LAR
   NE İŞE YARARLAR? GÜNÜMÜZDE…
   

   View Slide

6. TYPE’LAR
   NE İŞE YARARLAR?
   ▸ Çıkış nedeni:

   

   Bir programlama dilinin bir değer için sistem hafızasında ne kadar yer
   kaplayacağını belirlemek. Bu doğrultuda statik “allocation” yapmak.
   number deger1 = 5;

   bool deger2 = true;
   Sistem Hafızası
   

   View Slide

7. TYPE’LAR
   GÜNÜMÜZDE…
   Basit ölçeklerde güzel ancak veri tipleri

   kompleksleştikçe dayatmacı olabiliyorlar
   

   View Slide

8. TYPESCRIPT
   JAVASCRIPT İLE İLİŞKİSİ. ÜZERİNE NE EKLER?
   

   View Slide

9. TYPESCRIPT IS A TYPED SUPERSET OF
   JAVASCRIPT THAT COMPILES TO PLAIN
   JAVASCRIPT.
   typescriptlang.org
   TYPESCRIPT
   

   View Slide

10. TYPESCRIPT
    JAVASCRIPT İLE İLİŞKİSİ
    ▸ JavaScript’in üst kümesidir
    ▸ Dolayısıyla her JavaScript kodu aynı zamanda TypeScript kodudur
    ▸ Derlendikten sonra JavaScript’e dönüşür
    

    View Slide

11. TYPESCRIPT
    JAVASCRIPT’İN ÜZERİNE NE EKLER?
    ▸ Static Type Tanımlamaları
    ▸ …İkinci bir şey yok
    

    View Slide

12. TYPESCRIPT
    TYPE TANIMLAMALARI
    JavaScript TypeScript
    

    View Slide

13. TYPESCRIPT
    TYPE TANIMLAMALARI
    ▸ Kuralları sıkı bir tip sistemini JavaScript dünyasına getirmektense,

    JavaScript’de tipler olsaydı nasıl olurdu sorusu yanıtlanmış
    null undefined void never any
    string number boolean object symbol
    Array<> Set<> Map<,>
    

    View Slide

14. TYPESCRIPT
    TYPE TANIMLAMALARI: KOMPLEKS TİPLER
    

    View Slide

15. TYPESCRIPT
    TYPE TANIMLAMALARI: NESNE YÖNELİMLİ
    

    View Slide

16. TYPESCRIPT
    TYPE TANIMLAMALARI: DAHASI
    ‘ease-in’ ‘ease-in’ | ‘ease-out’
    [ 5, ‘deneme’, 3, 7 ] Array
    function (a) { return a.length; } (val: string) => number
    { ‘a’: 1, ‘b’: 2 } { [key: string]: number }
    Union Types T1 & T2
    Generic Types T1
    … …
    

    View Slide

17. TYPESCRIPT
    TYPE TANIMLAMALARI: DAHA DA KOMPLİKE
    

    View Slide

18. NE DEĞİL?
    TYPESCRIPT HAKKINDA KAFA KARIŞIKLIKLARI
    

    View Slide

19. NE DEĞİL?
    TYPESCRIPT HAKKINDA KAFA KARIŞIKLIKLARI
    ▸ Bir programlama dilinin üst kümesi olması nedeniyle o da bir programlama dili
    ▸ Ancak… JavaScript’den farklı bir development kültürü yok, bir C# veya Elm
    değil
    ▸ Fakat bir RunTime değil
    ▸ Bir polyfill paketi değil, dolayısıyla babel işlevlerini birebir karşılamaz
    ▸ İçerisinde herhangi bir decorator v.s. tanımı halihazırda gelmez,

    Gördükleriniz muhtemelen Angular’a aittir
    

    View Slide

20. AVANTAJLARI
    TYPESCRIPT KULLANARAK NELER KAZANIRIZ?
    

    View Slide

21. AVANTAJLARI
    TYPESCRIPT KULLANARAK NELER KAZANIRIZ?
    ▸ Yazdığımız kodu kullanıcılara daha net aktarabiliriz
    

    View Slide

22. AVANTAJLARI
    TYPESCRIPT KULLANARAK NELER KAZANIRIZ?
    ▸ Typo’lara ve yeniden isimlendirmelere karşı bizi uyarır
    

    View Slide

23. AVANTAJLARI
    ECMASCRIPT STANDARTLARINA BUGÜNDEN SAHİP OLMAK (KISMEN)
    ▸ Tercih edildiği takdirde kodu yorumlarken eski standartlar seviyesine düşürür
    

    View Slide

24. NASIL BAŞLANIR?
    KURULUM, DESTEK VE DİĞERLERİ
    

    View Slide

25. NASIL BAŞLARIM?
    KURULUM
    ▸ CLI Kurulumu
    ▸ Proje tabanı oluşturmak (tsconfig.json)
    

    View Slide

26. NASIL BAŞLARIM?
    TSC KONFİGURASYONU
    

    View Slide

27. NASIL BAŞLARIM?
    VAROLAN UYGULAMALAR İÇİN TYPE TANIMLARI
    ▸ TypeScript ile geliştirilen kütüphanelerde sorun yok,
    ▸ Geri kalan popüler kütüphaneler için @types/
    

    View Slide

28. NASIL BAŞLARIM?
    TOOLING DESTEĞİ
    ▸ Geniş editor desteği
    ▸ Webstorm, Visual Studio
    ▸ Visual Studio Code, Sublime Text, Atom
    ▸ VIM, Emacs
    ▸ Webpack, Gulp, Grunt v.s. için ek kütüphaneler
    ▸ ESLint paketleri ve TSLint
    

    View Slide

29. NASIL BAŞLARIM?
    ▸ Daha fazlası için typescriptlang.org
    ▸ Sorular?
    /eserozvataf
    /eserozvataf
    SON OLARAK…
    

    View Slide

30. TEŞEKKÜRLER
    

    View Slide