Angular의 유형 안전 경로로 런타임 오류 제거

Angular 애플리케이션을 리팩토링하는 것은 양날의 검이 될 수 있습니다. 한편으로는 코드베이스의 유지 관리성과 확장성을 향상시킬 수 있습니다. 반면에 의도하지 않은 변경으로부터 기능을 보호하기 위해 필요한 예방 조치를 취하지 않으면 경로가 중단될 수 있습니다. 광범위한 테스트를 작성하거나 경로에 대한 확실한 유형 지정 개념을 구현하면 이러한 위험을 완화하는 데 도움이 될 수 있지만 이러한 접근 방식은 시간이 많이 걸릴 수 있으며 항상 실행 가능한 것은 아닙니다. 이 기사에서는 수동 테스트 노력이나 사용자 정의 유형 주석을 작성할 필요 없이 컴파일 시간에 끊어진 경로를 자동으로 감지하는 보다 효율적인 솔루션을 살펴보겠습니다. 중첩된 구성 요소가 포함된 샘플 Angular 애플리케이션을 구현하고 typesafe-routes 라이브러리를 사용하여 개발자 경험을 개선하고 매개변수 구문 분석을 용이하게 함으로써 이 접근 방식을 시연해 보겠습니다.

컴파일 시간에 끊어진 경로를 자동으로 감지하는 이점을 설명하기 위해 DashboardComponent(/dashboard), OrgsComponent(/orgs/:orgId) 및 LocationsComponent(/orgs)라는 세 가지 중첩 구성 요소가 있는 샘플 Angular 애플리케이션을 구현하겠습니다. /:orgId/locations/:locationId). 이 예제를 설정하려면 다음 코드 조각에 표시된 대로 typesafe-routes 라이브러리를 설치하고 해당 createRoutes 함수를 사용하여 경로 트리를 정의해야 합니다.

// 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]"
      },
    },
  },
});

코드 부분을 자세히 살펴보겠습니다. typesafe-routes에서 createRoutes를 가져오고 경로를 첫 번째 인수로 전달합니다. 이러한 경로는 루트 수준에서 대시보드와 조직이라는 두 가지 속성이 있는 중첩 개체로 정의됩니다. 이러한 각 속성에는 경로가 할당되어 배열 형식으로 세그먼트를 지정합니다. 예를 들어, ["dashboard"] 배열은 /dashboard 경로에 해당합니다. 조직 경로는 정수 유형의 orgId라는 매개변수를 포함하므로 더 복잡합니다. 정수는 기본 JavaScript 유형이 아니라 백그라운드에서 숫자를 사용하여 정수의 특성을 모방하는 int 함수를 사용하여 정의된 사용자 정의 유형입니다. 조직 경로에는 위치라는 하나의 하위 경로를 지정하는 하위 속성이 있습니다. 위치 경로는 조직 경로와 유사하지만 int 유형의 추가 선택적 검색 매개변수 페이지를 지정합니다.

createRoutes는 경로에 대한 정보를 사용하여 프록시 객체에 래핑된 컨텍스트를 생성합니다. 해당 프록시 개체에 대한 세부 정보를 알 필요는 없지만 해당 개체 덕분에 애플리케이션의 모든 경로 사양에 액세스하여 경로와 매개변수를 렌더링하고 구문 분석할 수 있다는 점을 이해하는 것이 중요합니다.

createRoutes에서 반환된 프록시 개체를 r에 할당했습니다. 즉, r.dashboard를 사용하여 대시보드 경로, r.orgs.locations를 사용하여 위치 경로 등에 액세스할 수 있습니다.

렌더링 템플릿

경로가 정의되었으면 이제 다음 단계인 Angular-Router에 등록하는 단계로 넘어갈 수 있습니다.

// 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]"
      },
    },
  },
});

