TYPESCRIPT

TypeScript Special Types

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

Onur Dayıbaşı

Published in

Frontend Development With JS

6 min readJan 16, 2021

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.

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

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.

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.

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.

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.

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.

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.

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

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

Ö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.

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

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.

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

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

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

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

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

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.

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.

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.