TypeScript Import Type: Yalnızca Tür İçeri Aktarma Bildirimlerine Derinlemesine Bir Bakış

TypeScript, JavaScript'in bir üst kümesi olarak, web geliştirmenin dinamik dünyasına statik tipleme getirir. Anahtar özelliklerinden biri, diğer modüllerden türleri içeri aktarma yeteneğidir. Ancak, yalnızca tür kontrolü için kullanılan türleri içeri aktarmak, son JavaScript paketinde gereksiz koda yol açabilir. Bu sorunu çözmek için TypeScript, import type sözdizimini tanıttı. Bu blog yazısı, import type'ı amacını, kullanımını, faydalarını ve potansiyel tuzaklarını açıklayarak ayrıntılı olarak ele alacaktır.

import type Nedir?

import type, bir modülün çalışma zamanı değerlerinden hiçbirini içeri aktarmadan, yalnızca modülün tür tanımlarını içeri aktarmanıza olanak tanıyan TypeScript'e özgü bir sözdizimidir. Bu, başka bir modülden bir türü tür ek açıklamaları veya tür denetimi için kullanmanız gerektiğinde, ancak çalışma zamanında değerlerinden hiçbirine erişmeniz gerekmediğinde özellikle kullanışlıdır. Bu, JavaScript derleyicisinin derleme sırasında yalnızca tür bilgisi için kullanılan modülü atlaması nedeniyle daha küçük bir paket boyutuna doğrudan katkıda bulunur.

Neden import type Kullanmalı?

import type kullanmak için birkaç ikna edici neden vardır:

• Geliştirilmiş Paket Boyutu: Bir modülü standart import ifadesini kullanarak içeri aktardığınızda, yalnızca türlerini kullansanız bile tüm modül oluşturulan JavaScript'e dahil edilir. import type, derleme sırasında yalnızca tür bilgisinin kullanılmasını sağlar ve modül son pakete dahil edilmez, bu da daha küçük ve daha verimli bir paketle sonuçlanır.
• Döngüsel Bağımlılıkları Önleme: Döngüsel bağımlılıklar büyük projelerde önemli bir sorun olabilir, çalışma zamanı hatalarına ve beklenmedik davranışlara yol açabilir. import type, bir modülden yalnızca tür tanımlarını içeri aktarmanıza izin vererek ve değerlerinden hiçbirini içeri aktarmayarak döngüsel bağımlılıkları kırmaya yardımcı olabilir, böylece içeri aktarma işlemi sırasında modülün kodunun yürütülmesini önler.
• Geliştirilmiş Performans: Daha küçük paket boyutları, özellikle web uygulamaları için daha hızlı yükleme süreleri anlamına gelir. Paketten gereksiz kodu kaldırarak, import type uygulamanızın genel performansını artırmaya yardımcı olur.
• Artırılmış Kod Anlaşılırlığı: import type kullanmak, yalnızca tür bilgisini içeri aktardığınızı açıkça belirtir, bu da kodunuzun okunabilirliğini ve sürdürülebilirliğini artırır. Diğer geliştiricilere, içeri aktarılan modülün yalnızca tür denetimi için kullanıldığını bildirir.

import type Nasıl Kullanılır

import type sözdizimi basittir. Standart import ifadesini kullanmak yerine, import type ve ardından içeri aktarmak istediğiniz türü kullanırsınız. İşte temel bir örnek:

            import type { User } from './user';

function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}
            

              
                Copy
              
            
          

Bu örnekte, User türünü ./user modülünden içeri aktarıyoruz. User türünü yalnızca greetUser fonksiyonundaki tür ek açıklaması için kullanıyoruz. User modülünün değerlerine çalışma zamanında erişilemez.

import type'ı Normal İçeri Aktarmalarla Birleştirme

Ayrıca import type'ı, type anahtar kelimesini kullanarak aynı ifadede normal içeri aktarmalarla birleştirebilirsiniz:

            import { someValue, type User, type Product } from './module';