코드 조각은 앞서 정의한 경로 트리를 미러링하는 Angular Router에 대한 중첩 경로가 있는 공통 설정을 보여줍니다. 그러나 일반적인 일반 문자열을 사용하여 경로 템플릿(예: orgs/:orgId)을 지정하는 대신 typesafe-routes/angular-router에서 템플릿 함수를 가져와서 이를 사용하여 경로 템플릿을 생성합니다. DashboardComponent 및 OrgsComponent의 경우 해당 경로 r.dashboard 및 r.orgs를 사용하여 템플릿을 호출하면 템플릿을 얻을 수 있습니다. 그러나 나머지 구성 요소 LocationsComponent는 OrgsComponent의 하위이므로 상대 경로가 필요합니다. 이는 r.orgs.locations를 사용하여 생성할 수 없습니다. 이렇게 하면 절대 경로 orgs/:orgId/locations/:locationId가 생성되는 반면 Angular Router는 경로 템플릿을 중첩할 때 상대 경로를 예상합니다.

상대 경로를 생성하려면 _ 링크를 사용하면 됩니다. 이 링크는 밑줄 문자 앞에 오는 모든 것을 효과적으로 생략합니다. 이 경우 template(r.orgs._.locations)를 사용하여 상대 경로를 생성할 수 있습니다. 이는 절대 경로를 렌더링해야 하는 시나리오뿐만 아니라 상대 경로가 필요한 상황에서도 동일한 경로 트리를 재사용할 수 있게 해주는 편리한 기능입니다.

이 시점에서 우리는 이미 자주 사용하는 IDE(예: Visual Studio Code)에서 자동 완성 및 오타 방지 기능을 활용했습니다. 그리고 createRoutes를 사용하면 모든 유형을 초기 경로 정의까지 추적할 수 있으므로 향후 변경 사항이 있으면 경로 경로의 철자 오류나 오타에 대해 경고를 받을 것입니다.

렌더링 링크

이제 경로 템플릿을 지정했으므로 링크 렌더링으로 넘어가겠습니다. 이를 위해 유형 직렬화 및 유형 검사를 포함하여 렌더링 기능을 활용하여 해당 링크를 렌더링하는 간단한 구성 요소를 만들고 싶습니다. 다음 예는 애플리케이션의 다른 구성 요소를 참조하는 앵커 요소 목록을 렌더링하는 구성 요소를 보여줍니다.

// 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,
      },
    ],
  },
];

코드 예제는 typesafe-routes/angular-router에서 render 및 renderPath를 가져옵니다. renderPath는 경로를 렌더링하는 반면, render는 링크 목록에 대한 쿼리 매개변수를 추가로 직렬화합니다. 또한 이전에 정의된 경로에 대한 정보에 액세스하고 렌더링할 원하는 경로를 정의할 수 있는 프록시 객체인 r을 가져옵니다.

먼저 renderPath 함수를 사용하여 DashboardLink와 orgsLink를 생성합니다. 첫 번째 매개변수로 렌더링할 경로의 경로를 나타내는 앞서 언급한 프록시 객체를 사용합니다. 두 번째 매개변수는 이전에 app.routes.ts에서 createRoutes로 정의된 매개변수의 이름 및 유형과 일치하는 매개변수 값이 있는 레코드입니다. 반환값은 해당 구성요소에 속한 경로가 포함된 문자열입니다.

세 번째 예의 render 함수는 경로와 검색 매개변수를 모두 렌더링하므로 매개변수 정의에 경로와 쿼리 속성이 필요합니다. 여기서 반환 값은 path와 query라는 두 가지 속성이 있는 개체입니다. 두 속성을 [routerLink] 및 [queryParams] 속성의 값으로 설정합니다.

매개변수 구문 분석

매개변수 구문 분석은 typesafe-route의 필수 부분입니다. 위의 경로 정의 중에 몇 가지 매개 변수를 정의하고 정수형 int 유형을 제공했습니다. 그러나 매개변수 값은 Location 객체와 같은 다양한 소스에서 나오므로 문자열 기반입니다. 편리하게도 typesafe-routes는 이러한 문자열을 구문 분석하고 원하는 유형으로 변환하는 도우미 함수를 내보냅니다. 구문 분석은 이전에 생성한 프록시 객체 r을 기반으로 합니다. 즉, 매개변수가 속한 경로를 라이브러리에 알려야 합니다. 다음 예에서는 두 가지 일반적인 구문 분석 시나리오를 보여줌으로써 이를 보여줍니다.

