Hapuskan Ralat Masa Jalan dengan Laluan Jenis selamat dalam Sudut

Memfaktorkan semula aplikasi Sudut boleh menjadi pedang bermata dua. Di satu pihak, ia membolehkan anda meningkatkan kebolehselenggaraan dan kebolehskalaan pangkalan kod anda. Sebaliknya, ia boleh menyebabkan laluan terputus jika anda tidak mengambil langkah berjaga-jaga yang diperlukan untuk melindungi ciri anda daripada perubahan yang tidak diingini. Menulis ujian yang meluas atau melaksanakan konsep menaip pepejal untuk laluan boleh membantu mengurangkan risiko ini, tetapi pendekatan ini boleh memakan masa dan mungkin tidak selalu dapat dilaksanakan. Dalam artikel ini, kami akan meneroka penyelesaian yang lebih cekap yang secara automatik mengesan laluan rosak dalam masa penyusunan, tanpa memerlukan usaha ujian manual atau keperluan untuk menulis anotasi jenis tersuai. Kami akan menunjukkan pendekatan ini dengan melaksanakan contoh aplikasi Sudut dengan komponen bersarang dan menggunakan perpustakaan typesafe-routes untuk meningkatkan pengalaman pembangun dan memudahkan penghuraian parameter.

Untuk menggambarkan faedah mengesan laluan rosak secara automatik dalam masa penyusunan, kami akan melaksanakan contoh aplikasi Sudut dengan tiga komponen bersarang: DashboardComponent (/dashboard), OrgsComponent (/orgs/:orgId) dan LocationsComponent (/orgs /:orgId/locations/:locationId). Untuk menyediakan contoh ini, kami perlu memasang pustaka typesafe-routes dan menggunakan fungsi createRoutesnya untuk menentukan pepohon laluan kami, seperti yang ditunjukkan dalam serpihan kod berikut.

// app.routes.ts
import { createRoutes, int } from "typesafe-routes";

export const r = createRoutes({
  dashboard: {
    path: ["dashboard"], // ~> "/dashboard"
  },
  orgs: {
    path: ["orgs", int("orgId")], // ~> "/orgs/:orgId"
    children: {
      locations: {
        path: ["locations", int("locationId")], // ~> "locations/:locationId"
        query: [int.optional("page")], // ~> "?page=[number]"
      },
    },
  },
});

Mari kita lihat dengan lebih dekat serpihan kod. Kami mengimport createRoutes daripada typesafe-routes dan meneruskan laluan kami sebagai hujah pertamanya. Laluan ini ditakrifkan sebagai objek bersarang dengan dua sifat pada peringkat akar: papan pemuka dan org. Setiap sifat ini diberikan laluan, menentukan segmen dalam bentuk tatasusunan. Sebagai contoh, tatasusunan ["papan pemuka"] sepadan dengan laluan /papan pemuka. Laluan org adalah lebih kompleks, kerana ia mengandungi parameter bernama orgId jenis integer. Ambil perhatian bahawa integer bukan jenis JavaScript asli, sebaliknya jenis tersuai yang ditakrifkan menggunakan fungsi int, yang meniru ciri integer menggunakan nombor di latar belakang. Laluan org mempunyai harta kanak-kanak, yang menentukan satu laluan kanak-kanak yang dipanggil lokasi. Laluan lokasi adalah serupa dengan laluan org, tetapi ia menentukan halaman parameter carian pilihan tambahan jenis int.

createRoutes menggunakan maklumat tentang laluan untuk mencipta konteks yang dibalut dalam objek Proksi. Anda tidak perlu mengetahui butiran tentang objek proksi itu, tetapi penting untuk memahami bahawa terima kasih kepada objek itu, anda boleh mengakses semua spesifikasi laluan di mana-mana dalam aplikasi anda untuk membuat dan menghuraikan laluan dan parameter.

Kami menetapkan objek Proksi yang dikembalikan oleh createRoutes kepada r. Ini bermakna anda boleh mengakses laluan papan pemuka dengan r.dashboard, laluan lokasi dengan r.orgs.locations dan sebagainya.

Templat Rendering

Dengan laluan kami yang ditentukan, kami kini boleh meneruskan ke langkah seterusnya: mendaftarkannya dengan penghala sudut.

// app.routes.ts
import { createRoutes, int } from "typesafe-routes";

export const r = createRoutes({
  dashboard: {
    path: ["dashboard"], // ~> "/dashboard"
  },
  orgs: {
    path: ["orgs", int("orgId")], // ~> "/orgs/:orgId"
    children: {
      locations: {
        path: ["locations", int("locationId")], // ~> "locations/:locationId"
        query: [int.optional("page")], // ~> "?page=[number]"
      },
    },
  },
});

