タイプを書き込みません

childrenp付きの素子を作製する際にはreactが提供するPropsWithChildrenタイプが好ましい.例えば、childrenとfooを支柱とするアセンブリは、以下のようになります.

function Foo({ foo, children }: PropsWithChildren<{ foo: string }>) {
  return (
    <div>
      {foo}
      {children}
    </div>
  )
}

childrenが所有する素子だけがPropsWithChidren<{}>を使用している.
ちなみに、PropsWithChildren長です.

type PropsWithChildren<P> = P & {
    children?: ReactNode | undefined;
}

ただし、@typescript-eslint/ban-typesルールでは{}は使用しないことが求められている.このタイプは空のオブジェクトのタイプだと思いますが...実際の操作はnullではなく値全体を表します.非null値の全体と{ children }との交差は{ children }であるため有効である.それでも、{}と別れるために、PropsWithChildrenに入れる他の価格を知る旅が始まった.
1つ目の試みは、厳密な空のオブジェクトタイプです.Record<string, never>で本当の空のオブジェクトを表すと、問題は簡単に解決できます.しかし、実際には使用できない構成部品です.構成部品宣言に問題はありませんが、構成部品を使用すると、インデックス署名がサブタイプと互換性がないエラーが発生します.stringとしてのindex signatorの値はnewなのでRealtNodeは割り当てられません.

function Type1({ children }: PropsWithChildren<Record<string, never>>) {
	return <div>{children}</div>
}

<Type1>asdf</Type1> // { children: string }에는 index signature와 호환이 안되는 문제 발생

2回目の試みは任意のオブジェクトです.Record<string, unknown>を使用して、インデックス・フラグを互換化します.しかし、この素子には他の問題があります.任意の属性を持つオブジェクトが使用されているので、任意のpropを使用できます.タイプシステムを破壊することだったので、別のタイプを見つけました.

function Type2({ children }: PropsWithChildren<Record<string, unknown>>) {
	return <div>{children}</div>
}

<Type2>asdf</Type2> // OK
<Type2 foo="HACK">asdf</Type2> // OK...이지 않았으면 한다.

パラメータのタイプとして{ children }と交差した後、{ children }を残すには、どのような値が必要ですか?A校集合Bが出てくるとBは…?全員集合する.TypeScriptの世界ではanyと呼ばれています.でもanyも親近感がないのでunknownと書きましたunknownを使用すると、子供が問題なく使用できるように、任意の支持を許さない要素を作成することができる.

function Type3({ children }: PropsWithChildren<unknown>) {
	return <div>{children}</div>
}

<Type2>asdf</Type2> // OK
<Type2 foo="HACK">asdf</Type2> // Not OK

TS Playground