TypeScript

TypeScript Nedir?

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ışacağım.

Onur Dayıbaşı

Published in

Frontend Development With JS

5 min readJan 9, 2021

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.

Webpack, Babel, SCSS vb.. preprocessor yapıları Pandora’nın kutusunu açmıştır. Biz geliştiriciler artık tarayıcının anladığı JS ve CSS seviyesinde kod yazmak zorunda kalmayacaktık. Bu gelişim aslında eskiden yaşanan bir gelişimin benzeri;

Assembly ve Makine Kodu ile yazılım geliştirmenin zorluğu, yazılımcıların daha yüksek yani geliştiricilerin anlayabileceği diller tasarlanmasına sebep olmuş yani Java, C++ olduğu gibi.

Bu özellikler şimdi JS ekosisteminde var oluyor. , Typescript, Sass dilleri kullanılabilir hale geldik. React projelerinde yer alan JSX kullanımı da bu Preprocessor sayesinde aslında arka planda React API dönüştürülerek çağrımları gerçekleştirir. Bu sayede geliştiricilerin Imperative API kullanma detaylarından soyutlayarak Declarative tanımla <MyComp> çok daha hızlı kod geliştirilebilir bir hale getirmiştir.

Büyük ekipler ile çalışırken, Backend ve API üzerinden veriler ile çalışırken Dinamik Tip (Dynamic Typing) bir dil geliştirmeler sırasında esnekliğinden dolayı birçok hataya yol açabilir. Bu nedenle çok dikkatli kullanılması gerekir.

Büyük projelerde herkesin bu dikkati gösterMemesi, projeye sonradan dahil olan, veya JS konularına hakim olmayan geliştiricilerin projede oluşturabilecekleri hataları minimize etmek için TypeScript gibi Type güvenliği sağlayan diller kullanırız.

Bundan dolayı araya bir katman daha koyarak geliştirdiğimiz kodumuzun transpile edilmesi ve yazdığımız JS kodlarında oluşacak hataları daha öncesinden tespit etmiş oluruz. Bu aşamada JS dışındaki dilleri → JS diline dönüştürecek ara transpiler ihtiyaç bulunur. Bunlardan bazıları;

Yani artık yazdığımız kodlar. Typescript → EcmaScript (X version) → EcmaScript (X-n versiyon) şeklinde dönüştürücüler sayesinde tarayıcının istediği JS versiyonuna kodumuzu dönüştürebiliriz.

Dönüştürücü (Compiler, Transpiler Kavramları)

Dönüştürücüleri compiler , bazende transpiler ile adlandırıyoruz. Aslında Typscript, Babel, Sass gibi dönüştürülere Transpiler deniliyor. Bunun nedeni birbirine yakın seviyedeki dillerin bir birine dönüştürülmesi yani TypeScript → EcmaScript(JS) çıktısını geliştirici aynı şekilde okuyup anlayabildiği için bu tarz dönüştürücülere Source-to-Source Compiler deniliyor.

Compiler ise High-Level Language dediğimiz (C, C++, Java, .Net…) dillerden makinenin anlayacağı Binary dile dönüştüren dönüştürücüler için kullanılıyor. gcc gibi

Ama dökümanlar ve blog postlarda bu çok dikkat edilen bir konu değil. Bundan dolayı bu isimlendirme karmaşasına bakmadan okumanızı devam edin 😄

TypeScript Kurulumu

npm install -g typescript

Detaylı kurulum için bu linkten faydalanabilirsiniz. Zaten VSCode, IntelliJ ve diğer IDE’lerin TypeScript destekleri olduğu için bunlar ya hazır kurulu olarak geliyor veya Pluginler ile hızlı bir şekilde kurabiliyorsunuz.

TypeScript Ne Sağlıyor ?

Basit bir örnek ile ne işe yaradığını anlatacağım. Daha detaylı konuları ileriki yazılarımda anlatıyor olacağım.

Örneğin basit bir toplama kodumuz olsun. Bu değerleri ekrandan, bir Rest API’sinden alıyor olabiliriz. Biz sum fonskiyonun da 2 sayıyı toplamak isteyen bir kod yazmak isterken JS Dynamic Type bir dil olmasından dolayı String + Number toplamamıza izin veriyor.

Peki biz bu kodu JS düzeltemez miyiz? Evet düzeltebiliriz. Aşağıdaki şekilde koda type check eklediğimizde kodun hatalı çalışmasını önleyebiliriz.

Burada sorun kodun her yerine bu şekilde kodlar yazarak geliştirmek yerine bunu daha Type Safe tanımlama izin veren bir dil olsa ve bu hataları Compile Time’da yani Kodu Çalıştırma ortamına atma öncesinde alabilsek ve düzeltsek.

İşte bunun TypeScript benzeri dilleri kullanabiliriz. Burada hemen bize uyarı veriyor kodumuz.

Aynı Kod .ts olarak yazıldığında

Kod içerisinde fonksiyon parametrelerine number tipini vererek sum fonksiyonuna string değer geçirmemizi engellemiş oluruz.

Typescript number tipi

Basitçe TypeScript kodun daha anlaşılır olması ve hataların engellenmesi için öncesinden değişkenlere verdiğimiz tip değerlerine göre kodun denetlenmesi ve kullanıcının uyarılmasını sağlayan mekanizmadır.

Not

Ekstra olarak TypeScript yani tsc 'nin nasıl çalıştığı konusunu belirleyen bir konfigürasyon dosyası bulunur. Bu dosyayı

tsc --init // dendiğinde tsconfig.json oluşur

Bu dosyanın içerisine baktığımızda bir çok parametre bulunur. tsconfig json içerisinde birçok parametre bulunuyor. Çoğu disabled edilmiş olarak duruyor.

target : TypeScript dönüşeceği hedef EcmaScript versiyonu belirtir.
module: module sistemi yani import/export mekanizmalarında hangi lib yapısından faydalanacağınızı belirtmenizi sağlar.

strict: Kodunuzun içerisinde yazarken bazı kısımları eksik bıraktığınızda bunları JS olduğu gibi any kodu ile çağırabilir. Null kontrolleri yapmaz vb.. bunun yerine strict seviyesini ayarlayabilmemizi sağlar. Bu projeye yeni başlarken belki strict=true ile başlamak basitken, proje çalışan legacy bir kod ise JS → TS geçişi yapılıyor ise bu kısımlarda strict seviyesi düşürülebilir.