개발하자

구성 요소의 강력한 유형 클래스를 Svelte

Cuire 2023. 9. 16. 13:56
반응형

구성 요소의 강력한 유형 클래스를 Svelte

저는 구성요소가 그룹화되는 방식에 약간의 왜곡이 있는 구성요소 라이브러리를 연구하고 있습니다. 최종 사용자가 라이브러리를 더 쉽게 사용할 수 있도록 구성 요소를 클래스로 그룹화하고 있습니다. 어떤 이름을 사용할 수 있는지 기억하는 대신 점 표기법을 사용하여 사용자 지정 슬롯에 액세스합니다. 예를 들어, 구성 요소에는 , 및 가 있을 수 있습니다. 라이브러리에서 다음과 같은 구성 요소를 사용하고 싶습니다.

<Card>
  <Card.Header>I am a Header</Card.Header>
  <Card.Body>I am a Body</Card.Body>
  <Card.Footer>I am a Footer</Card.Footer>
</Card>

나는 현재 이것이 작동하고 있지만 이것도 강하게 타이핑하려고 노력하고 있고 거기서 문제가 발생하고 있다. 내 파일 구조는 다음과 같습니다.

card
  | Card.svelte
  | Body.svelte
  | Header.svelte
  | Footer.svelte
  | index.ts

내 index.ts 파일의 코드는 다음과 같습니다.

import OriginalCard from './Card.svelte';
import Header from './Header.svelte';
import Footer from './Footer.svelte';
import Body from './Body.svelte';

const Card = OriginalCard;
Card.Header = Header;
Card.Body = Body;
Card.Footer = Footer;

export default Card;

머리글, 본문 및 바닥글 모두 다음 오류를 반환합니다.

구성 요소를 이렇게 사용할 경우:

<script lang="ts>
  import Card from '@components/card';
</script>

<Card>
  <Card.Header>I am a Header</Card.Header>
  <Card.Body>I am a Body</Card.Body>
  <Card.Footer>I am a Footer</Card.Footer>
</Card>

머리글, 본문 및 바닥글 모두 다음 오류를 반환합니다.

이러한 오류를 어떻게 해결할 수 있습니까?

편집하다

이 패키지를 다른 프로젝트에 설치한 후 수락된 답변으로는 해결할 수 없는 두 가지 문제를 발견했습니다.

1). ts error - 0 인수가 필요하지만 1을 가져와서 허용되는 속성에 대한 모든 인텔리전스를 해제합니다.

2). Intelligence는 점 표기법과 함께 작동하지 않습니다. 입력할 때 하위 구성 요소에 대한 제안을 받지 않고 전체 패키지의 모든 구성 요소만 표시합니다.

원하는 결과는 ts 오류가 발생하지 않고 패키지에 대한 라이센스를 잃지 않는 것입니다.

나는 또한 그렇게 확장하려고 시도했다: 그리고 같은 문제들이 계속 지속되었다.



추가 속성을 추가하려면 알려진 유형을 확장해야 합니다. 그들은 정적이기 때문에 나는 다음과 같은 것을 시도할 것이다:

const Card = OriginalCard as CardStatic;
Card.Header = Header;
Card.Body = Body;
Card.Footer = Footer;

export default Card;

export interface CardStatic {
    new(...args: ConstructorParameters<typeof OriginalCard>): OriginalCard;
    Header: typeof Header;
    Body: typeof Body;
    Footer: typeof Footer;
}

반응형