giriiş
TypeScript programlama dili, geliştiriciler için JavaScript'e kıyasla birçok avantaja sahiptir. TypeScript, daha az hatayla daha karmaşık etkileşimli uygulamalar ve web siteleri oluşturabilmeniz için ek özellikler sunar.
TypeScript ayrıca, çalışırken kodlama hatalarını tespit etmeyi kolaylaştıran satır içi dokümantasyon ve canlı kod incelemesi sunan geniş bir geliştirici araçları ekosistemine sahiptir.
Bu makalede TypeScript'in ne olduğu ve JavaScript ile nasıl ilişkili olduğu açıklanmakta ve ön uç ve arka uç uygulamaları oluşturmaya başlamanıza yardımcı olacak kaynaklar sağlanmaktadır.
TypeScript nedir?
TypeScript, JavaScript'e ek işlevler ekleyen bir programlama dilidir.
JavaScript, karmaşık ön uç ve arka uç uygulamalarını çalıştırmak için tasarlanmamıştı. Başlangıçta web sitelerine basit etkileşimler katmak için tasarlanmıştı. Örneğin, tıklanabilir düğmeler oluşturmak ve açılır menüleri canlandırmak için.
Ancak JavaScript, onu bunun ötesinde kullanmanın yollarını gören geliştiriciler arasında popülerlik kazandı ve bu da bazı sorunlara yol açtı: dil aşırı affediciydi. Programlama hataları yapmak veya daha sonra bir uygulamayı bozacak özellikleri kötüye kullanmak çok kolaydı ve JavaScript, diğer dillerin birçok özelliğinden yoksundu. TypeScript, mevcut JavaScript ortamlarıyla uyumlu olurken bu sorunları gidermek için geliştirildi.
TypeScript, statik olarak yazılmış bir dildir ve JavaScript'in mevcut sözdizimi ve işlevselliği üzerine kurulu bir JavaScript üst kümesidir. Bu, TypeScript kodunuzda JavaScript kullanabileceğiniz, ancak TypeScript ile yazılan kod JavaScript'te bulunmayan özellikler ve sözdizimi kullandığı için JavaScript kodunuzda TypeScript kullanamayacağınız anlamına gelir.
TypeScript, web tarayıcılarında ve Node.js gibi ortamlarda çalışabilmesi için JavaScript'e derlenmelidir (düşük seviyeli bir dile çevrilmediği için transpired de bir başka terimdir). TypeScript kodu JavaScript'e derlendiğinde, ortaya çıkan JavaScript kodunun doğrudan düzenlenmesi amaçlanmamıştır.
TypeScript uygulamaları oluşturmanın iş akışı, bunları TypeScript'te yazmak, JavaScript'e derlemek ve ardından dağıtmaktır. Bu ekstra adım gereksiz bir karmaşıklık gibi görünse de, bunun çok geçerli bir nedeni var: TypeScript tamamen yeni bir dil olsaydı, dikkate alınmaya değmezdi, ancak mevcut sistemlerde çalışabilmesi için JavaScript'i derlediği için yaygın olarak kabul görmüştür.
TypeScript dosya uzantısı .ts'dir. Aşağıda, temel TypeScript kodları içeren index.ts adlı bir örnek dosya bulunmaktadır:
let message: string = "Hello, World!";
function greeting () {
console.log(message);
}
greeting();Sözdizimi JavaScript'e çok benzese de, bu örnekte farklı bir şey görülüyor: mesaj değişkeninin ardından iki nokta üst üste (:) geliyor ve türü (bu durumda TypeScript) bize mesajın bir dize olması gerektiğini ve farklı bir türde değer alamayacağını belirtmemize olanak tanıyor.
Geliştiriciler için TypeScript'in En Önemli Özellikleri ve Faydaları
TypeScript, ana özelliğinin JavaScript'e tür güvenliği getirmesi nedeniyle bu adı almıştır. Yukarıdaki örnekte, mesaj değişkenine bir dize türü uygulandığından, sayısal bir değer veya başka bir tür kullanılamaz. Bu kısıtlayıcı görünebilir, ancak aslında geliştiriciler için bir avantajdır.
Tür güvenliği ve derleme zamanı kontrolleri programlama hatalarını azaltır
Şu senaryoyu düşünün: İki HTML metin girdisinden değerler alıyorsunuz ve bunları eklemek istiyorsunuz. JavaScript bu değerleri dizeler olarak okur (bir metin kutusudur!). Sonuç olarak şu olur:
let a = "2"; // Assuming the value has been read from a text input
let b = "5";
console.log(a + b); // Result is "25"Bu kod herhangi bir uyarı veya hata olmadan çalışır ve metin kutularındaki değerler dize olarak ele alınır, yani aritmetik işlemler kullanılarak eklenmek yerine birleştirilir ve istenmeyen 7 yerine "25" sonucu elde edilir. Bir iş aracı oluşturuyorsanız ve bir miktar parasal değer katmak istiyorsanız, bu gerçekten kötü olabilir - müşterinizden fazla ücret alıyorsunuz!
Bu, tür güvenliğinin neden önemli olduğunu gösteriyor. Aşağıda, eklenen değişkenlerin türü, onlara bir tür eklenerek uygulanıyor:
let a: number = "2";
let b: number = "2";
console.log(a + b);Bu kodu derleyip çalıştırmayı denerseniz çalışmaz; bunun yerine şu hatayı alırsınız:
'string' türü 'number' türüne atanamaz.
Bu, bir sayısal değişkene yanlışlıkla bir dize değeri atamaya çalıştığınızı ve bu nedenle bunu düzeltebileceğinizi gösterir; örneğin, dizeyi açıkça bir sayıya dönüştürerek. TypeScript, yazım hataları olması durumunda kodunuzun derlenip çalışmasını engelleyerek programınızın hata ayıklamasını kullanıcılarınız için daha kolay ve güvenilir hale getirir.
TypeScript'te çalışırken, bir değişkenin türünü belirtmeniz gerekmez (genellikle belirtmeniz gerekir): tür çıkarımı, değişkenleri tür belirtmeden bildirmenize ve kullanmanıza olanak tanır ve TypeScript, türü değere ve kullanıma göre çıkarır. Bu, TypeScript projelerinde kullanılmak üzere türlendirilmemiş JavaScript kodunu içe aktarırken kullanışlıdır.
Eğer bunu kendiniz denemek isterseniz, TypeScript Playground, derlemeye gerek kalmadan doğrudan tarayıcınızda TypeScript kodu yazmanıza ve test etmenize olanak tanır.
Özel tipler, sınıflar ve arayüzler verilerinizin tutarlı kalmasını sağlar.
TypeScript, kendi özel tiplerinizi desteklemenin yanı sıra sınıflar, arayüzler ve kalıtımda iyileştirmeler sunarak JavaScript'in nesne yönelimli programlamaya yönelik desteğini genişletir.
Kendi nesne türlerinizi ve arayüzlerinizi oluşturmak, verilerinizin doğru şekilde işlenmesini ve depolanmasını sağlamak için verilerinizi TypeScript'te modellemenize olanak tanır.
Sınıflar ve kalıtım, temiz kod ve DRY prensiplerini mümkün kılarak kod tabanınızı geleneksel JavaScript'ten çok daha düzenli tutar.
Enumlar ve sabit türler kodunuzun anlaşılmasını kolaylaştırır
Enumlar, aksi takdirde belirsiz olabilecek değerlere isim vererek kodunuzu daha okunabilir ve kullanışlı hale getirir.
Örneğin, veritabanınızda bir siparişin durumunu, yerden tasarruf etmek ve aramayı hızlandırmak için sayısal bir değer olarak saklıyorsanız, "bekliyor", "ödendi" ve "gönderildi" yerine, bu değerleri sırasıyla 0, 1 ve 2 sayıları olarak saklayabilirsiniz.
Bunun yan etkisi, sayıların kendilerinin pek bir şey ifade etmemesi nedeniyle kodunuzun kafa karıştırıcı hale gelmesidir. Hangi sayının hangi koşula karşılık geldiğini unutup yanlış sayıyı kullanabilirsiniz. Enum'lar kullanışlı bir çözüm sunar:
enum OrderStatus {
pending,
paid,
shipped,
}Yukarıdaki listede, "pending" 0 değerine sahiptir (programlamadaki diğer indeksler gibi, enum'lar da öğelerin konumunu sıfırdan saymaya başlar), "paid" 1 değerine ve "sent" 2 değerine sahiptir. Bir enum kullanırken, değerlerine adıyla başvurursunuz ve indeks değeri döndürülür:
konsol.log(SiparişDurumu.ödendi); // 1 çıktısı verecek
Sabit türler ve birleşimler, değişkenlere belirli değerler atar. Örneğin, yalnızca "kedi" veya "köpek" değerini almayı bekleyen bir fonksiyonunuz olabilir:
function myFunction(pet: "cat" | "dog") {
console.log(pet);
}Kodunuz bu fonksiyona "cat" veya "dog" dışında değerler gönderirse bir hata oluşur. Bu, geliştirme sırasında daha fazla sorunla karşılaşılmasını sağlar: Belirli girdiler bekleyen fonksiyonlar yazabilirsiniz; böylece, beklenmedik bir değer gönderen bir hata oluştuğunda programınız derlenmez.
TypeScript nasıl kurulur ve TypeScript derleyicisi nasıl kullanılır
TypeScript kodunun web tarayıcılarında ve Node.js'de çalıştırılabilmesi için JavaScript'e derlenmesi gerekir ve bunun için TypeScript derleyicisini yüklemeniz gerekir.
Aşağıdaki npm komutunu kullanarak TypeScript'i global olarak kurabilirsiniz.
npm install -g typescript
Kurulum tamamlandıktan sonra npx'i kullanarak terminalinizin herhangi bir yerinden tsc TypeScript derleme komutunu çalıştırabilirsiniz:
tsc endeksi.ts
Yukarıdaki komut, index.ts adlı TypeScript dosyasını derler ve index.js adlı derlenmiş bir JavaScript dosyası çıktısı verir.
TypeScript'te program nasıl yazılır
TypeScript, karmaşık, çok sayfalı uygulamalar ve web siteleri oluştururken öne çıkar. Çoğu geliştirici, tek tek web sayfalarına etkileşim eklemek gibi temel şeyler için kullanmasa da, React veya Angular ile büyük uygulamalar oluşturmak için kullanır.
Birçok geliştirici, geliştirme ve hata ayıklama süreçlerini kolaylaştırmak için kod tamamlama, satır içi dokümantasyon ve hata vurgulama gibi özelliklerden yararlanabilmek adına TypeScript entegrasyonunu destekleyen kod düzenleyicileri kullanır.
Mevcut JavaScript kodumu kullanabilir miyim?
Evet! TypeScript, JavaScript ile uyumludur. Eski JavaScript kodunuzu içe aktarabilir, TypeScript projelerinizde kullanmaya devam edebilir ve yeni TypeScript işlevlerinden yararlanmak için zaman içinde değiştirebilirsiniz.
Tarayıcı için TypeScript ile derlemeyi tamamlayın
React, ön uç uygulamalarınız için kullanıcı arayüzleri oluşturmanıza yardımcı olan bir kütüphanedir. Yeniden kullanılabilir bileşenler oluşturmanız için size temel sağlar ve uygulama geliştirmenizi modüler ve basit hale getirir. Ayrıca, sayfadaki içeriği göstererek, gizleyerek, taşıyarak ve görünümünü değiştirerek kullanıcının etkileşim kurabileceği dinamik sayfalar oluşturmanıza olanak tanır. React uygulamaları TypeScript ile yazılabilir: Bu kombinasyon, ön uç geliştiriciler için popüler ve güçlü bir araç zinciridir.
Angular, bileşenlerini oluşturmak için TypeScript kullanan eksiksiz bir çerçevedir. React'ın ötesine geçer: Kullanıcı arayüzleri oluşturmak için araçlar sağlamanın yanı sıra, eksiksiz bir uygulama için de bir çerçeve sunar. Angular'ın kavramsal yaklaşımı, uygulama konseptleri Angular mimarisine uygun olduğu sürece geliştiricilerin daha hızlı geliştirmelerine olanak tanır.
Hem React hem de Angular, Ionic ve Electron için TypeScript uygulamaları oluşturmak için kullanılabilir. Ionic, TypeScript kullanarak iOS ve Android için mobil uygulamalar oluşturmanıza olanak tanırken, Electron, web uygulamalarınızı Windows, Linux ve MacOS için masaüstü uygulamalarına yerleştirmenize olanak tanır.
Sunucuda TypeScript Arka Uçlarını Dağıtma
TypeScript, yalnızca ön uç uygulamaları oluşturmakla sınırlı değildir. Node.js ile birlikte arka uç hizmetleri ve komut satırı uygulamaları geliştirmek için de kullanılabilir.
TypeScript'i Fastify web framework'üyle birlikte kullanabilir veya tür güvenli API'ler oluşturmak için Nest gibi TypeScript'e özgü bir framework kullanabilirsiniz.
TypeScript ve GraphQL
GraphQL, API'lerden veri aramak ve almak için kullanılan bir sorgu dilidir. TypeScript gibi, tür bazlıdır, bu nedenle yapılandırılmış ve tutarlı veriler sağlar. GraphQL'i arka uçlarınızda uygulamak için GraphQL'i destekleyen hizmetleri kullanarak ve türlerini TypeScript kodunuzla eşleştirerek, arka uç hizmetlerinizde modellenen tüm verilerin ön uçlarınıza doğru şekilde yansıtılmasını ve ön uçlarda toplanan tüm verilerin yüklendiğinde doğru şekilde depolanmasını sağlayarak uygulamalarınızın kalitesini önemli ölçüde artırabilirsiniz.
Oluşturulabilir içeriğinizi yönetmek için Contentful kullanıyorsanız, topluluk üyelerimiz içerik türleriniz için tür bildirimleri oluşturmanıza ve TypeScript'i içerik modelinizle senkronize etmenize yardımcı olan uygulamalar ve araçlar oluşturmuştur.