function processUser(user: User): void {
  // ...
}

console.log(someValue);

            

              
                Copy
              
            
          

Bu durumda, someValue normal bir değer olarak içeri aktarılırken, User ve Product yalnızca tür olarak içeri aktarılır. Bu, aynı modülden hem değerleri hem de türleri tek bir ifadede içeri aktarmanıza olanak tanır.

Her Şeyi Tür Olarak İçeri Aktarma

Bir modülden herhangi bir değer içeri aktarmadan tüm türleri içeri aktarmanız gerekiyorsa, import type ile ad alanı içeri aktarma sözdizimini kullanabilirsiniz:

            import type * as Types from './types';

function processData(data: Types.Data): void {
  // ...
}
            

              
                Copy
              
            
          

Burada, ./types modülündeki tüm türleri Types ad alanına içeri aktarıyoruz. Daha sonra türlere Types. önekini kullanarak erişebiliriz.

Farklı Proje Türlerinde Örnekler

`import type`'ın faydaları çeşitli proje türleri için geçerlidir. İşte bazı örnekler:

Örnek 1: React Bileşeni

Belirli türlere sahip proplar alan bir React bileşeni düşünün:

            import React from 'react';
import type { User } from './user';

interface Props {
  user: User;
}

const UserProfile: React.FC<Props> = ({ user }) => {
  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};

export default UserProfile;
            

              
                Copy
              
            
          

Bu React örneğinde, `import type { User } from './user';`, yalnızca `User` tür tanımının içeri aktarılmasını sağlayarak paket boyutunu optimize eder. 'user' modülünün değerlerini doğrudan kullanmıyoruz; sadece o modülde tanımlandığı şekliyle 'User' *türünü* kullanıyoruz.

Örnek 2: Node.js Arka Ucu

Bir Node.js arka uç uygulamasında, veritabanı modellerini tür olarak tanımlayabilirsiniz:

            import type { User } from './models';
import { createUser } from './db';

async function registerUser(userData: User): Promise<void> {
  await createUser(userData);
}

            

              
                Copy
              
            
          

Burada, `import type { User } from './models';`, yalnızca `User` türünün tür denetimi için gerekli olduğu durumlarda tüm `models` modülünü pakete dahil etmekten kaçınır. `createUser` fonksiyonu, *çalışma zamanında* kullanılması gerektiği için içeri aktarılır.

Örnek 3: Angular Servisi

Bir Angular servisinde, bir tür kullanan bir servisi enjekte edebilirsiniz:

            import { Injectable } from '@angular/core';
import type { Product } from './product.model';
import { ProductService } from './product.service';

@Injectable({
  providedIn: 'root',
})
export class OrderService {
  constructor(private productService: ProductService) {}

  getFeaturedProducts(): Product[] {
    return this.productService.getProducts().filter(p => p.isFeatured);
  }
}

            

              
                Copy
              
            
          

`Product` türü, `productService.getProducts()` metodu tarafından döndürülen verinin yapısını tanımlamak için kullanılır. `import type { Product } from './product.model';` kullanmak, yalnızca tür bilgisinin içeri aktarılmasını sağlar ve Angular uygulamasının performansını artırır. `ProductService` ise bir *çalışma zamanı* bağımlılığıdır.

Farklı Geliştirme Ortamlarında import type Kullanmanın Faydaları

import type kullanmanın avantajları çeşitli geliştirme ortamlarına yayılır:

• Monorepolar: Monorepo yapıları içinde, import type bireysel paket demetlerinin boyutunu azaltır, bu da daha hızlı derleme sürelerine ve daha verimli kaynak kullanımına yol açar.
• Mikroservisler: Mikroservis mimarisinde, import type bağımlılık yönetimini basitleştirir ve yalnızca gerekli tür bilgisinin içeri aktarılmasını sağlayarak servislerin modülerliğini artırır.
• Sunucusuz Fonksiyonlar: Sunucusuz fonksiyon ortamlarında, import type fonksiyon dağıtım paketi boyutlarını azaltır, bu da daha hızlı soğuk başlatmalara ve optimize edilmiş kaynak tüketimine neden olur.
• Platformlar Arası Geliştirme: Web, mobil veya masaüstü platformları için geliştirme yaparken, import type farklı ortamlar arasında tutarlı tür denetimi sağlar ve çalışma zamanı hataları olasılığını azaltır.

