Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript

 TypeScript

29 Mart 2018 Frontend Istanbul icin yapmis oldugum TypeScript sunumu

Eser Ozvataf

March 29, 2018
Tweet

More Decks by Eser Ozvataf

Other Decks in Programming

Transcript

  1. Frontend Istanbul

    29.03.2018

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    kompleksleştikçe dayatmacı olabiliyorlar

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

  12. TYPESCRIPT
    TYPE TANIMLAMALARI
    JavaScript TypeScript

    View full-size 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 full-size slide

  14. TYPESCRIPT
    TYPE TANIMLAMALARI: KOMPLEKS TİPLER

    View full-size slide

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

    View full-size 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 full-size slide

  17. TYPESCRIPT
    TYPE TANIMLAMALARI: DAHA DA KOMPLİKE

    View full-size slide

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

    View full-size 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 full-size slide

  20. AVANTAJLARI
    TYPESCRIPT KULLANARAK NELER KAZANIRIZ?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. NASIL BAŞLARIM?
    TSC KONFİGURASYONU

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  30. TEŞEKKÜRLER

    View full-size slide