TypeScript

29 Mart 2018 Frontend Istanbul icin yapmis oldugum TypeScript sunumu

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