Türkiye’nin en iyi yazılım kampını incelediniz mi?
Patika+
TypeScript, modern web ve mobil uygulama geliştirme süreçlerinde giderek daha popüler hale gelen güçlü bir programlama dilidir. JavaScript'in bir üst kümesi olarak kabul edilen TypeScript, statik tür denetimi, daha iyi hata yönetimi ve gelişmiş kod tamamlama gibi avantajlar sunar. Özellikle büyük ölçekli projelerde tercih edilen TypeScript, React ve Node.js gibi popüler teknolojilerle entegre çalışarak geliştiricilere daha güvenli ve okunabilir bir kod yapısı sağlar.
Bu yazımızda, TypeScript ile ilgili en sık sorulan mülakat sorularını ve detaylı yanıtlarını sizler için derledik. TypeScript’in temel kavramlarından ileri seviye tekniklerine kadar geniş bir perspektif sunarak mülakatlarda ve gerçek dünya projelerinde başarılı olmanıza yardımcı olacak ipuçlarını paylaşıyoruz. Eğer TypeScript'e yeni başlıyorsanız veya mevcut bilginizi güçlendirmek istiyorsanız, bu rehber tam size göre!
TypeScript, Microsoft tarafından geliştirilen, açık kaynaklı ve statik olarak tür denetimi yapabilen bir programlama dilidir. JavaScript’in bir üst kümesi (superset) olarak kabul edilir ve JavaScript kodlarını daha güvenli, okunabilir ve ölçeklenebilir hale getirmek için kullanılır.
Farkları:
Tür Desteği:
Kod Hataları:
Gelişmiş ES Özellikleri:
Modülerlik:
Kod Tamamlama (IDE Desteği):
Özet: TypeScript, JavaScript’in güçlü ve eksik yönlerini geliştirerek daha sağlam, hataya dayanıklı ve büyük ölçekli projelere uygun hale getirilmiş bir dildir.
TypeScript dosyaları .ts uzantısı ile yazılır ve bir TypeScript derleyicisi (tsc) kullanılarak JavaScript’e çevrilir.
npm install -g typescript
tsc dosya.ts
Bu komut dosya.ts adlı TypeScript dosyasını JavaScript (dosya.js) dosyasına çevirir.
node dosya.js
Eğer ts-node modülü yüklü ise TypeScript kodunu direkt çalıştırabilirsiniz:
npx ts-node dosya.ts
TypeScript'te veri tipleri primitive (ilkel) ve non-primitive (referans) türler olarak ikiye ayrılır.
- string – Metinleri temsil eder.
let mesaj: string = "Merhaba TypeScript";
- number – Tamsayı ve ondalıklı sayıları ifade eder.
let sayi: number = 42;
- boolean – true veya false değerlerini alır.
let aktif: boolean = true;
- null & undefined – Değişkenin boş veya tanımsız olduğunu belirtir.
let bos: null = null;
let tanimsiz: undefined = undefined;
- symbol & bigint – Özel tiplerdir, genellikle düşük seviyeli işlemlerde kullanılır.
let sayilar: number[] = [1, 2, 3, 4];
let kisi: { ad: string, yas: number } = { ad: "Ahmet", yas: 30 };
function topla(a: number, b: number): number {
return a + b;
let kullanici: [string, number] = ["Ali", 25];
any:
unknown:
never:
let x: any = "Merhaba";
x = 42; // Hata vermez
let y: unknown = "Merhaba";
// console.log(y.length); // HATA: unknown türü üzerinde işlem yapmadan önce kontrol edilmelidir.
function hataFırlat(): never {
throw new Error("Bu fonksiyon asla geri dönmez!");
}
Kullanım Alanı:
Genişletilebilirlik:
Performans:
interface Kisi {
ad: string;
yas: number;
}
type Araba = {
marka: string;
model: string;
};
Enum, sabit değerleri temsil etmek için kullanılır.
enum Renk {
Kirmizi = "KIRMIZI",
Mavi = "MAVI",
Yesil = "YESIL"
}
let benimRenk: Renk = Renk.Kirmizi;
console.log(benimRenk); // KIRMIZI
Tuple, sabit uzunlukta ve belirli türlerde değerler içeren bir dizidir.
let kullanici: [string, number] = ["Ahmet", 30];
TypeScript’te, bir değişkenin türünü belirttiğiniz şekilde yorumlamasını sağlamak için kullanılır.
let deger: any = "Merhaba";
let uzunluk: number = (deger as string).length;
- TypeScript kodunu JavaScript’e derleyin:
tsc dosya.ts
- Ortaya çıkan dosya.js dosyasını HTML içinde çağırın:
<script src="dosya.js"></script>
Hem readonly hem de const, değişkenlerin değiştirilemez olmasını sağlar, ancak kullanım alanları farklıdır.
Kullanım Yeri:
Zamanlama (Atama Anı):
Nesne İçeriği Üzerindeki Etkisi:
Örnekler:
// readonly kullanımı
class Kisi {
readonly ad: string;
constructor(ad: string) {
this.ad = ad;
}
}
const kisi = new Kisi("Ahmet");
// kisi.ad = "Mehmet"; // HATA: readonly olduğu için değiştirilemez
// const kullanımı
const yas = 30;
// yas = 40; // HATA: const ile tanımlanan değişken değiştirilemez
const araba = { marka: "Toyota" };
araba.marka = "BMW"; // Geçerli! (const nesneyi değil, referansı korur)
Generics, birden fazla veri türü ile çalışabilen kodlar yazmamızı sağlar. Fonksiyonlar, sınıflar ve arayüzler için kullanılabilir.
function ekle<T>(deger: T): T { return deger;}console.log(ekle<string>("Merhaba")); // "Merhaba"console.log(ekle<number>(42)); // 42class Depo<T> { private veriler: T[] = []; ekle(item: T) { this.veriler.push(item); } getir(): T[] { return this.veriler; }}const stringDepo = new Depo<string>();stringDepo.ekle("TypeScript");console.log(stringDepo.getir()); // ["TypeScript"]
Bir değişkenin birden fazla türden birini almasını sağlar.
let veri: string | number;veri = "Merhaba"; // Geçerliveri = 42; // Geçerli// veri = true; // HATA!Birden fazla türü birleştirerek yeni bir tür oluşturur.
interface Kisi { ad: string; yas: number;}interface Calisan { sirket: string;}type CalisanKisi = Kisi & Calisan;const kisi: CalisanKisi = { ad: "Ahmet", yas: 30, sirket: "ABC Ltd."};
interface Kullanici { ad: string; yas?: number; // Opsiyonel}interface Kullanici { ad: string; yas: number;}let k1: Partial<Kullanici> = { ad: "Ahmet" }; // yas eksik olabilirlet k2: Required<Kullanici> = { ad: "Mehmet", yas: 25 }; // Tüm özellikler zorunlu
Overload, aynı fonksiyonun farklı parametre türleriyle çalışmasını sağlar.
function topla(a: number, b: number): number;
function topla(a: string, b: string): string;
function topla(a: any, b: any): any {
return a + b;
}
console.log(topla(5, 10)); // 15
console.log(topla("Merhaba", " Dünya")); // "Merhaba Dünya"
Overload olmadan topla fonksiyonu sadece any olarak tanımlanabilir ve tür güvenliği sağlanamaz.
Tanım:
Miras (Inheritance):
Çoklu Kalıtım (Multiple Inheritance):
abstract class Hayvan {
abstract sesCikar(): void;
hareket(): void {
console.log("Hareket ediyor");
}
}
Diğer Örnek:
interface Ucak {
uc(): void;
}
class Boeing implements Ucak {
uc() {
console.log("Uçuyor");
}
}
Mapped Types, mevcut bir tipi değiştirerek yeni bir tip oluşturmayı sağlar.
type Ornek = {
ad: string;
yas: number;
};
type ReadonlyOrnek = {
[K in keyof Ornek]: Readonly<Ornek[K]>;
};
// ReadonlyOrnek içinde tüm özellikler readonly olur.
TypeScript, mevcut türleri daha verimli kullanabilmemiz için bazı yardımcı tipler sunar.
Partial<T>:
Required<T>:
Readonly<T>:
Pick<T, K>:
Omit<T, K>:
Örnekler:
interface Kisi {
ad: string;
yas: number;
email: string;
}
// Partial - Tüm özellikleri opsiyonel yapar
let kisi1: Partial<Kisi> = { ad: "Ahmet" };
// Required - Tüm özellikleri zorunlu yapar
let kisi2: Required<Kisi> = { ad: "Ahmet", yas: 30, email: "a@example.com" };
// Readonly - Özellikleri değiştirilemez yapar
let kisi3: Readonly<Kisi> = { ad: "Ahmet", yas: 30, email: "a@example.com" };
// kisi3.yas = 35; // HATA!
// Pick - Sadece belirli özellikleri alır
let kisi4: Pick<Kisi, "ad" | "email"> = { ad: "Ahmet", email: "a@example.com" };
// Omit - Belirtilen özellikleri hariç tutar
let kisi5: Omit<Kisi, "email"> = { ad: "Ahmet", yas: 30 };
TypeScript destekli bir React projesi oluşturmak için aşağıdaki adımları takip edebilirsiniz.
npx create-react-app my-app --template typescript
Bu komut, TypeScript ile ön yapılandırılmış bir React projesi başlatır.
React projelerinde TypeScript'in sağlıklı çalışması için bazı tip paketlerini yüklemek gerekir:
npm install @types/react @types/react-dom
React bileşenleri artık .tsx uzantısını kullanarak oluşturulur.
import React from "react";
interface Props {
ad: string;
yas?: number;
}
const Merhaba: React.FC<Props> = ({ ad, yas }) => {
return <h1>Merhaba, {ad}! {yas && `Yaşın: ${yas}`}</h1>;
};
export default Merhaba;
npm start
React projeniz artık TypeScript desteğiyle çalışıyor!
Node.js'de TypeScript kullanarak backend uygulamaları geliştirmek için şu adımları izleyebilirsiniz.
mkdir my-node-ts-app
cd my-node-ts-app
npm init -y
npm install typescript ts-node @types/node --save-dev
Aşağıdaki komutla TypeScript yapılandırma dosyası oluşturabilirsiniz:
npx tsc --init
Oluşan tsconfig.json dosyasında bazı temel ayarlar:
{
"compilerOptions": {
"target": "ES6",
"module": "CommonJS",
"outDir": "./dist",
"rootDir": "./src",
"strict": true
}
}
Bir src/index.ts dosyası oluşturup içine aşağıdaki kodu yazabilirsiniz:
import http from "http";
const server = http.createServer((req, res) => {
res.writeHead(200, { "Content-Type": "text/plain" });
res.end("Merhaba, TypeScript ile Node.js!");
});
server.listen(3000, () => {
console.log("Sunucu 3000 portunda çalışıyor...");
});
Kodunuzu TypeScript ile çalıştırmak için:
npx ts-node src/index.ts
Önce TypeScript kodunu JavaScript’e derleyin:
npx tsc
Ardından oluşan JavaScript kodunu çalıştırın:
node dist/index.js
Artık TypeScript destekli bir Node.js projesi oluşturmuş oldunuz!
Decorator (Dekoratörler), bir sınıfa veya sınıfın metodlarına, özelliklerine ve parametrelerine özel işlevler eklemek için kullanılır. TypeScript’te @decoratorName şeklinde tanımlanır ve metadata, logging, validasyon gibi işlemler için kullanılır.
Dekoratörleri kullanabilmek için tsconfig.json dosyanızda şu ayarı açmanız gerekir:
{
"compilerOptions": {
"experimentalDecorators": true
}
}
TypeScript’te 4 temel decorator türü vardır:
Bir sınıfa özel özellikler eklemek için kullanılır.
function LogSinifi(target: Function) {
console.log(`Sınıf oluşturuldu: ${target.name}`);
}
@LogSinifi
class Araba {
constructor(public marka: string) {}
}
Çıktı:
Sınıf oluşturuldu: Araba
Ne işe yarar?
Bir metot çağrıldığında belirli işlemleri gerçekleştirmek için kullanılır.
function LogMetot(target: any, key: string, descriptor: PropertyDescriptor) {
const orijinalMetot = descriptor.value;
descriptor.value = function (...args: any[]) {
console.log(`Metot çağrıldı: ${key}, Parametreler: ${args}`);
return orijinalMetot.apply(this, args);
};
}
class HesapMakinesi {
@LogMetot
topla(a: number, b: number) {
return a + b;
}
}
const hesap = new HesapMakinesi();
console.log(hesap.topla(5, 3));
Çıktı:
Metot çağrıldı: topla, Parametreler: 5,3
8
Ne işe yarar?
Bir sınıfın özelliklerine özel işlemler eklemek için kullanılır.
function ReadOnly(target: any, key: string) {
Object.defineProperty(target, key, {
writable: false
});
}
class Kullanici {
@ReadOnly
public email: string = "ornek@email.com";
}
const k = new Kullanici();
// k.email = "yeni@email.com"; // HATA! (ReadOnly olduğu için değiştirilemez)
Ne işe yarar?
Bir metodun parametresine dekoratör ekleyerek işlem yapmak için kullanılır.
function LogParametre(target: any, key: string, index: number) {
console.log(`Metot: ${key}, Parametre İndeksi: ${index}`);
}
class API {
getUser(@LogParametre id: number) {
console.log(`Kullanıcı ID: ${id}`);
}
}
const api = new API();
api.getUser(123);
Çıktı:
Metot: getUser, Parametre İndeksi: 0
Kullanıcı ID: 123
Ne işe yarar?
TypeScript, modern yazılım geliştirme dünyasında hata oranlarını minimize eden, ölçeklenebilir ve güvenli kod yazılmasını sağlayan güçlü bir araçtır. React ve Node.js gibi teknolojilerle uyumlu çalışması, büyük çaplı projelerde hız ve verimlilik sağlaması, onu günümüz yazılım geliştirme trendlerinde vazgeçilmez bir dil haline getirmiştir.
Bu yazıda paylaştığımız TypeScript mülakat soruları ve detaylı cevapları, yalnızca bir mülakatı geçmenize yardımcı olmakla kalmayacak, aynı zamanda TypeScript konusunda derinlemesine bilgi sahibi olmanızı sağlayacaktır. Eğer TypeScript öğrenmeye veya geliştirmeye devam etmek istiyorsanız, pratik yaparak ve gerçek dünya projelerinde kullanarak öğrendiklerinizi pekiştirebilirsiniz.
