Language-tools: Svelteコンポーネントの小道具/イベント/スロットを入力する

合理的なようですが、実行時にスロットを挿入できるかどうかについては、実際にはSvelteの問題があります。 https://github.com/sveltejs/svelte/issues/2588とそれを実装するPRhttps：//github.com/sveltejs/svelte/pull/4296 、重複があるか、少なくともいくつかの機会があるように感じますインターフェイスを調整します（コンセンサスがある場合でも、上記のPRには未解決の質問がいくつかあります）。

PRリンクのおかげで、コンストラクターの型を少し変えなければならないという点でのみ関係しているようですが、これはテンプレートレベルでの型チェックとは無関係だと思います。

面白い。
こんなことができるかな

<script lang="ts" generic="T"> 
    type T = unknown
    export let items: T[]
    let item:T = items[0]
</script>
<slot b={item}></slot>

これにより、タイプチェック中にtype T = unknownが削除され、代わりにジェネリック引数としてコンポーネントに追加されます。

//...
render<T>() {
    export let items: T[]
    let item:T = items[0]
}

render関数に追加することをお勧めします。

同じ結果が得られると思います

<script lang="ts">
    interface ComponentDef<T> {
       ...
    } 
    type T = unknown
    export let items: T[]
    let item:T = items[0]
</script>
<slot b={item}></slot>

インターフェイス定義からTを抽出します。

あなたのソリューションでは、「小道具とスロットの間に一般的な関係が欲しいだけ」の場合は、入力する必要が少なくなりますが、これは素晴らしいことです。 「ええ、両方を追加するだけでいい」と思っている一方で、APIサーフェスを拡張しすぎているように感じます（同じことをさまざまな方法で実行できます）。わかりません。

私は本当にinterface ComponentDef<T>{ props: {} }を書き留めて、それを私のエクスポートのそれぞれと並べる必要はありません。 Svelteは、Reactと比較して、入力された文字を減らすのに非常に優れており、これは一歩後退したように感じます。 特に、すべてのエクスポートのタイプを小道具に複製する必要がありますが、これは面白くありません（そして頻繁な問題につながることになります）。

@halfnelsonの考え方が好きです。 エクスポートは小道具として検出する必要があります。 モジュールが一度はどのように見えるかわかりません

もう1つの簡単な方法は、関連する問題のいくつかで読んだものです。JSDocコメントを使用して、 @templateオプションなど、入力に問題が発生したことはありません。

JSDocに対してオープンマインドを保つ必要がありますが（HTML内でJSDocを使用する場合でも）、WebStormまたはVS Codeのどちらを使用する場合でも、TypeScriptとして表現できないことを警告する必要があります。 たとえば、 trueタイプを実装していません。 インデックスタイプは実行しないと確信しています。 思い出すと、 Record<keyof X, any>も持てません。 私はそれで壁にぶつかり続けます。 @templateは機能しましたが、かなり制限されていました。 また、IDEによっても動作が異なると思います。

ジェネリック型を渡す（jsx）elementは、有効なsvelteテンプレート構文ではないため、私には使用できません。 ジェネリックはプロパティによって駆動されるため、これも必要ありません。スロット/イベントのみに依存するジェネリックを導入する方法は考えられません。 それらが入力プロパティによって駆動される場合、TSが推測するような方法でsvelte2tsxコードを生成できるため、ジェネリックスをjsx要素に渡す必要はありません。

タイピングのオーバーヘッドについて：これは正しいですが、ジェネリックスを使用したり、イベント/スロットを明示的にタイプしたりする場合にのみ必要になります。 理論的には、これらすべてを自分たちで推測することはできますが、これを実装するのは非常に難しいと感じています。 このような実装が難しい問題の例としては、＃263のような高度なスロットシナリオのサポートや、考えられるすべてのコンポーネントイベントの収集があります（ユーザーがcreateEventDispatcherのみを使用する場合は簡単ですが、関数をインポートすることもできます）。 createEventDispatcherのものをラップします）。

一般に、人々がそれらの1つだけを定義し、他のものは定義したくないという状況はたくさんあると思います。そのため、Svelteの「タイプレス」精神を維持するために、さまざまなオプションをすべて提供する必要があるかもしれません。

これは次のことを意味します：

• ComponentDefは、必要に応じてすべてを1つにまとめたものです。
• ComponentEventsはイベントの入力専用です
• ComponentSlotsはスロットの入力専用です
• ジェネリックのみが必要な場合は、 <script generic="T">のような構造
• ComponentEvents/ComponentSlots/generic="T"の組み合わせ

@shirakaba JSDocタイプのサポートは、タイプスクリプトのように機能が豊富である必要はありません。 多くの人がそれを使ってジェネリックコンポーネントを入力するのではないかと思います。 また、typescriptの言語サービスを使用しているため、多くの高度なタイプをtypescriptファイルから簡単にインポートできます。

スロット小道具のタイプチェックについて、私はいくつかのハックを持っていますが、これが良い開発者体験につながるかどうかはわかりません。 このようなユーザータイプのコンポーネントの場合：

interface ComponentDef {
      slots: { default: { item: string } }
  }

クラスを生成できます

class DefaultSlot extends Svelte2TsxComponent<ComponentDef['slots']['default']>{ }

デフォルトのスロットをに変換します

<DeafaultSlot />

（ユーザーとしてチャイムを鳴らすだけです）TypeScriptで作業している間、とにかく多くのことをしなければならないので、私にとって余分なタイピングは問題ではありません。