Potansiyel Tuzaklar

import type genel olarak faydalı olsa da, dikkat edilmesi gereken birkaç tuzak vardır:

• TypeScript Sürüm Gereksinimi: import type, TypeScript 3.8'de tanıtıldı. Bu sözdizimini kullanmak için en az bu TypeScript sürümünü kullanıyor olmanız gerekir.
• Çalışma Zamanı Kullanımı: Bir import type ile içeri aktarılan değeri çalışma zamanında kullanamazsınız. Çalışma zamanında bir modülden bir değere erişmeniz gerekiyorsa, normal bir import ifadesi kullanmalısınız. Bir import type ile içeri aktarılan değeri çalışma zamanında kullanmaya çalışmak, derleme zamanı hatasıyla sonuçlanır.
• Dönüştürücüler ve Paketleyiciler: Dönüştürücünüzün (ör. Babel) ve paketleyicinizin (ör. Webpack, Rollup, Parcel) import type ifadelerini doğru şekilde işleyecek şekilde yapılandırıldığından emin olun. Çoğu modern araç import type'ı kutudan çıktığı gibi destekler, ancak yapılandırmanızı her zaman iki kez kontrol etmek iyi bir fikirdir. Bazı eski araçlar, bu içeri aktarmaları doğru şekilde kaldırmak için özel eklentiler veya yapılandırmalar gerektirebilir.

import type Kullanımı İçin En İyi Uygulamalar

import type'ı etkili bir şekilde kullanmak için aşağıdaki en iyi uygulamaları göz önünde bulundurun:

• Mümkün Olduğunda import type Kullanın: Bir modülü yalnızca tür tanımları için kullanıyorsanız, her zaman import type kullanın. Bu, paket boyutunuzu azaltmanıza ve performansı artırmanıza yardımcı olacaktır.
• import type'ı Normal İçeri Aktarmalarla Birleştirin: Aynı modülden hem değerleri hem de türleri içeri aktarırken, kodunuzu kısa ve okunabilir tutmak için birleşik sözdizimini kullanın.
• Tür Tanımlarını Ayrı Tutun: Tür tanımlarınızı ayrı dosyalarda veya modüllerde tutmayı düşünün. Bu, import type kullanarak yalnızca ihtiyacınız olan türleri tanımlamayı ve içeri aktarmayı kolaylaştırır.
• İçeri Aktarmalarınızı Düzenli Olarak Gözden Geçirin: Projeniz büyüdükçe, gereksiz modülleri veya değerleri içeri aktarmadığınızdan emin olmak için içeri aktarmalarınızı düzenli olarak gözden geçirin. Bu süreci otomatikleştirmeye yardımcı olması için uygun kurallarla ESLint gibi araçları kullanın.
• Kullanımınızı Belgeleyin: Belirli durumlarda neden import type kullandığınızı açıklamak için kodunuza yorumlar ekleyin. Bu, diğer geliştiricilerin niyetinizi anlamasına ve kodu daha kolay sürdürmesine yardımcı olacaktır.

Uluslararasılaştırma (i18n) ve Yerelleştirme (l10n) Hususları

Uluslararasılaştırma (i18n) ve yerelleştirme (l10n) gerektiren projeler üzerinde çalışırken, import type'ın kodunuzu nasıl etkileyebileceğini göz önünde bulundurmak önemlidir. İşte akılda tutulması gereken bazı noktalar:

