Slide 1

Slide 1 text

Frontend Istanbul
 29.03.2018

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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ı

Slide 7

Slide 7 text

TYPE’LAR GÜNÜMÜZDE… Basit ölçeklerde güzel ancak veri tipleri
 kompleksleştikçe dayatmacı olabiliyorlar

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

TYPESCRIPT TYPE TANIMLAMALARI JavaScript TypeScript

Slide 13

Slide 13 text

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<,>

Slide 14

Slide 14 text

TYPESCRIPT TYPE TANIMLAMALARI: KOMPLEKS TİPLER

Slide 15

Slide 15 text

TYPESCRIPT TYPE TANIMLAMALARI: NESNE YÖNELİMLİ

Slide 16

Slide 16 text

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 … …

Slide 17

Slide 17 text

TYPESCRIPT TYPE TANIMLAMALARI: DAHA DA KOMPLİKE

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

AVANTAJLARI TYPESCRIPT KULLANARAK NELER KAZANIRIZ?

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

NASIL BAŞLARIM? TSC KONFİGURASYONU

Slide 27

Slide 27 text

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/

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

TEŞEKKÜRLER