TypeScript

 TypeScript

29 Mart 2018 Frontend Istanbul icin yapmis oldugum TypeScript sunumu

D518bd56413643cbed1c8a02c25898cc?s=128

Eser Ozvataf

March 29, 2018
Tweet

Transcript

  1. Frontend Istanbul
 29.03.2018

  2. HAKKIMDA ESER ÖZVATAF ▸ Kurumsal Mimari @ KoçSistem ▸ Açık

    Kaynak Gönüllüsü ▸ Halen Lisansüstü Öğrencisi /eserozvataf /eserozvataf
  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
  4. ‣ TYPE’LAR ‣ KUTU AÇILIŞI ‣ NE DEĞİL? ‣ AVANTAJLARI

    ‣ NASIL BAŞLANIR? Bugün bahsedeceklerim:
  5. TYPE’LAR NE İŞE YARARLAR? GÜNÜMÜZDE…

  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ı
  7. TYPE’LAR GÜNÜMÜZDE… Basit ölçeklerde güzel ancak veri tipleri
 kompleksleştikçe dayatmacı

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

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

    PLAIN JAVASCRIPT. typescriptlang.org TYPESCRIPT
  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
  11. TYPESCRIPT JAVASCRIPT’İN ÜZERİNE NE EKLER? ▸ Static Type Tanımlamaları ▸

    …İkinci bir şey yok
  12. TYPESCRIPT TYPE TANIMLAMALARI JavaScript TypeScript

  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<,>
  14. TYPESCRIPT TYPE TANIMLAMALARI: KOMPLEKS TİPLER

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

  16. TYPESCRIPT TYPE TANIMLAMALARI: DAHASI ‘ease-in’ ‘ease-in’ | ‘ease-out’ [ 5,

    ‘deneme’, 3, 7 ] Array<number | string> function (a) { return a.length; } (val: string) => number { ‘a’: 1, ‘b’: 2 } { [key: string]: number } Union Types T1 & T2 Generic Types T1<T2> … …
  17. TYPESCRIPT TYPE TANIMLAMALARI: DAHA DA KOMPLİKE

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

  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
  20. AVANTAJLARI TYPESCRIPT KULLANARAK NELER KAZANIRIZ?

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

    net aktarabiliriz
  22. AVANTAJLARI TYPESCRIPT KULLANARAK NELER KAZANIRIZ? ▸ Typo’lara ve yeniden isimlendirmelere

    karşı bizi uyarır
  23. AVANTAJLARI ECMASCRIPT STANDARTLARINA BUGÜNDEN SAHİP OLMAK (KISMEN) ▸ Tercih edildiği

    takdirde kodu yorumlarken eski standartlar seviyesine düşürür
  24. NASIL BAŞLANIR? KURULUM, DESTEK VE DİĞERLERİ

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

    (tsconfig.json)
  26. NASIL BAŞLARIM? TSC KONFİGURASYONU

  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/
  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
  29. NASIL BAŞLARIM? ▸ Daha fazlası için typescriptlang.org ▸ Sorular? /eserozvataf

    /eserozvataf SON OLARAK…
  30. TEŞEKKÜRLER