M

MLOG

Türkçe

Derleme sürelerini optimize etmek ve çalışma zamanı hatalarını önlemek için TypeScript'in `import type` sözdizimini keşfedin. Yalnızca tür içeri aktarımlarını ve faydalarını öğrenin.

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:

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}!`;
}

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);

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 {
  // ...
}

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;

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);
}

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);
  }
}

`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:

Potansiyel Tuzaklar

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

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:

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:

Farklı Ülkelerden Örnekler

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

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.