Image for post
Image for post
Photo by Damon Hall on Unsplash

TYPESCRIPT

TypeScript kurumsal ve diğer şirketlerde, kod altyapıları Java/C# olan geliştiricilerin Object-Oriented alışkanlıklarını bırakmasını gerektirmeden Javascript kod oluşturmalarına imkan sağlıyor. Bu yazıda Java ve TypeScript sytax karşılaştırmaya çalışacağız.

Bu hikaye Java/C# Geliştiricilerine TypeScript-1 yazısının devamı olarak yazılmıştır. Bu yazıda Beauty and the Beast: Java Versus TypeScript Object Oriented bölümü üzerinden ilerliyor olacağız . Burda bazı özellikler zaten JavaScript’den geliyor ama ben aşağıdaki karşılaştırmalarda TypeScript diyeceğim.

1. Class Karşılaştırması

Aşağıdaki resimde Class tanımlamalarında 3 temel farklılıkdan bahsedilebilir.

  • TypeScript Access Modifier tanımlamanıza gerek yok bu durumda public algılıyor
  • TypeScript içerisinde fonksiyonlara default değeri verebiliyorsunuz.
  • TypeScript parametreyi isterseniz geçmeyebilirsiniz. (optional paramaters) undefined olarak kendisi geçmeyen parametreler yerine çağrım yapar.


Image for post
Image for post
Photo by John Duncan on Unsplash

TYPESCRIPT

TypeScript kurumsal ve diğer şirketlerde, kod altyapıları Java/C# olan geliştiricilerin Object-Oriented alışkanlıklarını bırakmasını gerektirmeden Javascript kod oluşturmalarına imkan sağlıyor, Interface, Abstract, Class, Extends, Static vb.. Bu yazıda TypeScript’in Java diline sytax olarak ne kadar benzediğini, bu benzerliğinin’de aslında Java/C# geliştiricilerin JavaScript olan ısınma süreçlerini kısalttığını göreceksiniz.

Burda yanlız şöyle bir yanılgıya’da düşmemek lazım. TypeScript ile herşeyi Class ve Object-Oriented yapılar ile geliştirmeliyim. Bu yanlış bir düşünce tarzı çünkü UI Domainde Object-Oriented yaklaşım çokda uygun değil. Bu yüzden daha Fonksiyonel Programlamaya doğru bir yönelme var.

Tabi günümüzde Javascript sadece UI geliştirmede değil Node ile Sunucu ve Local ortamlarda farklı uygulama, api vb.. amaçlar için kullanılıyor. Bu yüzden TypeScript hem Object-Oriented, hemde Functional Programming özellikleri desteklemesini bir zenginlik olarak görmek ve bu özellikleri uygun yerlerde kullanmak gerekir.

Aşağıda TypeScript sayfasında aşağıda kırmızı ile çizdiğim kısımlarda bu konulara değiniyor. …


Image for post
Image for post
Photo by dfkt on Unsplash

TYPESCRIPT

TypeScript tür tanımlaması yapmak her zaman kolay olmayabilir, bu tarz durumlarda any, unkown gibi türler kullanılması veya tekrar tekrar kullanılacak yeni türler oluşturabilmek için interface ve farklı türlerde

Bu yazımızda ilk konularda anlattığımız TypeScript Nedir ? ve TypeScript Basics yazımızın devamı olacak şekilde sistemimizi daha esnek ve genişletilebilir yazmak için kullanacağımız özel türleri inceliyor olacağız. Bu yazıda;

  • Any
  • Unknown
  • Interface
  • Enum
  • Tuples
  • type alias
  • Union Types
  • Intersection Types
  • Literal Types

1. Any Kullanımı

Örneğin GitUser github api üzerinden çağırdığımızda response.json() sonrasında dönen değerin nasıl olacağını bilemeyebiliriz. Burda user üzerinde mouse ile geldiğimizde any değerinin olduğunu görürsünüz. Bunu bazı durumlarda REST servislerinden dönen veri tiplerini bilemediğimiz durumlarda kullanmak avantajlıdır. Bu sisteme TypeCheck yapma der.


Image for post
Image for post
https://2020.stateofjs.com/en-US/tshirt/

FRONTEND KAPSAM

Her sene JS ve CSS konusunda dünya çapında bir anket düzenlenip. Bu anketin sonuçları StateOfJS , StateOfCSS sitelerinde yayınlanıyor. 2020 için hazırlanan sitede bir Periodic Cetvel oluşturmuşlar Bu yazıda cetvele bakıyor olacağız.

Bu yazımda JS popüler kütüphaneler ile ilgili yayınlanmış Tişört bastıkları JS Periodik Cetveline daha yakından bakalım.

1. JavaScript Flavors

Dynamic Typing yerine Static Typing veya bir takım ekstra fonksiyonel programlama yeteneklerini desteklemek için JS Flavors diller ile kod geliştirerek bu kodların Transpiler aracılığı ile Javascript diline dönüştürülmesi yaklaşımı günümüzde oldukça popüler hale gelmiş durumda. Peki bu diller nasıl JS dönüştürülüyor konusunda detay için bu konuda yazmış olduğum TypeScript Nedir? yazısını okuyabilirsiniz.


Image for post
Image for post
Photo by Boris Smokrovic on Unsplash

TypeScript

TypeScript Type Güvenliğini sağladığından bahsetmiştik. Peki nedir bu temel Type türleri ve bunları kod içerisinde nasıl kullanıyoruz ? Implicit , Explicit Type Declaration nasıl gerçekleşiyor ?

