Language-tools: 토론: 구성 요소에서 지원하는 이벤트를 입력하는 방법

이것이 쉽게 구현되지 않는 이유는 가능한 모든 이벤트를 수집하는 것이 props를 수집하는 것보다 훨씬 어렵기 때문입니다. 이것이 소품용이기 때문에 자동 완성이 작동하지 않는 이유이기도 합니다.

내부를 살펴보면 props가 jsx props를 통해 구현된다는 것입니다. 이벤트는 수집 제한 때문이 아닙니다. 사용자가 명시적으로 입력하면 변경될 수 있습니다. 언급된 문제 때문에 발송된 이벤트를 "정의와 일치하지 않음"으로 표시할 수 없습니다.

예약된 인터페이스를 갖는 것이 앞으로 나아갈 가능성이 높습니다. 우리는 이전에 일반 props의 맥락에서 이에 대해 생각했습니다. 예약된 인터페이스 이름은 ComponentEvents , ComponentProps , ComponentSlots 및 ComponentDef 있습니다.

관련 #304

on:<event> 를 사용하여 자동 완성을 얻는 것은 다른 방식으로 수행해야 합니다. 왜냐하면 후드 아래에서 이러한 자동 완성을 얻기 위해 JSX를 사용하기 때문입니다. "즉시" 자동 완성 기능을 사용하려면 on:<event> 가 소품의 일부로 있어야 합니다. 그러나 이것은 JSX가 props에 : 와 같은 문자를 허용하지 않기 때문에 불가능합니다.
또 다른 문제는 현재 TypeScript로 수행할 수 없는 on: 앞에 이벤트 유형 정의를 변환해야 한다는 것입니다( 관련 TS 문제 ).

이러한 제약 조건에서 두 가지 솔루션이 발생합니다.

• 개발자에게 __on__<eventName>: .. 와 같은 이벤트를 입력하라고 말하면 언어 서버에서 자동 완성 중에 __on__ 를 on: 로 바꿉니다. 이것은 차선책이고 부서지기 쉬운 느낌입니다.
• 이를 위해 "자체" 자동 완성을 구현합니다. 이것은 아마도 어려운 작업이지만 깨끗한 솔루션으로 이어질 것입니다.

사용자가 이벤트를 명시적으로 입력하는 경우 $on 메서드 정의가 CustomEvent<any> 되돌아가지 않는 변형을 통해 #386이 병합된 후 " on:XXX 가 존재하지 않습니다" 오류가 쉽게 발생할 수 있습니다. .

https://github.com/sveltejs/svelte/pull/5260 이 릴리스되면 svelte2tsx 를 업데이트하여 createEventDispatcher 검색하고 유형 주석이 있는지 확인하고 그렇다면 적절한 유형을 가져오는 데 사용합니다.

이제 Svelte 3.25.0에 도입된 createEventDispatcher 타이핑을 활용할 수 있습니다. 하면

const dispatch = createEventDispatcher<{foo: string; bar: boolean}>();

구성 요소 내에서 dispatch 대한 강력한 입력을 얻고 foo / bar 이벤트를 수신하면 강력한 입력을 얻을 수 있습니다.

on:foo={e => ... // <- e is of type CustomEvent<string>

또한 이제 이벤트에 대한 훨씬 더 나은 자동 완성 기능을 사용할 수 있습니다. 그러나 여전히 다른 이벤트를 수신할 수 있으므로 " createEventDispatcher 통해 정의된 이벤트만 수신 대기"라는 의미의 유형 안전은 여전히 ComponentEvents 인터페이스를 통해서만 가능합니다. 그러나 우리는 이벤트를 엄격하게 만드는 무언가(아마도 스크립트 태그 속성)를 제공할 계획입니다.

관련 문서: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#typing -component-events

@dummdidumm

createEventDispatcher 대한 일부 수신 이벤트가 유형을 수신하지 않는 이유에 대한 아이디어가 있습니까?

예시:

// Component Foo
const dispatchFoo = createEventDispatcher<{foo: string; bar: boolean}>();
const dispatchBar = createEventDispatcher<{bar: string; baz: string}>();

// Component Bar
// e is CustomEvent<any>
on:foo="{(e) => handleFoo(e.detail.bar)}"
// e is CustomEvent<{baz: string}>
on:bar="{(e) => handleBar(e.detail.bar)}"

typescript 컴파일러는 예상대로 이것을 포착합니다.

순서를 변경하면 다른 결과가 생성됩니다.

createEventDispatcher 순서가 변경되면 typescript 컴파일러는 오류를 포착하지 않습니다.
마지막 createEventDispatcher 만이 리스너의 유형을 생성하는 것으로 보입니다.

// Component Foo
const dispatchBar = createEventDispatcher<{bar: string; baz: string}>();
const dispatchFoo = createEventDispatcher<{foo: string; bar: boolean}>();

// Component Bar
// e is CustomEvent<{bar: boolean}>
on:foo="{(e) => handleFoo(e.detail.bar)}"
// e is CustomEvent<any>
on:bar="{(e) => handleBar(e.detail.bar)}"

typescript 컴파일러는 이제 유형이 CustomEvent<any> 이므로 오류를 포착하지 않습니다.