// 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]"
      },
    },
  },
});

Angular에서 location.href orgs/1/location/2?page=5를 고려하면 this.route.snapshot.queryParams를 사용하여 문자열 기반 쿼리 매개변수에 액세스할 수 있으며 이를 통해 문자열 기반 경로 매개변수가 제공됩니다. 경로.스냅샷.매개변수. r.orgs.locations 및 this.route.snapshot.queryParams와 함께 parsQuery를 사용하면 페이지 매개변수가 숫자로 포함된 객체를 검색할 수 있습니다. r.orgs._.locations 및 this.route.snapshot.params와 함께 parsPath를 사용하여 구문 분석된 locationId를 얻습니다. 이 경우 r.orgs._.locations는 상대 경로이고 _ 링크 앞의 모든 세그먼트가 생략되어 결과 객체에 orgId가 존재하지 않게 됩니다.

typesafe-routes의 구문 분석 기능은 다목적이며 구문 분석을 사용하여 location.href 문자열에서 직접 모든 매개변수를 한 번에 추출할 수도 있습니다.

// 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,
      },
    ],
  },
];

InferQueryParams, InferPathParams 또는 InferParams를 통해 매개변수에 대한 유형 정보 추출이 가능합니다. 다음은 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 id="Absolute-Links">Absolute Links</h1>
    

• Dashboard
• Org
• Location

`, }) 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" }} } // ...

마무리

이 튜토리얼을 마무리하기 위해 경로에 대한 단일 정보 소스인 단일 경로 트리 r을 만들었습니다. 이를 기반으로 우리는 Angular Router에 구성 요소를 등록하는 데 사용되는 템플릿을 렌더링했습니다. 동적 경로 세그먼트와 쿼리 매개변수를 사용하여 경로를 렌더링했습니다. 매개변수를 구문 분석하여 문자열 값에서 해당 유형으로 변환했습니다. 우리는 단 하나의 유형 정의도 작성하지 않고 유형이 안전한 방식으로 모든 작업을 수행했습니다. 우리는 새로운 기능을 개발하는 동안 버그를 쉽게 방지하고 향후 리팩토링을 용이하게 하는 강력한 경로 트리를 구축했습니다.

그러나 typesafe-routes에는 다양한 내장 매개변수 유형, 사용자 정의 매개변수 유형의 손쉬운 통합, 하위 경로 조작, 사용자 정의 템플릿 문자열 정의 등과 같은 더 많은 기능이 있습니다. 안타깝게도 이 튜토리얼에서 모든 내용을 다룰 수는 없지만 공식 문서를 방문하면 더 많은 내용을 읽을 수 있습니다.

프로젝트 지원

물론 이 튜토리얼에 표시된 예에 구현할 수 있는 잠재적인 개선 사항도 많이 있습니다. 예를 들어, r.orgs.locations와 같은 프록시 객체를 기반으로 경로 정의를 취하는 링크 렌더링을 위한 사용자 정의 지시어입니다. 또 다른 예는 Angular Router에 대한 Routes 배열을 자동으로 생성하는 기능으로, 중복된 코드를 효과적으로 제거하고 첫 번째 코드 블록에서 createRoutes를 사용하여 생성된 경로 트리와 경로를 동기화해야 하는 필요성을 효과적으로 제거합니다.

그러나 이는 다양한 기여 방법 중 일부에 불과합니다. 물론 가장 일반적인 방법은 GitHub 저장소에서 버그를 공유하거나 보고하거나 PR을 여는 것입니다. 이 라이브러리를 사용하여 개발 경험이 향상된다고 생각하시면 커피 한 잔 사주실 수도 있습니다. 피드백을 남기거나 질문을 할 수 있는 Discord 채널도 있습니다.

위 내용은 Angular의 유형 안전 경로로 런타임 오류 제거의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!