Bu yazıda TypeScript Temel Türlerini nasıl tanımladığımızı anlatmaya çalışacağım.

A. Type Annotations

JavaScript tip tanımlamaları String, Number, Boolean ve Object iken bunun TypeScript karşılığı küçük harfle başlayacak şekilde aşağıdaki resimdeki gibi tanımlanır. string, boolean, number, {}, string[], number[], Array<string>


Image for post
Image for post

Hooks Behind

Dan Abramov Redux, Hook vb.. bir çok React özelliğinin ve kütüphanesinin geliştiriminde ana ekip içerisinde yer alıyor. Bundan dolayı sitesinde yer alan içerikler biraz daha konuların detayına ,arka planını anlatan konular. Bu yazı serisinde bu blog yazılarını analiz ediyor ve örnek kodlar ile deniyor olacağız.

Dan Abramov kişisel blog sitesinde yer alan yazıların React ve JS ekosistemdeki bir çok konuyu derinlemesine anlatması ve analiz etmesi nedeniyle çok zengin bir bilgi kaynağı. Bizde bu yazı ile başlayarak içerikleri analiz etmeye başlayacağız. Her bir blog yazısı üzerine belki bir veya daha fazla inceleme yazısı oluşturacağız, bazıları ise ilgimizi çekmediği onlardan da hiç bahsetmeyeceğiz. İşte bu ayrımı yapabilmek için bu yazıda önden blog yazılarına bir göz gezdireceğiz.

1. Why Do We Write super(props)?

Bu yazıda Class Component Constructor içerisinde super(props) neden ve nereye yazmamız gerektiğini irdeliyor.


Image for post
Image for post
Photo by Svetozar Cenisev on Unsplash

TypeScript

Bu yazıyla TypeScript konusuna giriş yapmayı ve ilerleyen konularla bir yazı serisi oluşturmayı planlıyorum. İlk olarak neden JS (EcmaScript) varken TypeScript ihtiyaç duyuyoruz bunu anlatmaya çalışağım.

JS Tarihçesi yazımda Javascript’in gelişimi hakkında konuşurken Node ile JavaScript’in sadece tarayıcı içerisinde değilde, Sunucu, Desktop, Mobil ve iOT cihazlarında çalışabilir hale gelmesinden bahsetmiştim. Bu değişim geliştireceğimiz uygulamaların büyüklüklerini veya gereksinimlerini değiştirmiştir.

JS ile daha büyük proje geliştirme ihtiyacı, daha büyük ekipleri oluşturmayı ve beraber çalışabilmelerini zorunlu hale getirmiştir.

Bunun için işi soyutlamak(abstraction), parçalara ayırmak(module) ve birbirinin rahat bir şekilde kullanımına(composition) sunabilmeniz gerekiyor.

JS Modüllerindeki gelişim bunu (IIFE →CJS→AMD →ES6) sağlamıştır. Node gelişimi ile birlikte geliştirilen modüllerin bir Repo’da toplanıp rahatça indirilebilmesi için NPM geliştirilmiş tir.

Peki bu Node modüllerini sadece Sunucu tarafında mı kullanacağız? Frontend geliştiricileri de bu kütüphanelerden nasıl faydalanabilir. Browserify , Webpack gibi araçlar çıkmış, Babel sayesinde burdaki Tarayıcı uyumsuzlukları Babel dönüştürücüsü ile çözülmeye başlanmıştır. …


Image for post
Image for post
Photo by Steve Johnson on Unsplash

REACT UI STYLING

Daha önceden React ile basit bir Hesap Makinesi geliştirmiştim. Bu yazıda da bu uygulamayı nasıl stillendireceğimi anlatacağım.

İlk hesap makinesi örneğinde Hesap Makinesi mekaniği üzerinde durmuştuk ve bu konuyu anlatmıştık. Oluşturduğumuz ekranlar aşağıdaki gibiydi. Bu yazıda hesap makinemizi nasıl stillendirebileceğimiz üzerinde duracağız.


Image for post
Image for post
Photo by Chris Charles on Unsplash

JAVASCRIPT’IN TARIHÇESI

Javascript Tarihçesi kapsamında anlattığım konular ile ilgili örnekleri RunJS denenebilecek şekilde github paylaştım, detayları aşağıda anlatıyorum.

Uzunca bir süredir onurdayibasi.com JS, JS ile Fonksiyonel Programlama ve JS ile Algoritma ve Veri Yapıları konusunda blog postlar paylaşıyorum.

Not: İleride Typescript konularında bu kısımda anlatıyor olacağım.


Image for post
Image for post
Photo by Pavan Trikutam on Unsplash

TEMEL İNTERNET BILGISI

Bu yazıda İstemci(Tarayıcı veya Mobil Cihaz) ile Sunucu(Server) arasında kullanılan iletişim yöntemlerinden HTTPRequest ve Websocket yöntemlerini analiz ediyorum.

Tarayıcı (Browser) ve Mobil cihazlar, Sunucular ile haberleşerek üzerlerinde bir sürü farklı uygulama geliştirmemize olanak sağlıyorlar. Örneğin ePosta araçları, oyun, E-Ticaret sitesi, Netflix, Spotify, vb… Hepsinde biz kullanıcıların kullandığımız cihazlardan , sunuculara bağlantı kurarak uygulamalarımızı gerçekleştiriyoruz.

Burada 2 yöntemden bahsediyor olacağım.

  • HTTP
  • WebSocket

About

Onur Dayıbaşı

Senior Frontend Developer at Thundra

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store