Astro 구성 요소 및 TypeScript로 강력한 DX를 제작합니다

DX (Developer Experience)에 대한 Astro의 초점은 특히 새로운 팀원을 대고하는 데 큰 추첨입니다. 그러나 복잡한 구성 요소 시스템은 빠르게 탐색하기가 어려워 질 수 있습니다. 이 기사는 Astro에서 쉽게 구할 수있는 TypeScript를 활용하여 개발 팀을위한보다 직관적이고 강력한 DX를 만들어 일관성을 보장하고 일반적인 오류를 방지하는 방법을 보여줍니다. 이것은 코드베이스를 다시 방문 할 때 새로운 개발자와 미래 자아 모두에게 중요합니다.

각 구성 요소의 문서를 검토하는 것이 가능하지만 비효율적입니다. 우수한 접근 방식은 지식을 구성 요소의 인터페이스에 직접 통합하여 즉각적인 컨텍스트를 제공하고 코드가 푸시되기 전에 비용이 많이 드는 실수를 방지합니다.

이 튜토리얼은 기본 Astro 프로젝트를 사용합니다. 시작하려면 "최소한"템플릿을 사용하여 새 프로젝트를 만듭니다.

 NPM Astro@최신작을 만듭니다

제거하십시오<welcome></welcome> 클리너 시작점의 인덱스 경로에서 구성 요소. 스타일을 위해 Tailwind CSS 추가를 고려하십시오.

 NPX Astro Add Tailwind

제목 구성 요소 구축

Heading 구성 요소에 원하는 개발자 경험을 정의해 봅시다. 개발자는 HTML 제목 레벨 (H1-H6)을 선택하고 글꼴 크기와 무게를 독립적으로 지정하며 추가 HTML 속성을 통과 할 수 있어야합니다.

동적 태그 생성

./src/components/Heading.astro 를 작성하십시오 :

 ---
const {as : as = "h2"} = astro.props;
---

<as><slot></slot></as>

이것은 Astro를 사용합니다<slot></slot> 동적으로 선택된 요소 내에서 어린이를 렌더링합니다. 동적 요소 등록을 위해 자본화 된 as Prop은 기본적으로 h2 로 기본적으로.

이제이 구성 요소를 ./src/pages/index.astro 로 사용하십시오.

 ---
'../layouts/layout.astro'에서 레이아웃 가져 오기;
'../components/heading.astro'에서 제목을 가져옵니다.
---

<layout>
  <heading as="h1">안녕하세요!</heading>
  <heading as="h2">안녕하세요 세계</heading>
</layout>

강화 된 소품과 스타일

weight 와 size 소품을 추가하여 구성 요소를 개선하여 스타일링을 위해 테일 윈드 클래스에 매핑하겠습니다. 이 접근법은 클래스 이름을 직접 사용하여 유지 관리 가능성을 향상시키고 구성 요소를 향후 방지하는 것을 피합니다.

./src/components/Heading.astro 업데이트 :

 ---
const weights = {
  대담한 : "글꼴 볼드",
  Semibold : "Font-Semibold",
  중간 : "글꼴-메드륨",
  빛 : "글꼴로",
};
const 크기 = {
  "6xl": "Text-6xl",
  "5xl": "Text-5xl",
  "4xl": "Text-4xl",
  "3xl": "Text-3xl",
  "2xl": "Text-2xl",
  XL : "Text-XL",
  LG : "Text-LG",
  MD : "Text-MD",
  SM : "Text-Sm",
};

const {as : as = "h2", weight = "medium", size = "md", ... attrs} = astro.props;
---

<as class:list="{[sizes[size]," weights ...object.values>
  <slot></slot>
</as>

...attrs 추가 HTML 속성을 전달할 수 있습니다. 이 새로운 소품을 활용하려면 ./src/pages/index.astro 업데이트하십시오.

TypeScript로 안전을 입력하십시오

개발자 경험을 더욱 향상시키기 위해 오류를 방지하기 위해 TypeScript 유형을 추가하겠습니다. astro/types 에서 HTMLAttributes 가져 와서 Props 인터페이스를 정의하십시오.

 ---
'Astro/Type'에서 가져 오기 유형 {htmlattributes};

인터페이스 소품은 htmlattributes를 확장합니다.
  AS : "H1"| "H2"| "H3"| "H4"| "H5"| "H6";
  무게? : 가중치 유형의 키;
  크기? : 크기 유형의 키;
}

// ... 나머지 구성 요소
---

이를 통해 as , weight 및 size 소품에 대한 유형 안전을 보장하여 코드 편집기에서 자동 완성 및 오류 강조 표시를 제공합니다. keyof typeof weights 및 sizes 객체에서 유형 옵션을 동적으로 생성하여 유형을 구성 요소의 논리와 동기화합니다.

TypeScript를 통합함으로써보다 강력하고 사용자 친화적 인 구성 요소 시스템을 만들어 개발자 경험을 크게 향상시키고 오류 가능성을 줄입니다. DX에 대한 이러한 투자는 장기적으로 비용을 지불하여 새로운 팀원들에게보다 효율적인 개발과 더 쉬운 온 보딩으로 이어집니다.

위 내용은 Astro 구성 요소 및 TypeScript로 강력한 DX를 제작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!