Photo by dfkt on Unsplash

TYPESCRIPT

TypeScript Special Types

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 kullandığı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 Type Check yapma der.

Any Kullanımı

Aynı kodu RunJS içerisine kopyalayarak sonunu görebilirsiniz.

Any on RunJS

2. Unknown Kullanımı

Any kullandığımızda JS eski dünyasına geri dönmüş oluruz. Burada Type kontrolü yapmak sizin kontrolünüzdedir. Ama istersek bunun yerine tipini ilk başta bilmeyen geliştiricinin bunu type kontrolü yapmaya zorlayabiliriz. Buda unknown ile gerçekleşir.

unknown kullanımı

Yukarıdaki resimde görüldüğü gibi unknown type sizin değeri bir değişkene atmanızı veya onu bir düşündüğünüz tipte kullanmanıza izin vermez. Ama bunu typeof check kontrol ettikten sonra ilgili type ile ilgili işlemleri yapmanıza izin verir.

unknown kullanımı

3. Interface Kullanımı

Aynı sınıflarda olduğu gibi birden fazla aynı objeden kullanmak istediğimizde obj instance yanına aynı tip tanımlamaları yapmak yerine interface kavramını kullanabiliriz. Bu Javadaki Interface benzer :). Aşağıda örnekte User interface kullanan objelerde eksiklik olduğunda sistem bize uyarı verecektir.

Interface kullanımı

Peki daha kompleks yapılar oluşturabilirmiyiz. Yani birbirinden türeyen interface’ler yapmak istersek. Biz Triange → Shape türetmek isteyelim. Bu şekilde extends sayesinde interface üretimini daha kolaylaştırmış ve tekrarlamadan yapmış oluruz.

extends

users durumu: Peki bir array içerisinde obje türü atmak isterken değeri fazladan w almış olan deniz objesini direk array tanımlarken veya push ederken yapıyorsak typescript hata verir.

users1 durumu: Ama obje daha önceden oluşturulmuş ve interface değerlerini sağlıyorsa buna sorun çıkarmaz. bu objeyi array içerisine atmanıza izin verir.

users2 durumu: eksik değerli bir objeyi array atmaya asla izin vermiyor.

Array push different Obj Types…

Peki aynı özelliklere sahip farklı interface için durum ne olacak ? Bu durum için TypeScript hata vermez. Örneğin aşağıdaki resimde görüleceği gibi logUser fonksiyonundan OtherUser interface türüyen nesneyi uyarı vermeden kullandığını görebilirsiniz.

Same Shape but Different Interfaces

Aynı örneği RunJS içerisinde çalıştırdğımızda sonuçları görebiliyoruz

RunJS çıktıları

Peki interface içerisindeki değerin undefined gelme ihtimali varsa nasıl bir yöntem uygulayacağız. Bu durumda Optional Prop Check koyarak ?: gelebilecek değerin undefined olmasını TypeScript söyleriz. Sonrasında bununla ilgili check sizin yapmanız gerekiyor tabi..

Optional Prop Check

Örneğin değişkenler tanımlamak istersek bunu nasıl yapacağız. Burada JS’dekine benzer bir yapı aşağıdaki şekilde yapabiliyoruz ama tüm elemanları tek tiptek tanımlamamız gerekiyor. Number tipli değişkenleri’de string yaparsak extras:string şeklide değişken daha esnek interface tanımlayabiliriz. Aşağıdaki durumda age:number türünde olması hata vermektedir. Bunuda string yapıp string değeri atadığımızda bu sorun ortadan kalkacaktır.

extras:string

Aşağıdaki şekilde gibi bir tanımlama yaptığımızda sorunun giderildiğini görebilirsiniz.

extras:string

4. Enum Kullanımı

Bazen JS const modX, modY, modZ gibi birbiri ile ilişkili olan tanımlamalar yaparız ve bu değerleri switch içerisinde karşılaştırırız. Bu şekilde tek bir yerden const tanımlamalar hem tekrarlamayı hemde değerinin her yerden ortak kullanılmasını sağlar.

const tanımlama

Bunun yerine static dillerdeki enum yapısı bu şekilde yapıları daha derli toplu yapmamızı sağlar.

enum tanımlama

Eğer biz bu indeksin 1'den değilde başka bir indeksten başlamasını istiyorsak başlangıc indeksini atayabilirsiniz.

enum set index start

Veya her değişkene farklı bir değerde atayabilirsiniz.

enum tüm değerlerine farklı değer atayabilirsiniz.

5. Tuple Kullanımı

React Hook dan hatırlarsınız. [count, setCount] = useState(2) vb.. tanımlamaları daha çok yapar olduk. Burda bir array içerisinde aynı tipte değilde farklı tipte değişkenler olduğunda ve bunların sayısını ve sırasını bildiğimiz yapılara tuple diyoruz

JS Hook Benzeri Bir Yapı
Tuple Kullanımı

Yukarıdaki örnekten de anlaşılacağı gibi fonksiyonunuz geriye bir değer dönmüyor ise void ile belirtmenizde fayda vardır. setCount verilen değeri atıyor ama geriye bir değer döndürmüyor.

6. Type Alias

Matris tanımlaması yapmak istiyoruz diyelim mat2x2 için 2 li number tuple oluşturmamız gerekiyor

Matris2x2 Tuple

Peki matris 4x4 olduğunda bu işlemi kolaylaştırabilecek bir yapı mevcut mu ? Burda 4 lu row için bir dinamik bir tür tanımlayabiliriz. Aslında tür değil de mevcut bir tanımlamaya alias vererek onu kolay çağırabilecek hale getiriyoruz

Matris4x4 type tanımlama

Burda type alias ile interface arasında benzerlik var gibi duruyor ama type alias yeni bir tip oluşturmuyor interface, func veya diğer türler için alias oluşturmanızı sağlıyor, interface se daha yapısal ve hiyerarşik yapılarak kurmanızı sağlıyor.

7. Union Types

Bazı değişkenlerin aynı anda birden fazla türü desteklemesini isteyebiliriz. Bu durumda union | kullanarak 2 veya daha fazla türü bu değişkene tanımlayabiliriz. Örneğin aşağıda Shape bg (background) için hem color , hemde pattern interface türlerini vermek istersek aşağıdaki resimde görüldüğü gibi bg : color | pattern tanımlaması yaparak bg istediğimiz türü atayabiliriz. Ama kullandığımız yerde hangi türde olduğunu anlamak için ektra kontroller eklememiz gerekiyor.

union type tanımlama

8. Intersection Types

Bazı değişkenlerin elemanlarının birleşimini değişkene tanımlamak istiyorsam, Bu durumda & intersection özelliğini kullanarak aşağıdaki gibi bir yöntemle bu superCoordinate x,y,z değişkenlerine sahip bir tür özelliğini kazandırabiliriz.

Intersection Types

9. Literal Types

Bir değişkene tür değilde direk değerini atarsak aynı const gibi artık o türdeki değeri değişmez. Bu da bazı durumlarda bize çok kolaylık sağlar. Örneğin aşağıdaki Oval tanımları gibi.. Diğer tanımlama da enum tanımlamak yerine basitçe değerlerini union hale getirerek değişkene verebiliriz veye type tanımlayabiliriz.

Literal tanımalama

Referanslar

Kaynak Kod

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

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