TypeScript Academy · Ders

Mini Tür Düzeyi Rota Ayrıştırıcısı

Rota yollarını türleri belirlenmiş parametre nesnelerine ayrıştırın.

Mini Tür Düzeyi Rota Ayrıştırıcısı, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

Amaç

Rota ayrıştırıcısı oluşturarak "users/:id/posts/:postId" gibi bir yolu okuyacak ve tamamen derleme zamanında { id: string; postId: string } türünde bir params nesnesi üreteceğiz. Bu, türleri belirlenmiş yönlendiricilerde kullanılan gerçek bir örüntüdür.

type Params = ParseRoute<"users/:id/posts/:postId">;
// Goal: { id: string; postId: string }

Bir Parametreyi Tanıma

Bir yol bölümü ":" ile başlıyorsa parametredir. Bu ön eki bir şablon değişmeziyle eşleştirir ve iki nokta üst üste işaretinden sonraki parametre adını çıkarırız.

Gösterim: Gerçek TypeScript, şablon değişmezi türlerini dolar-süslü parantez boşlukları içeren, ters tırnaklarla sınırlandırılmış dizeler olarak yazar. Bu parçalarda bu kalıbı Tpl<...> biçiminde gösteriyor ve her bölümü sırayla listeliyoruz; örneğin, önce değişmez ön ekle ve ardından Rest ile eşleşen bir ters tırnak şablonu Tpl<'prefix', infer Rest> olarak gösterilir.

type ParamName<S> = S extends Tpl<':', infer Name> ? Name : never;
// Tpl<...> denotes a backtick template literal type: a colon then Name

type X = ParamName<':id'>;   // 'id'
type Y = ParamName<'users'>; // never

Yolu Bölme

Önce rotayı "/" üzerinde bölerek bölümlere ayırın ve Split türünü yeniden kullanın. Ardından her bölümün bir değişmez mi yoksa parametre mi olduğunu belirleyin.

type Split<S extends string, Sep extends string> =
  S extends Tpl<infer H, Sep, infer T> ? [H, ...Split<T, Sep>] : [S];
// Tpl<H, Sep, T> = a template literal type matching H, then Sep, then T

type Segs = Split<'users/:id', '/'>; // ['users', ':id']

Doğrudan Şablon Özyinelemesi

Ham dizeyi önce bölmeden, her seferinde bir bölümü eşleştirerek de ayrıştırabiliriz. Bir sonraki "/" işaretine kadar olan bölümü eşleştirin, bu bölümü işleyin ve ardından kalanın üzerinde özyinelemeli çağrı yapın.

type ParseRoute<S extends string> =
  S extends Tpl<infer Seg, '/', infer Rest>
    ? SegParam<Seg> & ParseRoute<Rest>
    : SegParam<S>;
// Tpl<Seg, '/', Rest> matches a segment, a slash, then the rest

Bölüm Başına Parametre

Yardımcı, tek bir bölümü parametre olması durumunda tek özellikli bir nesneye, değişmez olması durumunda ise boş bir nesneye dönüştürür.

type SegParam<S extends string> =
  S extends Tpl<':', infer Name> ? { [K in Name]: string } : {};
// Tpl<':', Name> matches a colon followed by the param name

type X = SegParam<':id'>;   // { id: string }
type Y = SegParam<'posts'>; // {}

Kesişimle Birleştirme

Her bölüm, parametrelerini kesişim yoluyla ekler. Boş nesneler kesişimde ortadan kalktığından son türde yalnızca gerçek parametreler kalır.

type Params = ParseRoute<"users/:id/posts/:postId">;
// { id: string } & {} & { postId: string } & {}
// = { id: string; postId: string }

Ayrıştırmayı İzleme

"users/:id/posts/:postId" için:

Bölüm "users" -> {}, ":id/posts/:postId" üzerinde özyinelemeli çağrı
Bölüm ":id" -> { id: string }, "posts/:postId" üzerinde özyinelemeli çağrı
Bölüm "posts" -> {}, ":postId" üzerinde özyinelemeli çağrı
Bölüm ":postId" -> { postId: string }, temel durum

type Final = { id: string } & { postId: string };

Sonucu Temizleme

Nesnelerin kesişimi okunması zor bir biçimde görüntülenir. Bir "güzelleştirme" yardımcısı, anahtarları üzerinde eşlenmiş bir tür kullanarak bunu tek ve temiz bir nesne türüne dönüştürür.

type Prettify<T> = { [K in keyof T]: T[K] } & {};

type Clean = Prettify<ParseRoute<"users/:id">>; // { id: string }

Ayrıştırıcıyı Kullanma

Ayrıştırılan türü bir işleve aktararak işleyicinin türleri doğru belirlenmiş parametreleri almasını sağlayın. Yanlış anahtarın geçirilmesi derleme hatasına neden olur.

declare function route<P extends string>(
  path: P,
  handler: (params: Prettify<ParseRoute<P>>) => void
): void;

route("users/:id", p => { const id: string = p.id; });

Türü Belirlenmiş Parametrelerin Faydası

Derleyici artık params değerini doğrudan rota dizesinden çıkarıyor. Yoldaki bir parametreyi yeniden adlandırdığınızda her işleyici, beklediği anahtarları otomatik olarak günceller. El ile tanımlanmış bir arayüz gerekmez; rota ile işleyici arasında uyumsuzluk oluşmaz.

route("users/:userId", p => {
  const u = p.userId; // ok
  // const x = p.id; // error: id does not exist
});

Ayrıştırıcıyı Genişletme

Bu mini ayrıştırıcı, türleri belirlenmiş tam bir yönlendiricinin temelini oluşturur. Bölüm başına yardımcıya daha fazla şablon kalıbı ekleyerek türü belirlenmiş değerler (sayı parametreleri), joker karakterler ve isteğe bağlı bölümler ekleyebilirsiniz. Özyinelemeli şablon yapısı aynı kalır.

type SegParam2<S extends string> =
  S extends Tpl<':', infer N, '(number)'> ? { [K in N]: number }
  : S extends Tpl<':', infer N> ? { [K in N]: string }
  : {};
// Tpl<...> stands for a backtick template literal type pattern

Hızlı Kontrol

Rota ayrıştırıcısı konusundaki anlayışınızı sınayın.

Özet

Derleme zamanında çalışan bir rota ayrıştırıcısı oluşturdunuz.

Her bölümü, özyinelemeli şablon değişmezi çıkarımıyla eşleştirin.
Parametre bölümleri (:name), { name: string } biçimine dönüşür.
Değişmez bölümler {} biçimine dönüşür ve kesişimde ortadan kalkar.
Prettify, sonucu temiz params biçimine dönüştürür.

Sırada Kurs 25 var: tRPC ile uçtan uca tür güvenliği.

Sıkça Sorulan Sorular

“Mini Tür Düzeyi Rota Ayrıştırıcısı” dersi ücretsiz mi?

Evet — “Mini Tür Düzeyi Rota Ayrıştırıcısı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“Mini Tür Düzeyi Rota Ayrıştırıcısı” dersinde ne öğreneceğim?

Rota yollarını türleri belirlenmiş parametre nesnelerine ayrıştırın. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Mini Tür Düzeyi Rota Ayrıştırıcısı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← TypeScript Academy Sayfasına Dön