インターフェイスとgenericプロップについては、変数がコンシューマーにのみ公開される場合があるため、プロップをサポートするのはDXの方が適しています。 しかし、その点で、 generic="T" export type Tをサポートすることは可能でしょうか？

これは無効なTS構文であり、人々を混乱させる可能性があります。 また、追加の変換ステップを実行する必要があります。これは、Svelteコンポーネントがコンパイル不可能な状態の場合には実行されません。 この場合、language-toolsはスクリプトにあるものにフォールバックし、スクリプトにはこの無効な構文が含まれます。 だから私はそれに反対です。

わかりました。 長引くことはありませんが、構文が無効であるか、「未定義/不明なタイプ」エラーが多いのでしょうか。 TypeScriptのコンパイラが2つのケースをどのように処理するかわからないので、私は尋ねています。 scriptタグにカスタム属性を追加することに対して、特に「generic」のような一般的な名前で予約するだけです:)

全体として、私にとって、これは便利であり、コンポーネントを使用するときにユーザーにエクスポートされた変数を入力するように強制することは良いことです（より読みやすいコード）。

export type T;と入力すると、TSは構文エラーをスローします。 また、制約を定式化する方法は？ export type T extends string;は、より多くの構文エラーをスローします。 カスタム属性に対する予約は完全に理解していますが、最も混乱の少ない方法だと思います。 他の方法は、 T1やT2のような予約済みの型名を使用することですが、それは十分な柔軟性がありません（制約を追加する方法は？）。

別の方法は、 ComponentDefを介してコンポーネント全体を入力することです。ここでは、最初の投稿の例のように、ジェネリックを自由に追加できます。 しかし、これにはより多くのタイピングが犠牲になります。

私にとって、人々はこれについて非常に異なる意見を持っており、より多くのオプションをレイアウトすること（ ComponentDef 、属性としての一般的な小道具、 ComponentEventsと入力するだけ）が最も柔軟であることが議論から明らかになります彼らは同じことをするさまざまな方法を紹介しますが、彼らのほとんどを幸せにします。

私はこれを見逃したかもしれませんが、それをオプションに分割していますか？

<script>
  import type { Foo } from './foo';
  export let items: Foo[];
  interface ComponentSlots<T> {}
  interface ComponentEvents<T> {}
</script>

ほとんどの場合、入力のオーバーヘッドが減りますか？

はい、これは可能です。

@dummdidummは、その間にinterface ComponentSlots {} （ジェネリックスのサポートの有無にかかわらず）のサポートに取り組むことは可能ですか？ それとも、それを導入することは、ここで議論されていることと矛盾するでしょうか？

そうではありませんが、実装を続行する前に、提案されたソリューションについてコミュニティや他のメンテナからより多くのフィードバックを得るために、まずRFCを作成したいと思います。 合意が得られたら、それらの実装を開始します。

@joelmukuthuところで、なぜインターフェースをサポートしたいのですか？ スロットの型推論を強化しましたが、それでもうまくいかない場合がありますか？ もしそうなら、私はあなたのケースを聞いて興味があります。

このトピックに関するRFCを作成しました： https ：//github.com/sveltejs/rfcs/pull/38
APIに関する議論はそこで続けられるべきです。

@dummdidumm応答が遅いことをお詫びします。 私のユースケースでは、実際にはジェネリックスのサポートが必要であることに気づきました。 スロットの型推論は非常にうまく機能します！

これは巨大でしょう！ 私は現在、スロットのプロパティを使用することは常に何でもあることを悲しんでいます。

奇妙なことに、使用するコンポーネントがプロジェクト内にあり、TSも使用している場合、この時点でスロットタイプは非常にうまく推測できます。

おそらく私はここで間違った用語を使用しています...またはうまくいけば私は何か間違ったことをしました。

私がしたいことの例：

`` `html


{option.myLabelProp}

わかりました。はい、現時点ではこれは不可能なので、 any[]にフォールバックする必要があります。 これでstring[]しか許可されない場合、スロットはstringと入力されます。これは、「タイプを推測できる」という意味です。

MarkVolkmannによる「SvelteandSapper in Action」で出会ったタイプチェックコンポーネントの一時的な解決策は、$$ propsと一緒にReactprop-typesライブラリを使用することです。

これは、たとえばTodoアイテムのコードです。

import PropTypes from "prop-types/prop-types";

const propTypes = {
    text: PropTypes.string.isRequired,
    checked: PropTypes.bool,
};

// Interface for Todo items
export interface TodoInterface {
    id: number;
    text: string;
    checked: boolean;
}

PropTypes.checkPropTypes(propTypes, $$props, "prop", "Todo");

Todoの小道具を検証し、何かがオフになっているとエラーが発生する一方で、VsCodeで静的型チェックと自動補完を行えるように、Todoアイテムのインターフェイスも必要です。 これは、上記で定義したインターフェイスを使用して実現されます。 これの明らかで重大な欠点は、ここに重複したコードが必要なことです。 propTypesオブジェクトからインターフェイスを定義することはできません。その逆も同様です。

私はまだjavascriptを使い始めているので、これが間違っている場合は修正してください。

型チェックは、実行時の静的チェックとprops型チェックの両方で、生産的なコードベースに必須だと思います。

（インターフェースはcontext = 'module'で定義されるため、コンポーネントのデフォルトのエクスポートと一緒にエクスポートできますが、簡潔にするためにその部分は省略されていることに注意してください）

編集：小道具の検証以外の目的でこれを試したことはありません。スロット/イベントでも機能するかどうか教えてください！