TypeScript Hile Sayfası
Son güncelleme
Temel tipler
İlkel tipler ve değişkenleri nasıl etiketleyeceğin.
| İşlem | Sözdizimi |
|---|---|
| String | let name: string = "Ada"; |
| Sayı | let age: number = 25; |
| Boolean | let ok: boolean = true; |
| T dizisi | let xs: number[] = [1, 2, 3]; |
| Generic dizi | let xs: Array<string> = []; |
| Tuple | let pair: [string, number] = ["a", 1]; |
| Any (tip kontrolü kapalı) | let x: any = 1; |
| Unknown (güvenli any) | let x: unknown = JSON.parse(s); |
| Void (dönüş yok) | function log(): void { … } |
| Never (asla dönmez) | function fail(): never { throw … } |
| Null / undefined | let n: null = null; |
Tip çıkarımı ve etiketleme
TS ne zaman tip çıkarsın, ne zaman elle etiketle.
| İşlem | Sözdizimi |
|---|---|
| Değerden çıkarılan | let count = 0; // number |
| Açık etiketleme | let count: number = 0; |
| Fonksiyon parametresi | function add(a: number, b: number) { … } |
| Dönüş tipi | function add(a: number, b: number): number { … } |
| Arrow fonksiyon | const sq = (x: number): number => x * x; |
| Tip iddiası | const el = input as HTMLInputElement; |
| Const iddiası (literal) | const dirs = ["up", "down"] as const; |
| Non-null iddiası | el!.focus(); |
Arayüzler (interface)
Bir nesnenin şeklini tanımla.
| İşlem | Sözdizimi |
|---|---|
| Tanımla | interface User { id: number; name: string; } |
| İsteğe bağlı özellik | interface User { age?: number; } |
| Readonly özellik | interface User { readonly id: number; } |
| Metod imzası | interface Logger { log(msg: string): void; } |
| Başka bir arayüzü genişlet | interface Admin extends User { role: string; } |
| İndeks imzası | interface Map { [key: string]: number; } |
| Bir sınıfta uygula | class Db implements Logger { … } |
Type alias'lar ve union'lar
Bir tipi adlandır ve | ile & kullanarak tipleri birleştir.
| İşlem | Sözdizimi |
|---|---|
| Type alias | type ID = string | number; |
| Nesne alias'ı | type User = { id: number; name: string }; |
| Union tipi | type Status = "idle" | "loading" | "done"; |
| Intersection tipi | type Admin = User & { role: string }; |
| Literal tip | type Yes = "yes"; |
| Null'a izin veren | type Maybe<T> = T | null | undefined; |
| Fonksiyon alias'ı | type Handler = (e: Event) => void; |
Fonksiyonlar
Tipli parametreler, dönüşler ve aşırı yüklemeler.
| İşlem | Sözdizimi |
|---|---|
| İsteğe bağlı parametre | function greet(name?: string) { … } |
| Varsayılan parametre | function greet(name = "friend") { … } |
| Rest parametreler | function sum(...ns: number[]): number { … } |
| Fonksiyon tipi | let fn: (a: number) => number; |
| Çağrılabilir arayüz | interface Fn { (x: number): number; } |
| Aşırı yükleme imzaları | function f(x: string): string; function f(x: number): number; function f(x: any) { return x; } |
| Void dönüş yok sayılır | const cb: () => void = () => 42; // ok |
Sınıflar
Erişim belirleyicili ve parametre özellikli sınıflar.
| İşlem | Sözdizimi |
|---|---|
| Sınıf tanımı | class User { name: string; } |
| Constructor | constructor(name: string) { this.name = name; } |
| Parametre özelliği | constructor(public name: string) {} |
| Public / private / protected | private id: number; |
| Readonly alan | readonly id: number; |
| Statik üye | static count = 0; |
| Getter / setter | get name() { return this._name; } |
| Kalıtım | class Admin extends User { … } |
| Soyut sınıf | abstract class Shape { abstract area(): number; } |
Generic'ler
Başka tiplerle parametrize edilen yeniden kullanılabilir tipler.
| İşlem | Sözdizimi |
|---|---|
| Generic fonksiyon | function id<T>(x: T): T { return x; } |
| Açık tiple çağır | id<string>("hi"); |
| Generic arayüz | interface Box<T> { value: T; } |
| Generic alias | type Pair<A, B> = [A, B]; |
| Generic sınıf | class Stack<T> { items: T[] = []; } |
| extends ile kısıt | function len<T extends { length: number }>(x: T) { return x.length; } |
| Varsayılan tip parametresi | interface Box<T = string> { value: T; } |
| keyof operatörü | type K = keyof User; // "id" | "name" |
| İndeks erişim tipi | type Name = User["name"]; |
Narrowing
Çalışma zamanında bir union'ı tek bir tipe indirgeyin.
| İşlem | Sözdizimi |
|---|---|
| typeof kontrolü | if (typeof x === "string") { … } |
| instanceof kontrolü | if (e instanceof Error) { … } |
| in operatörü | if ("name" in obj) { … } |
| Eşitlikle narrowing | if (status === "done") { … } |
| Truthiness ile | if (value) { … } |
| Özel type guard | function isUser(x: any): x is User { return "id" in x; } |
| Discriminated union | type Shape = { kind: "sq"; size: number } | { kind: "ci"; r: number }; |
| never ile tamlık kontrolü | const _: never = shape; |
Enum'lar
Adlandırılmış sabit kümeleri.
| İşlem | Sözdizimi |
|---|---|
| Sayısal enum | enum Direction { Up, Down, Left, Right } |
| String enum | enum Status { Idle = "IDLE", Done = "DONE" } |
| Bir değer kullan | let d: Direction = Direction.Up; |
| Const enum (inline) | const enum Color { Red, Green, Blue } |
| Literal union (modern) | type Status = "idle" | "done"; |
Utility type'lar
Mevcut tipleri dönüştüren yerleşik yardımcılar.
| İşlem | Sözdizimi |
|---|---|
| Tüm alanları opsiyonel yap | Partial<User> |
| Tüm alanları zorunlu yap | Required<User> |
| Tüm alanları readonly yap | Readonly<User> |
| Anahtarların alt kümesini seç | Pick<User, "id" | "name"> |
| Bir veya birden çok anahtarı çıkar | Omit<User, "password"> |
| Verilen anahtarlardan nesne | Record<string, number> |
| Union'dan dışla | Exclude<"a" | "b" | "c", "a"> |
| Union'dan sadece tut | Extract<"a" | "b", "a" | "c"> |
| null / undefined kaldır | NonNullable<string | null> |
| Fonksiyon dönüş tipi | ReturnType<typeof fn> |
| Parametre tuple'ı | Parameters<typeof fn> |
| Awaited promise tipi | Awaited<Promise<string>> |
Modüller
Dosyalar arası import ve export.
| İşlem | Sözdizimi |
|---|---|
| Adlı export | export function add(a: number, b: number) { … } |
| Varsayılan export | export default class User { … } |
| Re-export | export { User } from "./user"; |
| Adlı import | import { add } from "./math"; |
| Varsayılan import | import User from "./user"; |
| Sadece tip import'u | import type { User } from "./user"; |
| Her şeyi içe aktar | import * as math from "./math"; |
| Triple-slash referans | /// <reference types="node" /> |
tsconfig temelleri
Bilmeye değer derleyici bayrakları.
| Seçenek | Etki |
|---|---|
"strict": true | Tüm strict-mode kontrollerini açar (önerilir). |
"target": "ES2022" | tsc'nin ürettiği JavaScript sürümü. |
"module": "ESNext" | Çıktıdaki modül sistemi. |
"moduleResolution": "bundler" | Modülleri modern bundler'lar gibi çözer. |
"jsx": "react-jsx" | React 17+ için JSX'i etkinleştirir. |
"esModuleInterop": true | CommonJS modüllerinden daha temiz default import'lar. |
"skipLibCheck": true | node_modules için tip kontrolünü atlar (hızlı build). |
"noEmit": true | Sadece tip kontrolü — çıktıyı bundler üretir. |
Günlük olarak en çok kullandığın TypeScript sözdizimi tek sayfada. Bu TypeScript hile sayfası, günlük TS kullanımı için hızlı bir referanstır: temel tipler, arayüzler, type alias'lar, generic'ler, union'lar, narrowing ve yerleşik utility type'lar.
Buradaki her şey tsc ile derlenen ve modern JavaScript'in çalıştığı her yerde çalışan standart TypeScript'tir. İhtiyacın olanı kopyala veya herhangi bir parçayı TypeScript playground'unda canlı dene — kurulum gerekmez.
TypeScript hile sayfası SSS
Bu TypeScript hile sayfası ücretsiz mi?
Evet. Bu TypeScript hile sayfası tamamen ücretsizdir, kayıt gerekmez. Yer imlerine ekle ve bir tip, arayüz veya utility type'a bakman gerektiğinde geri dön.
Interface ile type alias arasındaki fark nedir?
İkisi de bir nesnenin şeklini tanımlayabilir ve günlük kullanımın çoğunda birbirinin yerine geçebilirler. Interface'ler dosyalar arasında yeniden açılıp genişletilebilir (declaration merging), bu kütüphane tipleri için kullanışlıdır. Type alias'lar union, intersection, tuple ve mapped type'ları adlandırabilir —
interface ile ifade edemediğin şekiller. Yaygın kural: genel nesne şekilleri için interface, union'lar, tuple'lar ve hesaplanan tipler için type kullan.any ile unknown arasındaki fark nedir?
any tip kontrolünü tamamen devre dışı bırakır — derleyici onunla istediğin her şeyi yapmana izin verir. unknown tip-güvenlidir: kullanmadan önce daraltmalısın (typeof, instanceof veya bir type guard ile). JSON.parse veya fetch gibi dış kaynaklardan gelen değerler için unknown tercih et — kullanmadan önce doğrulamaya zorlar.TypeScript'ten önce JavaScript öğrenmem gerekir mi?
Evet — TypeScript üzerine tip sistemi eklenmiş JavaScript'tir, bu yüzden tüm JS becerilerin işine yarar. Hâlâ JS temellerini (diziler, nesneler, async/await) öğreniyorsan, JavaScript hile sayfası iyi bir başlangıçtır ve Coddy'nin ücretsiz JavaScript kursu aynı konuları etkileşimli olarak işler.
TypeScript'i online pratik edebilir miyim?
Evet. TypeScript playground'unu açarak bu hile sayfasındaki herhangi bir parçayı tarayıcında çalıştırabilirsin — kurulum gerekmez. Yapı istediğinde JavaScript landing'inden başla ve bu sayfadaki tipleri üzerine uygula.
İlgili kaynaklar
Daha fazla kopya kağıdı
