TypeScript Programlamada En İyi Uygulamalar
Bu makale TypeScript programlamada en iyi uygulamaları açıklar.
Bu rehber, hataları azaltmak ve daha okunabilir kod yazmak için TypeScript'in tiplerinden nasıl faydalanılacağını gösteren pratik en iyi uygulamaları açıklar.
YouTube Video
TypeScript Programlamada En İyi Uygulamalar
TypeScript’in en büyük faydası 'tiplerle hataları önlemek ve kodun amacını netleştirmektir'.
En iyi uygulamalar sadece kurallar değil, güvenli, okunabilir ve sürdürülebilir kod yazabilmek için prensipler bütünüdür. Aşağıda, yaygın olarak kullanılan TypeScript en iyi uygulamalarını pratik örneklerle tanıtıyoruz.
any tipinden kaçının ve her zaman tiplere anlamlı tanımlar verin
any kullanımından kaçınmak ve anlamlı türler vermek noktasına ilk olarak bakalım.
any tipi tamamen tip kontrolünü devre dışı bırakır ve TypeScript kullanım amacını boşa çıkarır. Sadece işleri yürütmek için any kullanmak yerine, mümkün olduğunca açıklayıcı tipler tanımlamak önemlidir.
1// Bad
2function parse(data: any) {
3 return data.value;
4}Bu kod herhangi bir değeri kabul edebilir, bu yüzden çalışma zamanı hataları önlenemez.
1// Good
2type ParsedData = {
3 value: string;
4};
5
6function parse(data: ParsedData): string {
7 return data.value;
8}Tipler tanımlayarak girdilerin ve çıktının amacını netleştirir ve güvenliği artırırsınız.
Nesne yapılarını her zaman açıkça type veya interface ile tanımlayın.
Şimdi de, nesne yapılarını her zaman type veya interface kullanarak açıkça tanımlamak noktasına bakalım.
Nesneleri rastgele kullanırsanız, yapıları belirsizleşebilir. Yeniden kullanılabilirlik ve sürdürülebilirlik için her zaman tipleri ayırın.
1// Bad
2function createUser(user: { name: string; age: number }) {
3 console.log(user.name);
4}Kodun küçük parçalarında bile, türleri ayırma alışkanlığı geliştirmek önemlidir.
1// Good
2type User = {
3 name: string;
4 age: number;
5};
6
7function createUser(user: User): void {
8 console.log(user.name);
9}Tiplere isim vererek, genel kod tabanını anlamak çok daha kolay olur.
Tüm olası durumları hassas şekilde göstermek için birleşim tipleri kullanın.
Koşullarda sadece ham string veya number tipleri kullanırsanız, beklenmeyen değerler aradan kaçabilir. Birleşik türler kullanarak, yalnızca izin verilen durumları tür seviyesinde temsil edebilirsiniz.
1// Bad
2function setStatus(status: string) {
3 console.log(status);
4}Bu kodda, anlamsız dizeler veya yanlış değerler derleme zamanında tespit edilemez.
1// Good
2type Status = "idle" | "loading" | "success" | "error";
3
4function setStatus(status: Status): void {
5 console.log(status);
6}Birleşik türler kullanarak, 'imkansız durumları' derleme zamanında güvenilir bir şekilde ortadan kaldırabilirsiniz. Sonuç olarak, koşullu dalların güvenliği ve kodun güvenilirliği artacaktır.
null ve undefined değerleri açıkça yönetin.
Şimdi de, null ve undefined değerlerini açık bir şekilde ele almak noktasına bakalım.
TypeScript'te, bir değerin yokluğunun türde belirtilmesi önemlidir. Belirsizlikleri korursanız, bu çalışma zamanı hatalarına yol açabilir.
1type User = {
2 name: string;
3 email?: string;
4};email mevcut olmayabilir, bu yüzden o varsayımla işlem yapmalısınız.
1function printEmail(user: User): void {
2 if (user.email) {
3 console.log(user.email);
4 }
5}Opsiyonel değerleri kullanmadan önce mutlaka kontrol edin.
Tip belirteçlerini (as) yalnızca son çare olarak kullanın.
Şimdi de, tip atamalarını aşırı derecede kullanmamak noktasına bakalım.
Tür belirtmeleri, TypeScript'in tür kontrolünü geçici olarak atlayarak, 'Bu değerin bu türde olduğunu biliyorum.' demenizi sağlar. Bunları aşırı kullanmak tip güvenliğini zedeler.
1// Bad
2const value = input as string;Bu kodda, gerçek değer bir dize olmasa bile hata oluşmaz, bu da çalışma zamanı hatalarına neden olabilir. Aşağıdaki kodda gösterildiği gibi, önce tür koruyucuları kullanarak güvenli bir şekilde kontrol etmeyi tercih edin.
1// Good
2function isString(value: unknown): value is string {
3 return typeof value === "string";
4}
5
6if (isString(input)) {
7 console.log(input.toUpperCase());
8}Tür koruyucuları, gerçek değeri kontrol ederken türü güvenli bir şekilde belirlemenin bir yoludur. Tür belirtmelerine göre tür koruyucularını önceliklendirerek, çalışma zamanı hatalarını daha kolay önleyebilirsiniz.
Dönüş tiplerinde tip çıkarımına fazla güvenmeyin.
Şimdi de, dönüş türleri için fazlasıyla çıkarımlara güvenmemek noktasına bakalım.
TypeScript'in tip çıkarımı güçlüdür, fakat public fonksiyonların dönüş tiplerini açıkça belirtmek daha güvenlidir. Bu, gelecekteki değişikliklerin potansiyel etkisini en aza indirir.
1// Bad
2function sum(a: number, b: number) {
3 return a + b;
4}Küçük fonksiyonlarda bile amacınızı net bir şekilde belirtin.
1// Good
2function sum(a: number, b: number): number {
3 return a + b;
4}Dönüş tiplerini yazmak API'nizin istikrarını artırır.
Girdileri güvenli şekilde yönetmek için unknown kullanın.
unknown kullanarak harici girdileri güvenli bir şekilde kabul etmek noktasına bakalım.
API'ler, JSON veya kullanıcı girdileri gibi harici girdilerde any yerine unknown kullanın. Bunu yaparak, tüm değerlerin doğrulandığından emin olur ve tür güvenliğini korursunuz.
1// Bad
2function handleResponse(data: any) {
3 console.log(data.id);
4}unknown ile tipleri böyle doğrulayabilirsiniz.
1// Good
2function handleResponse(data: unknown): void {
3 if (
4 typeof data === "object" &&
5 data !== null &&
6 "id" in data
7 ) {
8 console.log((data as { id: number }).id);
9 }
10}unknown olduğu gibi kullanılamaz; doğrulama gerektiren bir türdür. Özellikle harici girdilerle çalışırken etkilidir.
Küçük tipleri birleştirerek ifade gücünü artırın.
Şimdi de, küçük türleri birleştirerek ifade gücünü artırmak noktasına bakalım.
Büyük tipleri tek seferde tanımlamak okunabilirliği ve sürdürülebilirliği azaltır. Tiplerinizi anlamlı birimlere ayırın ve gerektiğinde birleştirin.
1type Id = number;
2
3type UserProfile = {
4 id: Id;
5 name: string;
6};
7
8type UserWithStatus = UserProfile & {
9 status: "active" | "inactive";
10};Tipleri birer bileşen gibi görmek, tasarımınızı daha iyi organize eder.
type ve interface
interface'in avantajları
type ve interface ile tipler tanımlanabilir, ancak amaçları ve özellikleri farklıdır. Onları uygun amaçları için kullanarak, tip tanımlarınızın amacı daha net olur.
1// Bad
2type User = {
3 id: number;
4 name: string;
5};
6
7type AdminUser = {
8 id: number;
9 name: string;
10 role: "admin";
11};Bu şekilde ortak kısımları çoğaltırsanız, kodunuz değişikliklere karşı kırılgan olur.
1// Good
2interface User {
3 id: number;
4 name: string;
5}
6
7interface AdminUser extends User {
8 role: "admin";
9}interface, genişlemeye (extends) uygun tasarımlar için idealdir ve nesnelerin 'şeklini' ifade etmek için en uygunudur.
type'ın avantajları
Öte yandan, type daha ifade gücü yüksektir ve birleşim/kesişim tiplerini yönetmek için uygundur.
1// Good
2type Status = "idle" | "loading" | "success" | "error";
3
4type ApiResponse<T> =
5 | { status: "success"; data: T }
6 | { status: "error"; message: string };type durum, seçenek ve kombinasyonları ifade etmek için çok uygundur.
type ve interface arasında seçim yapma rehberi
Genel kural olarak, nesne yapılarını ve sözleşmeleri ifade etmek için interface, birleşim, kesişim veya tip işlemleri gerektiğinde ise type kullanın.
Her ikisi de benzer şekilde çalışır, ancak önemli olan tipin varlık nedenini en iyi açıklayanı seçmektir.
Tiplerinizi belgelendirme olarak görün.
Son olarak, türleri dokümantasyon olarak yazmak noktasına bakalım.
İyi tip tanımları, yorumlardan çok daha fazla bilgi sağlar. Sadece türlere bakarak spesifikasyonun anlaşılabileceği bir durumu hedeflemek önemlidir.
1type ApiError = {
2 code: number;
3 message: string;
4 retryable: boolean;
5};Bu şekilde, TypeScript'in en önemli avantajlarından biri, tip tanımlarının bir tür spesifikasyon dökümanı olarak işlev görebilmesidir.
Özet
TypeScript en iyi uygulamaları aşırı katı olmakla ilgili değildir. Esas olan, tiplerle amacı netleştirmek ve değişikliğe dayanıklı kod yazmaktır.
Günlük geliştirmede küçük kuralları biriktirerek, 'daha kolay kod incelemeleri', 'daha az hata' ve 'gelecekte kendiniz ya da başkaları için daha iyi anlaşılan kod' gibi uzun vadeli faydalar elde edebilirsiniz.
Öncelikle, 'Bunu tiplerle nasıl ifade edebilirim?' diye düşünerek, yüksek kaliteli ve TypeScript tarzında kod yazabilirsiniz.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.