Serpihan kod menunjukkan persediaan biasa dengan laluan bersarang untuk Penghala Sudut yang mencerminkan pepohon laluan yang kami takrifkan sebelum ini. Walau bagaimanapun, daripada menggunakan rentetan biasa biasa untuk menentukan templat laluan (contohnya orgs/:orgId), kami mengimport fungsi templat daripada typesafe-routes/angular-router dan menggunakannya untuk menjana templat laluan. Untuk DashboardComponent dan OrgsComponent, kami hanya boleh memanggil templat dengan laluan yang sepadan r.dashboard dan r.orgs untuk mendapatkan templat. Walau bagaimanapun, komponen LocationsComponent yang tinggal ialah anak kepada OrgsComponent dan oleh itu memerlukan laluan relatif, yang tidak boleh dijana dengan menggunakan r.orgs.locations kerana ini akan menghasilkan laluan mutlak orgs/:orgId/locations/:locationId, manakala Penghala Sudut menjangkakan laluan relatif apabila templat laluan bersarang.

Untuk menjana laluan relatif, kita boleh menggunakan pautan _, yang secara berkesan menghilangkan semua yang mendahului aksara garis bawah. Dalam kes ini, kita boleh menggunakan template(r.orgs._.locations) untuk menjana laluan relatif. Ini adalah ciri yang berguna, kerana ia membolehkan kami menggunakan semula pepohon laluan yang sama dalam senario di mana kami perlu memaparkan laluan mutlak tetapi juga dalam situasi yang memerlukan laluan relatif.

Pada ketika ini, kami telah pun mengambil kesempatan daripada pelengkapan automatik dan pencegahan kesilapan menaip dalam IDE kegemaran kami (seperti Kod Visual Studio). Dan perubahan pada masa hadapan akan memaklumkan kami tentang sebarang salah ejaan atau kesilapan taip dalam laluan laluan kami kerana semua jenis boleh dikesan kembali ke definisi laluan awal dengan createRoutes.

Pautan Rendering

Sekarang kami telah menentukan templat laluan kami, kami mahu beralih kepada pemaparan pautan. Untuk itu, kami ingin mencipta komponen mudah yang menggunakan fungsi pemaparan untuk memaparkan pautan tersebut, termasuk penyiaran jenis dan semakan jenis. Contoh seterusnya menunjukkan komponen yang menghasilkan senarai elemen utama yang merujuk kepada komponen lain dalam aplikasi kami.

// app.routes.ts
import { Routes } from "@angular/router";
import { template } from "typesafe-routes/angular-router";

export const routes: Routes = [
  {
    path: template(r.dashboard), // ~> "dashboard"
    component: DashboardComponent,
  },
  {
    path: template(r.orgs), // ~> "orgs/:orgId"
    component: OrgsComponent,
    children: [
      {
        path: template(r.orgs._.locations), // ~> "locations/:locationId"
        component: LocationsComponent,
      },
    ],
  },
];

Contoh kod mengimport render dan renderPath daripada typesafe-routes/angular-router. renderPath memberikan laluan, manakala render juga menyerikan parameter pertanyaan untuk senarai pautan kami. Kami juga mengimport r, objek proksi yang membolehkan kami mengakses maklumat tentang laluan yang ditakrifkan sebelum ini dan untuk menentukan laluan yang dikehendaki untuk diberikan.

Pertama, kami mencipta Pautan papan pemuka dan orgsLink menggunakan fungsi renderPath. Sebagai parameter pertama, ia memerlukan objek proksi yang dinyatakan di atas yang mewakili laluan laluan yang akan diberikan. Parameter kedua ialah rekod dengan nilai parameter yang sepadan dengan nama dan jenis parameter yang ditakrifkan sebelum ini dengan createRoutes dalam app.routes.ts. Nilai pulangan ialah rentetan yang mengandungi laluan kepunyaan komponen yang sepadan.

Fungsi pemaparan dalam contoh ketiga memaparkan kedua-dua laluan dan parameter carian, dan dengan itu memerlukan laluan dan sifat pertanyaan dalam takrifan parameter. Nilai pulangan di sini ialah objek dengan dua laluan sifat dan pertanyaan. Kami menetapkan dua sifat sebagai nilai atribut [routerLink] dan [queryParams].

Parameter Penghuraian

Penghuraian parameter ialah bahagian penting dalam laluan selamat jenis. Semasa definisi laluan di atas, kami menentukan beberapa parameter dan memberikannya int jenis integer. Walau bagaimanapun, memandangkan nilai parameter datang daripada pelbagai sumber seperti objek Lokasi, ia adalah berasaskan rentetan. Dengan mudah, typesafe-routes mengeksport fungsi pembantu yang menghuraikan rentetan ini dan menghantarnya ke jenis yang diingini. Penghuraian adalah berdasarkan objek proksi kami yang kami buat sebelum ini, bermakna kami perlu memberitahu pustaka laluan yang dimiliki oleh params. Contoh seterusnya menunjukkan bahawa dengan menunjukkan dua senario penghuraian biasa.

// app.routes.ts
import { createRoutes, int } from "typesafe-routes";

export const r = createRoutes({
  dashboard: {
    path: ["dashboard"], // ~> "/dashboard"
  },
  orgs: {
    path: ["orgs", int("orgId")], // ~> "/orgs/:orgId"
    children: {
      locations: {
        path: ["locations", int("locationId")], // ~> "locations/:locationId"
        query: [int.optional("page")], // ~> "?page=[number]"
      },
    },
  },
});