• Çevrilmiş Dizeler İçin Tür Tanımları: Çevrilmiş dizeleri temsil etmek için tür tanımları kullanıyorsanız, bu türleri paketinizde gerçek çeviri dosyalarını dahil etmeden içeri aktarmak için import type kullanabilirsiniz. Bu, özellikle çok sayıda çeviriniz varsa, paketinizin boyutunu azaltmaya ve performansı artırmaya yardımcı olabilir.
• Yerel Ayara Özgü Türler: Farklı yerel ayarlar için farklı tür tanımlarınız olabilir. import type kullanmak, diğer yerel ayarlar için tür tanımlarını dahil etmeden, hedeflediğiniz belirli yerel ayar için tür tanımlarını seçici olarak içeri aktarmanıza olanak tanır.
• Yerel Ayar Verileri İçin Dinamik İçeri Aktarmalar: Bazı durumlarda, yerel ayara özgü verileri çalışma zamanında dinamik olarak yüklemeniz gerekebilir. Bu tür senaryolarda, veriler için normal import ifadelerini ve ilgili tür tanımları için import type'ı kullanabilirsiniz.

Farklı Ülkelerden Örnekler

İşte import type'ın farklı ülkelerdeki çeşitli senaryolarda nasıl kullanılabileceğini gösteren bazı örnekler:

• E-ticaret Platformu (Küresel): Dünya çapında ürün satan bir e-ticaret platformu, ürün türlerini tanımlamak için `import type` kullanır. Bu, paket boyutunu azaltırken ürün veri türlerinin farklı bölgelerde tutarlı olmasını sağlar. Örneğin:

              import type { Product } from './product.types';
  
    function displayProductDetails(product: Product) {
      // ...
    }
              
  
                
                  Copy
                
              
            

  Bu yaklaşım, kullanıcının konumundan bağımsız olarak tutarlı veri tiplemesi sağlar.
• Sağlık Uygulaması (Almanya): Almanya'daki bir sağlık uygulaması, hasta veri türlerini tanımlamak için `import type` kullanır. Bu, pakete gereksiz kod dahil edilmesini en aza indirerek yerel veri gizliliği düzenlemelerine (ör. GDPR) uyumu sağlar.

              import type { Patient } from './patient.types';
  
    function anonymizePatientData(patient: Patient) {
      // ...
    }
              
  
                
                  Copy
                
              
            

• Eğitim Platformu (Japonya): Japonya'daki bir eğitim platformu, ders materyali türlerini tanımlamak için `import type` kullanır. Bu, özellikle büyük hacimli içerikle uğraşırken platformun performansını optimize etmeye yardımcı olur.

              import type { CourseMaterial } from './course.types';
  
     function renderCourseMaterial(material: CourseMaterial) {
      // ...
     }
              
  
                
                  Copy
                
              
            

• Finansal Hizmet Uygulaması (Brezilya): Brezilya'daki bir finansal hizmet uygulaması, işlem türlerini tanımlamak için `import type` kullanır. Bu, veri tutarlılığını sağlayarak ve paket boyutunu en aza indirerek uygulamanın verimliliğini ve güvenilirliğini artırır.

              import type { Transaction } from './transaction.types';
  
    function processTransaction(transaction: Transaction) {
     // ...
    }
              
  
                
                  Copy
                
              
            

Sonuç

import type, TypeScript'te bir modülün çalışma zamanı değerlerinden hiçbirini içeri aktarmadan yalnızca tür tanımlarını içeri aktararak kodunuzu optimize etmenize olanak tanıyan güçlü bir özelliktir. Bu, geliştirilmiş paket boyutlarına, azaltılmış döngüsel bağımlılıklara, artırılmış performansa ve daha iyi kod anlaşılırlığına yol açabilir. Bu blog yazısında özetlenen en iyi uygulamaları takip ederek, daha verimli ve sürdürülebilir TypeScript kodu yazmak için import type'ı etkili bir şekilde kullanabilirsiniz. TypeScript gelişmeye devam ettikçe, import type gibi özellikleri benimsemek, ölçeklenebilir ve performanslı uygulamalar oluşturmak için çok önemlidir.