Memandangkan location.href orgs/1/location/2?page=5, dalam Angular, kami boleh mengakses param pertanyaan berasaskan rentetan menggunakan this.route.snapshot.queryParams dan parameter laluan berasaskan rentetan disediakan melalui ini. route.snapshot.params. Menggunakan parseQuery dengan r.orgs.locations dan this.route.snapshot.queryParams, kita boleh mendapatkan semula objek dengan parameter halaman sebagai nombor. Menggunakan parsePath dengan r.orgs._.locations dan this.route.snapshot.params, kami mendapat locationId yang dihuraikan. Dalam kes ini, r.orgs._.locations ialah laluan relatif dan semua segmen sebelum pautan _ ditinggalkan, menyebabkan orgId tidak hadir dalam objek yang terhasil.

Fungsi parsing dalam typesafe-routes adalah serba boleh, dan kami juga boleh mengekstrak semua parameter terus daripada rentetan location.href sekaligus menggunakan parse.

// app.routes.ts
import { Routes } from "@angular/router";
import { template } from "typesafe-routes/angular-router";

export const routes: Routes = [
  {
    path: template(r.dashboard), // ~> "dashboard"
    component: DashboardComponent,
  },
  {
    path: template(r.orgs), // ~> "orgs/:orgId"
    component: OrgsComponent,
    children: [
      {
        path: template(r.orgs._.locations), // ~> "locations/:locationId"
        component: LocationsComponent,
      },
    ],
  },
];

Mengekstrak maklumat jenis tentang parameter boleh dilakukan melalui InferQueryParams, InferPathParams atau InferParams. Berikut ialah demonstrasi jenis utiliti InferQueryParams.

// app.component.ts
import { render, renderPath } from "typesafe-routes/angular-router";
import { r } from "./app.routes";

@Component({
  selector: "app-root",
  imports: [RouterOutlet, RouterLink],
  template: `
    <h1>Absolute Links</h1>
    <ul>
      <li><a [routerLink]="dashboardLink">Dashboard</a></li>
      <li><a [routerLink]="orgsLink">Org</a></li>
      <li>
        <a [routerLink]="locationLink.path" [queryParams]="locationLink.query">
          Location
        </a>
      </li>
    </ul>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  dashboardLink = renderPath(r.dashboard, {}); // ~> dashboard
  orgsLink = renderPath(r.orgs, { orgId: 123 }); // ~> orgs/123

  locationLink = render(r.orgs.locations, {
    path: { orgId: 321, locationId: 654 },
    query: { page: 42 },
  }); // ~> { path: "orgs/321/location/654", query: { page: "42" }}
}
// ...

Membungkus

Untuk mengakhiri tutorial ini, kami telah mencipta satu laluan pepohon r yang merupakan sumber tunggal kebenaran untuk laluan kami. Berdasarkan itu, kami memberikan templat yang kami gunakan untuk mendaftarkan komponen kami dengan Penghala Sudut. Kami memberikan laluan dengan segmen laluan dinamik dan parameter pertanyaan. Kami menghuraikan parameter untuk menukarnya daripada nilai rentetan kepada jenis yang sepadan. Kami melakukan segala-galanya dengan cara selamat jenis tanpa menulis walaupun satu definisi jenis tunggal. Kami telah mewujudkan pepohon laluan teguh yang mudah menghalang pepijat sambil membangunkan ciri baharu dan seterusnya memudahkan pemfaktoran semula masa hadapan.

Walau bagaimanapun, typesafe-routes mempunyai lebih banyak ciri, seperti pelbagai jenis parameter terbina dalam, penyepaduan mudah jenis parameter tersuai, manipulasi sublaluan, tentukan rentetan templat tersuai dan banyak lagi. Malangnya, kami tidak dapat merangkumi kesemuanya dalam tutorial ini, tetapi anda boleh membaca lebih lanjut dengan melawati dokumentasi rasmi.

Sokong Projek

Sudah tentu, terdapat juga banyak potensi penambahbaikan yang boleh dilaksanakan pada contoh yang ditunjukkan dalam tutorial ini. Contohnya, arahan tersuai untuk pemaparan pautan yang mengambil definisi laluan berdasarkan objek proksi kami, seperti r.orgs.locations. Contoh lain ialah fungsi yang menjana tatasusunan Laluan secara automatik untuk Penghala Sudut, dengan berkesan menghapuskan kod pendua dan keperluan untuk memastikan laluan itu selari dengan pepohon laluan kami yang dibuat dengan createRoutes dalam blok kod yang pertama.

Walau bagaimanapun, ini hanyalah beberapa cara di kalangan ramai untuk menyumbang. Cara yang paling biasa ialah, sudah tentu, berkongsi, melaporkan pepijat atau membuka PR dalam repositori GitHub kami. Jika anda menggunakan perpustakaan ini dan berpendapat ia meningkatkan pengalaman pembangunan anda, anda juga boleh membelikan saya kopi. Kami juga mempunyai saluran Discord di mana anda boleh meninggalkan maklum balas atau bertanya soalan.

Atas ialah kandungan terperinci Hapuskan Ralat Masa Jalan dengan Laluan Jenis selamat dalam Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!