import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "TypeScript",
  "children": [{
    "depth": 2,
    "value": "TypeScript の設定",
    "children": []
  }, {
    "depth": 2,
    "value": "API の型",
    "children": [{
      "depth": 3,
      "value": "Signal",
      "children": [{
        "depth": 5,
        "value": "デフォルト",
        "children": []
      }]
    }, {
      "depth": 3,
      "value": "Context",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "コンポーネントの型",
    "children": []
  }, {
    "depth": 2,
    "value": "イベントハンドラー",
    "children": []
  }, {
    "depth": 2,
    "value": "ref 属性",
    "children": []
  }, {
    "depth": 2,
    "value": "制御フローの絞り込み",
    "children": []
  }, {
    "depth": 2,
    "value": "特殊な JSX 属性とディレクティブ",
    "children": [{
      "depth": 3,
      "value": "on:___/oncapture:___",
      "children": []
    }, {
      "depth": 3,
      "value": "prop:___/attr:___",
      "children": []
    }, {
      "depth": 3,
      "value": "use:___",
      "children": []
    }]
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    h2: "h2",
    code: "code",
    pre: "pre",
    span: "span",
    h3: "h3",
    h5: "h5",
    ol: "ol",
    li: "li"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "typescript",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#typescript",
        children: "#"
      }), "TypeScript"]
    }), "\n", jsx(_components.p, {
      children: "Solid は、TypeScript で簡単に使用できるよう設計されています。\n標準的な JSX を使用すると、TypeScript でコードをほぼ理解でき、API のための洗練された組み込み型も提供されています。"
    }), "\n", jsx(_components.p, {
      children: "このガイドでは、TypeScript を使用する際や Solid のコードを型付けする際の便利なヒントを紹介します。"
    }), "\n", jsxs(_components.h2, {
      id: "typescript-の設定",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#typescript-の設定",
        children: "#"
      }), "TypeScript の設定"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://github.com/solidjs/templates/",
        children: "Solid スターター テンプレート"
      }), "は、", jsx(_components.a, {
        href: "https://github.com/solidjs/templates/blob/master/ts/tsconfig.json",
        children: jsx(_components.code, {
          children: "tsconfig.json"
        })
      }), " を作成するための良い出発点となります。"]
    }), "\n", jsxs(_components.p, {
      children: ["最も重要なことは、Solid JSX コンパイラーで TypeScript を使用するには、", jsx(_components.a, {
        href: "https://www.typescriptlang.org/tsconfig#jsx",
        children: jsx(_components.code, {
          children: "\"jsx\": \"preserve\""
        })
      }), " で JSX コンストラクトを残すように TypeScript を設定する必要があり、また、", jsx(_components.a, {
        href: "https://www.typescriptlang.org/tsconfig#jsxImportSource",
        children: jsx(_components.code, {
          children: "\"jsxImportSource\": \"solid-js\""
        })
      }), " で JSX の型の場所を TypeScript に伝える必要があります。"]
    }), "\n", jsxs(_components.p, {
      children: ["したがって、最小限の ", jsx(_components.code, {
        children: "tsconfig.json"
      }), " は次のようになります:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-json",
        children: [jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"compilerOptions\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "{"
        }), "\n    ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsx\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"preserve\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ","
        }), "\n    ", jsx(_components.span, {
          className: "hljs-attr",
          children: "\"jsxImportSource\""
        }), jsx(_components.span, {
          className: "hljs-punctuation",
          children: ":"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), "\n  ", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), "\n", jsx(_components.span, {
          className: "hljs-punctuation",
          children: "}"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["コードベースでさまざまな種類の JSX を使用している場合（例えば一部のファイルは React で他のファイルは Solid）、コードの大部分に対して ", jsx(_components.code, {
        children: "tsconfig.json"
      }), " でデフォルトの ", jsx(_components.code, {
        children: "jsxImportSource"
      }), " を設定できます。そして以下のプラグマを使用して、特定の ", jsx(_components.code, {
        children: ".tsx"
      }), " ファイルで ", jsxs(_components.a, {
        href: "https://www.typescriptlang.org/tsconfig#jsxImportSource",
        children: [jsx(_components.code, {
          children: "jsxImportSource"
        }), " オプションをオーバーライド"]
      }), "します:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsxs(_components.span, {
          className: "hljs-comment",
          children: ["/** ", jsx(_components.span, {
            className: "hljs-doctag",
            children: "@jsxImportSource"
          }), " ", jsx(_components.span, {
            className: "hljs-variable",
            children: "solid"
          }), "-js */"]
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "or"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsxs(_components.span, {
          className: "hljs-comment",
          children: ["/** ", jsx(_components.span, {
            className: "hljs-doctag",
            children: "@jsxImportSource"
          }), " react */"]
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "api-の型",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#api-の型",
        children: "#"
      }), "API の型"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid は TypeScript で記述されているため、そのままですべてが型付けされています。\n", jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api",
        children: "API ドキュメント"
      }), "には、すべての API 呼び出しの型が詳細に記載されています。さらに、明示的に型を指定する必要がある場合に Solid の記法を参照しやすくするためのいくつかの有用な型定義も記載されています。"]
    }), "\n", jsx(_components.p, {
      children: "ここでは、いくつかのコアプリミティブを使用した場合の結果の型について説明します。"
    }), "\n", jsxs(_components.h3, {
      id: "signal",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#signal",
        children: "#"
      }), "Signal"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "createSignal<T>"
      }), " は、Signal に格納されているオブジェクトの型 ", jsx(_components.code, {
        children: "T"
      }), " をパラメータとしています。例えば:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = createSignal<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ">();\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["最初の ", jsx(_components.code, {
        children: "createSignal"
      }), " は戻り値が ", jsx(_components.code, {
        children: "Signal<number>"
      }), " で、渡した型に対応しています。これはゲッターとセッターのタプルで、それぞれジェネリック型を持っています:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " { ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Signal"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Accessor"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Setter"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Signal"
        }), "<T> = [", jsx(_components.span, {
          className: "hljs-attr",
          children: "get"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Accessor"
        }), "<T>, ", jsx(_components.span, {
          className: "hljs-attr",
          children: "set"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Setter"
        }), "<T>];\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["この場合、Signal のゲッター ", jsx(_components.code, {
        children: "count"
      }), " は ", jsx(_components.code, {
        children: "Accessor<number | undefined>"
      }), " という型を持っています。", jsx(_components.code, {
        children: "Accessor<T>"
      }), " は Solid が提供する型定義で、この場合 ", jsx(_components.code, {
        children: "() => number | undefined"
      }), " と等価です。"]
    }), "\n", jsxs(_components.p, {
      children: ["この例では ", jsx(_components.code, {
        children: "createSignal"
      }), " にデフォルト値を与えていないので ", jsx(_components.code, {
        children: "| undefined"
      }), " が追加されており、Signal の値は実際には ", jsx(_components.code, {
        children: "undefined"
      }), " で始まります。"]
    }), "\n", jsxs(_components.p, {
      children: ["Signal のセッター ", jsx(_components.code, {
        children: "setCount"
      }), " は ", jsx(_components.code, {
        children: "Setter<number>"
      }), " という型を持っています。これはより複雑な型定義で、おおよそ ", jsx(_components.code, {
        children: "(value?: number | ((prev?: number) => number)) => number"
      }), " に相当し、\n渡された引数の 2 つの可能性を表しています： ", jsx(_components.code, {
        children: "setCount"
      }), " には ", jsx(_components.code, {
        children: "number"
      }), " か、前の値（もしあった場合）を受け取り ", jsx(_components.code, {
        children: "number"
      }), " を返す関数のどちらかが渡すことができます。"]
    }), "\n", jsxs(_components.p, {
      children: ["実際の ", jsx(_components.code, {
        children: "Setter"
      }), " の型はより複雑で、新しい値を決定するために関数を呼び出すのではなく、Signal をその関数の値に設定したい場合に、誤ってセッターに関数を渡してしまうことを検出するためのものです。"]
    }), "\n", jsxs(_components.p, {
      children: ["もし ", jsx(_components.code, {
        children: "setCount(value)"
      }), " を呼び出したときに TypeScript エラー \"Argument ... is not assignable to parameter\" が発生したら、", jsx(_components.code, {
        children: "setCount(() => value)"
      }), " のようにセッター引数をラップして、", jsx(_components.code, {
        children: "value"
      }), " が呼ばれないようにしてみてください。"]
    }), "\n", jsxs(_components.h5, {
      id: "デフォルト",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#デフォルト",
        children: "#"
      }), "デフォルト"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "createSignal"
      }), " を呼び出す際に、明示的に Signal の型を指定する必要はありません。また、", jsx(_components.code, {
        children: "createSignal"
      }), " にデフォルト値を指定することで、型の ", jsx(_components.code, {
        children: "| undefined"
      }), " 部分を避けることができます:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [name, setName] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "''"
        }), ");\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["この場合、TypeScript は Signal の型がそれぞれ ", jsx(_components.code, {
        children: "number"
      }), " と ", jsx(_components.code, {
        children: "string"
      }), " であると推測します。 したがって、例えば ", jsx(_components.code, {
        children: "count"
      }), " は ", jsx(_components.code, {
        children: "Accessor<number>"
      }), " 型、", jsx(_components.code, {
        children: "name"
      }), " は ", jsx(_components.code, {
        children: "Accessor<string>"
      }), " 型になります（", jsx(_components.code, {
        children: "| undefined"
      }), " は除かれる）。"]
    }), "\n", jsxs(_components.h3, {
      id: "context",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#context",
        children: "#"
      }), "Context"]
    }), "\n", jsxs(_components.p, {
      children: ["Signal と同様に、", jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#createcontext",
        children: jsx(_components.code, {
          children: "createContext<T>"
        })
      }), " は、コンテキストの値の型 ", jsx(_components.code, {
        children: "T"
      }), " をパラメータとしています。"]
    }), "\n", jsx(_components.p, {
      children: "この型は明示的に指定できます:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Data"
        }), " = {", jsx(_components.span, {
          className: "hljs-attr",
          children: "count"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ", ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), "};\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " dataContext = createContext<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Data"
        }), ">();\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["この場合、", jsx(_components.code, {
        children: "dataContext"
      }), " は ", jsx(_components.code, {
        children: "Context<Data | undefined>"
      }), " という型を持っているので、", jsx(_components.code, {
        children: "useContext(dataContext)"
      }), " は ", jsx(_components.code, {
        children: "Data | undefined"
      }), " という型にマッチする戻り値を持つことになります。"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "| undefined"
      }), " の理由は、現在のコンポーネントの祖先でコンテキストが提供されていない可能性があり、その場合 ", jsx(_components.code, {
        children: "useContext"
      }), " は ", jsx(_components.code, {
        children: "undefined"
      }), " を返すからです。"]
    }), "\n", jsxs(_components.p, {
      children: ["代わりに ", jsx(_components.code, {
        children: "createContext"
      }), " にデフォルト値を与えれば、型の ", jsx(_components.code, {
        children: "| undefined"
      }), " の部分を避けることができ、多くの場合 ", jsx(_components.code, {
        children: "createContext"
      }), " の型も明示的に指定する必要はなくなります:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " dataContext = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createContext"
        }), "({", jsx(_components.span, {
          className: "hljs-attr",
          children: "count"
        }), ": ", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ", ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "''"
        }), "});\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["この場合、TypeScript は ", jsx(_components.code, {
        children: "dataContext"
      }), " が ", jsx(_components.code, {
        children: "Context<{count: number, name: string}>"
      }), " という型を持つと推論し、これは ", jsx(_components.code, {
        children: "Context<Data>"
      }), "（", jsx(_components.code, {
        children: "| undefined"
      }), " なし）と等価です。"]
    }), "\n", jsxs(_components.p, {
      children: ["もう 1 つのよくあるパターンは、コンテキストの値を生成するファクトリー関数を定義することです。 そして TypeScript の ", jsx(_components.a, {
        href: "https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetype",
        children: jsx(_components.code, {
          children: "ReturnType"
        })
      }), " 型ヘルパーを使って、その関数の戻り値の型を取得し、それをコンテキストの型として使用できます:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "makeCountNameContext"
        }), " = (", jsxs(_components.span, {
          className: "hljs-params",
          children: ["initialCount = ", jsx(_components.span, {
            className: "hljs-number",
            children: "0"
          }), ", initialName = ", jsx(_components.span, {
            className: "hljs-string",
            children: "''"
          })]
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(initialCount);\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [name, setName] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(initialName);\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " [{count, name}, {setCount, setName}] ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "as"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), ";\n    ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// `as const` はタプルの型推論を矯正します"
        }), "\n};\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CountNameContextType"
        }), " = ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ReturnType"
        }), "<", jsx(_components.span, {
          className: "hljs-keyword",
          children: "typeof"
        }), " makeCountNameContext>;\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CountNameContext"
        }), " = createContext<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CountNameContextType"
        }), ">();\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useCountNameContext"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useContext"
        }), "(", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CountNameContext"
        }), ");\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["この例では、", jsx(_components.code, {
        children: "CountNameContextType"
      }), " が ", jsx(_components.code, {
        children: "makeCountNameContext"
      }), " の戻り値に相当します:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: ["[\n  {", jsx(_components.span, {
          className: "hljs-keyword",
          children: "readonly"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "count"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Accessor"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ">, ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "readonly"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Accessor"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ">},\n  {", jsx(_components.span, {
          className: "hljs-keyword",
          children: "readonly"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "setCount"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Setter"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ">, ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "readonly"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "setName"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Setter"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ">}\n]\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["また、", jsx(_components.code, {
        children: "useCountNameContext"
      }), " は ", jsx(_components.code, {
        children: "() => CountNameContextType | undefined"
      }), " という型を持っています。"]
    }), "\n", jsxs(_components.p, {
      children: ["もし、", jsx(_components.code, {
        children: "undefined"
      }), " の可能性を回避したいのであれば、コンテキストが使用されるときには常に提供されることを表明すればよいでしょう:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useCountNameContext"
        }), " = (", jsx(_components.span, {
          className: "hljs-params"
        }), ") => ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "useContext"
        }), "(", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CountNameContext"
        }), ")!;\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["これは危険な仮定です。実際に ", jsx(_components.code, {
        children: "createContext"
      }), " にデフォルトの引数を与えて、コンテキストが常に定義されているようにする方が安全でしょう。"]
    }), "\n", jsxs(_components.h2, {
      id: "コンポーネントの型",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#コンポーネントの型",
        children: "#"
      }), "コンポーネントの型"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " { ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "<P = {}> = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "props: P"
          }), ") =>"]
        }), " ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "Element"
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["基本的なコンポーネント関数に型を付けるには、", jsx(_components.code, {
        children: "Component<P>"
      }), " 型を使用します。ここで ", jsx(_components.code, {
        children: "P"
      }), " は ", jsx(_components.code, {
        children: "props"
      }), " 引数の型で、", jsx(_components.a, {
        href: "https://www.typescriptlang.org/docs/handbook/2/objects.html",
        children: "object 型"
      }), " である必要があります。"]
    }), "\n", jsxs(_components.p, {
      children: ["これにより、正しく型付けされた props が属性として渡され、戻り値は Solid でレンダリングできるものになります。", jsx(_components.code, {
        children: "JSX.Element"
      }), " は DOM ノード、", jsx(_components.code, {
        children: "JSX.Element"
      }), " の配列、", jsx(_components.code, {
        children: "JSX.Element"
      }), " を返す関数、ブール値、", jsx(_components.code, {
        children: "Undefined"
      }), "/", jsx(_components.code, {
        children: "null"
      }), " などにできます。"]
    }), "\n", jsx(_components.p, {
      children: "以下はその例です:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Counter"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), " = ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{()"
            }), " =>"]
          }), " setCount((c) => c+1)}>\n      {count()}\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          })]
        }), "\n  );\n};\n\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), "/>"]
          })
        }), ";              ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// good"
        }), "\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "initial"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{5}/"
            }), ">"]
          })
        }), ";  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 型エラー: initial の prop はない"
        }), "\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), ">"]
          }), "hi", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Counter"
            }), ">"]
          })]
        }), "    ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 型エラー: children の prop はない"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "InitCounter"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "<{", jsx(_components.span, {
          className: "hljs-attr",
          children: "initial"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), "}> = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "props"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(props.", jsx(_components.span, {
          className: "hljs-property",
          children: "initial"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{()"
            }), " =>"]
          }), " setCount((c) => c+1)}>\n      {count()}\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          })]
        }), "\n  );\n};\n\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "InitCounter"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "initial"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{5}/"
            }), ">"]
          })
        }), ";  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// good"
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["もし、コンポーネントに JSX の子要素を持たせたい場合は、明示的に ", jsx(_components.code, {
        children: "P"
      }), " に ", jsx(_components.code, {
        children: "children"
      }), " という型を追加するか、自動的に ", jsx(_components.code, {
        children: "children?: JSX.Element"
      }), " を追加する ", jsx(_components.code, {
        children: "ParentComponent"
      }), " 型を使用することもできます。また、", jsx(_components.code, {
        children: "const"
      }), " ではなく ", jsx(_components.code, {
        children: "function"
      }), " でコンポーネントを宣言したい場合は、", jsx(_components.code, {
        children: "props"
      }), " 型のヘルパーである ", jsx(_components.code, {
        children: "ParentProps"
      }), " を使用することもできます。 いくつかの例を挙げると:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " { ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentComponent"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentProps"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentProps"
        }), "<P = {}> = P & { children?: ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "Element"
        }), " };\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentComponent"
        }), "<P = {}> = ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentProps"
        }), "<P>>;\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 等価な型:"
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "//const CustomCounter: Component<{children?: JSX.Element}> = ..."
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "//function CustomCounter(props: ParentProps): JSX.Element { ..."
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CustomCounter"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentComponent"
        }), " = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "props"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "0"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{()"
            }), " =>"]
          }), " setCount((c) => c+1)}>\n      {count()}\n      {props.children}\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          })]
        }), "\n  );\n};\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 等価な型:"
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "//const CustomInitCounter: Component<{initial: number, children?: JSX.Element}> = ..."
        }), "\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "//function CustomInitCounter(props: ParentProps<{initial: number}>): JSX.Element { ..."
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CustomInitCounter"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ParentComponent"
        }), "<{", jsx(_components.span, {
          className: "hljs-attr",
          children: "initial"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), "}> = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "props"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [count, setCount] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(props.", jsx(_components.span, {
          className: "hljs-property",
          children: "initial"
        }), ");\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n    ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onClick"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{()"
            }), " =>"]
          }), " setCount((c) => c+1)}>\n      {count()}\n      {props.children}\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "button"
            }), ">"]
          })]
        }), "\n  );\n};\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["後者の例では、", jsx(_components.code, {
        children: "props"
      }), " パラメータは自動的に ", jsx(_components.code, {
        children: "props: ParentProps<{initial: number}>"
      }), " の型になります。これは ", jsx(_components.code, {
        children: "props: {initial: number, children?: JSX.Element}"
      }), " と同じです。"]
    }), "\n", jsxs(_components.p, {
      children: ["（Solid 1.4 以前では ", jsx(_components.code, {
        children: "Component"
      }), " は ", jsx(_components.code, {
        children: "ParentComponent"
      }), " と同等でした）"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid は ", jsx(_components.code, {
        children: "children"
      }), " を処理するために、他に 2 つの ", jsx(_components.code, {
        children: "Component"
      }), " サブタイプを提供します:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-ts",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " {", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowComponent"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowProps"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "VoidComponent"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "VoidProps"
        }), "} ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowProps"
        }), "<P = {}, C = ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "Element"
        }), "> = P & { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "children"
        }), ": C };\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowComponent"
        }), "<P = {}, C = ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "Element"
        }), "> = ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowProps"
        }), "<P, C>>;\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "VoidProps"
        }), "<P = {}> = P & { children?: ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "never"
        }), " };\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "VoidComponent"
        }), "<P = {}> = ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Component"
        }), "<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "VoidProps"
        }), "<P>>;\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "VoidComponent"
      }), " は ", jsx(_components.code, {
        children: "children"
      }), " をサポートしないコンポーネントのためのものです。\n", jsx(_components.code, {
        children: "VoidComponent<P>"
      }), " は、", jsx(_components.code, {
        children: "P"
      }), " が ", jsx(_components.code, {
        children: "children"
      }), " の型を提供しない場合に、", jsx(_components.code, {
        children: "Component<P>"
      }), " と同等になります。"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "FlowComponent"
      }), " は Solid の ", jsx(_components.code, {
        children: "<Show>"
      }), " や ", jsx(_components.code, {
        children: "<For>"
      }), " のような「制御フロー」コンポーネントを対象としています。 このようなコンポーネントは一般的に ", jsx(_components.code, {
        children: "children"
      }), " を必要とし、時には ", jsx(_components.code, {
        children: "children"
      }), " に特定の型（単一の関数であること）を要求することがあります。 例えば:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CallMeMaybe"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "FlowComponent"
        }), "<{", jsx(_components.span, {
          className: "hljs-attr",
          children: "when"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "boolean"
        }), "}, ", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "void"
        }), "> = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "props"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (props.", jsx(_components.span, {
          className: "hljs-property",
          children: "when"
        }), ")\n      props.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "children"
        }), "();\n  });\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsx(_components.span, {
            className: "hljs-tag",
            children: "<>"
          }), "{props.when ? 'Calling' : 'Not Calling'}", jsx(_components.span, {
            className: "hljs-tag",
            children: "</>"
          })]
        }), ";\n};\n\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "CallMeMaybe"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "when"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{true}/"
            }), ">"]
          })
        }), ";  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 型エラー: children が不足"
        }), "\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "CallMeMaybe"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "when"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{true}"
            }), ">"]
          }), "hi", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "CallMeMaybe"
            }), ">"]
          })]
        }), ";  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 型エラー: children （訳注: の型が違う）"
        }), "\n", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "CallMeMaybe"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "when"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{true}"
            }), ">"]
          }), "\n  {() => console.log(\"Here's my number\")}\n", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "CallMeMaybe"
            }), ">"]
          })]
        }), ";              ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// good"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "イベントハンドラー",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#イベントハンドラー",
        children: "#"
      }), "イベントハンドラー"]
    }), "\n", jsxs(_components.p, {
      children: ["名前空間 ", jsx(_components.code, {
        children: "JSX"
      }), " は、特に HTML DOM を操作するための便利な型を提供します。提供されているすべての型は ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/blob/main/packages/dom-expressions/src/jsx.d.ts",
        children: "dom-expressions における JSX の定義"
      }), "を参照してください。"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "JSX"
      }), " 名前空間が提供する便利なヘルパー型のひとつは ", jsx(_components.code, {
        children: "JSX.EventHandler<T, E>"
      }), " で、これは DOM 要素の型 ", jsx(_components.code, {
        children: "T"
      }), " とイベントの型 ", jsx(_components.code, {
        children: "E"
      }), " に対する単一引数のイベントハンドラーを表しています。"]
    }), "\n", jsx(_components.p, {
      children: "これを利用して、JSX の外部で定義する任意のイベントハンドラーに型を付けることができます。\n例えば:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "import"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "type"
        }), " { ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), " } ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "from"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "'solid-js'"
        }), ";\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "onInput"
        }), ": ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "JSX"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "EventHandler"
        }), "<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "HTMLInputElement"
        }), ", ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "InputEvent"
        }), "> = ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "event"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'input changed to'"
        }), ", event.", jsx(_components.span, {
          className: "hljs-property",
          children: "currentTarget"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), ");\n};\n\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "input"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "onInput"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{onInput}/"
            }), ">"]
          })
        }), "\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsxs(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#on___",
        children: [jsx(_components.code, {
          children: "on___"
        }), " JSX 属性"]
      }), "の中でインラインで定義された（ビルトインイベントタイプを持つ）ハンドラーは、自動的に適切な ", jsx(_components.code, {
        children: "JSX.EventHandler"
      }), " として型付けされます:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: ["<input onInput={", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "event"
          }), ") =>"]
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'input changed to'"
        }), ", event.", jsx(_components.span, {
          className: "hljs-property",
          children: "currentTarget"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), ");\n}}/>;\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "JSX.EventHandler<T>"
      }), " は、イベントの ", jsxs(_components.a, {
        href: "https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget",
        children: [jsx(_components.code, {
          children: "currentTarget"
        }), " 属性"]
      }), "が ", jsx(_components.code, {
        children: "T"
      }), " 型であることに注意してください（この例では、", jsx(_components.code, {
        children: "event.currentTarget"
      }), " は ", jsx(_components.code, {
        children: "HTMLInputEvent"
      }), " という型なので、", jsx(_components.code, {
        children: "value"
      }), " 属性を持っています）。しかし、イベントの ", jsxs(_components.a, {
        href: "https://developer.mozilla.org/ja/docs/Web/API/Event/target",
        children: [jsx(_components.code, {
          children: "target"
        }), " 属性"]
      }), " は任意の ", jsx(_components.code, {
        children: "DOMElement"
      }), "である可能性があります。"]
    }), "\n", jsxs(_components.p, {
      children: ["これは、", jsx(_components.code, {
        children: "currentTarget"
      }), " がイベントハンドラーにアタッチされた要素であり、既知の型を持っているのに対し、", jsx(_components.code, {
        children: "target"
      }), " はイベントがイベントハンドラーにバブルしたりキャプチャされる原因となったユーザーとのインタラクションであり、任意の DOM 要素になり得るからです。"]
    }), "\n", jsxs(_components.h2, {
      id: "ref-属性",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#ref-属性",
        children: "#"
      }), "ref 属性"]
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "ref"
      }), " 属性に変数を使用すると、要素がレンダリングされた際、その変数に DOM 要素を代入するように Solid に指示することになります。TypeScript を使用しない場合、これは次のようになります:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " divRef;\n\n", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(divRef); ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// undefined"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(divRef); ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// <div> element"
        }), "\n})\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n  ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ref"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{divRef}/"
            }), ">"]
          })
        }), "\n)\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["これは、その変数に型を付ける際の課題です。", jsx(_components.code, {
        children: "divRef"
      }), " はレンダリング後にのみ ", jsx(_components.code, {
        children: "HTMLDivElement"
      }), " にセットされますが、", jsx(_components.code, {
        children: "HTMLDivElement"
      }), " という型をつけるべきでしょうか？\n（ここでは TypeScript の ", jsx(_components.code, {
        children: "strictNullChecks"
      }), " モードがオンになっているものとすします。そうでない場合、TypeScript は潜在的な ", jsx(_components.code, {
        children: "undefined"
      }), " の変数を無視します）"]
    }), "\n", jsxs(_components.p, {
      children: ["TypeScript の最も安全なパターンは、", jsx(_components.code, {
        children: "divRef"
      }), " が一定期間 ", jsx(_components.code, {
        children: "undefined"
      }), " であることを認識し、使用時に確認することです:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "divRef"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "HTMLDivElement"
        }), " | ", jsx(_components.span, {
          className: "hljs-literal",
          children: "undefined"
        }), ";\n\ndivRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// コンパイル時に正しくエラーとして報告される"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "if"
        }), " (!divRef) ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), ";\n  divRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 正しく許可される"
        }), "\n});\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ref"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{divRef!}"
            }), ">"]
          }), "\n    ...\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["あるいは、", jsx(_components.code, {
        children: "onMount"
      }), " が呼ばれるのは ", jsx(_components.code, {
        children: "<div>"
      }), " 要素がレンダリングされた後だとわかっているので、", jsx(_components.code, {
        children: "onMount"
      }), " 内で ", jsx(_components.code, {
        children: "divRef"
      }), " にアクセスする際に ", jsxs(_components.a, {
        href: "https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-",
        children: ["non-null assertion (", jsx(_components.code, {
          children: "!"
        }), ")"]
      }), " を使用することもできます:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  divRef!.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();\n});\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["もうひとつの安全なパターンは、", jsx(_components.code, {
        children: "divRef"
      }), " の型から ", jsx(_components.code, {
        children: "undefined"
      }), " を省略し、", jsx(_components.code, {
        children: "ref"
      }), " 属性の中で ", jsxs(_components.a, {
        href: "https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#definite-assignment-assertions",
        children: ["definite assignment assertion (", jsx(_components.code, {
          children: "!"
        }), ")"]
      }), " を使用することです:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "divRef"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "HTMLDivElement"
        }), ";\n\ndivRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// コンパイル時のエラーとして正しく報告される"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  divRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 正しく許可される"
        }), "\n});\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ref"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{divRef!}"
            }), ">"]
          }), "\n    ...\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["TypeScript は ", jsx(_components.code, {
        children: "ref"
      }), " 属性が ", jsx(_components.code, {
        children: "divRef"
      }), " 変数に設定されていると想定しているため、", jsx(_components.code, {
        children: "ref={divRef!}"
      }), " を使用する必要があります。したがって、", jsx(_components.code, {
        children: "divRef"
      }), " はすでに割り当てられているはずです。Solid ではその逆で、", jsx(_components.code, {
        children: "divRef"
      }), " は ", jsx(_components.code, {
        children: "ref"
      }), " 属性によって割り当てられます。definite assignment assertion の ", jsx(_components.code, {
        children: "divRef!"
      }), " によって、このことを TypeScript に効果的に納得させます。TypeScript は、この行の後に ", jsx(_components.code, {
        children: "divRef"
      }), "  が割り当てられていることを理解します。"]
    }), "\n", jsxs(_components.p, {
      children: ["このパターンでは、TypeScript は関数本体の中（JSX ブロックが定義される前）で ref が誤って使用された場合、正しくフラグを立てられます。しかし、TypeScript は現在、ネストされた関数内で未定義の可能性がある変数が使用されてもフラグを立てないようになっています。Solid の文脈では、", jsx(_components.code, {
        children: "createMemo"
      }), "、", jsx(_components.code, {
        children: "createRenderEffect"
      }), "、", jsx(_components.code, {
        children: "createComputed"
      }), " の内部（ref を定義する JSX ブロックの前）では ref を使用しないように注意する必要があります。なぜなら、これらの関数はすぐに呼び出されるため、ref はまだ定義されていないからです（ただし、TypeScript はこれをエラーと判断しません）。"]
    }), "\n", jsx(_components.p, {
      children: "これに対して、先ほどのパターンでは、これらのエラーをキャッチできます。"
    }), "\n", jsx(_components.p, {
      children: "もう 1 つの一般的ですが、安全性が低いパターンは、変数宣言の時点で定型代入のアサーションを入れるという方法もあります。"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " divRef!: ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "HTMLDivElement"
        }), ";\n\ndivRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// エラーが発生するにもかかわらず許可されてしまう"
        }), "\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "onMount"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  divRef.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "focus"
        }), "();  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// 正しく許可される"
        }), "\n});\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ref"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{divRef}"
            }), ">"]
          }), "\n    ...\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "この方法は、その変数の代入チェックを効果的にオフにするものです。これは簡単な回避策ですが、さらに注意が必要です。"
    }), "\n", jsx(_components.p, {
      children: "特に前のパターンとは異なり、ネストされた関数の外側でその変数を早く使っても、誤って許可されてしまいます。"
    }), "\n", jsxs(_components.h2, {
      id: "制御フローの絞り込み",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#制御フローの絞り込み",
        children: "#"
      }), "制御フローの絞り込み"]
    }), "\n", jsxs(_components.p, {
      children: ["よくあるパターンは、", jsx(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#%3Cshow%3E",
        children: jsx(_components.code, {
          children: "<Show>"
        })
      }), " を使って、データが定義されているときだけデータを表示することです:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [name, setName] = createSignal<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ">();\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " (\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "Show"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "when"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{name()}"
            }), ">"]
          }), "\n    Hello {name().replace(/\\s+/g, '\\xa0')}!\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "Show"
            }), ">"]
          })]
        }), "\n);\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["この場合、TypeScript は ", jsx(_components.code, {
        children: "name()"
      }), " の 2 回の呼び出しが同じ値を返すこと、最初の呼び出しが truthy な値を返した場合にのみ 2 回目の呼び出しが行われることを判断できません。そのため、", jsx(_components.code, {
        children: ".replace()"
      }), "を呼び出そうとすると、", jsx(_components.code, {
        children: "name()"
      }), " が ", jsx(_components.code, {
        children: "undefined"
      }), " になる可能性があると文句を言うことになります。"]
    }), "\n", jsx(_components.p, {
      children: "この問題に対する回避策を 2 つ紹介します:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["TypeScript の ", jsxs(_components.a, {
            href: "https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#non-null-assertion-operator-postfix-",
            children: ["non-null assertion operator ", jsx(_components.code, {
              children: "!"
            })]
          }), " を使って、2 回目の呼び出しで ", jsx(_components.code, {
            children: "name()"
          }), " が非 NULL になることを手動でアサーションできます:"]
        }), "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-tsx",
            children: [jsx(_components.span, {
              className: "hljs-keyword",
              children: "return"
            }), " (\n  ", jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "Show"
                }), " ", jsx(_components.span, {
                  className: "hljs-attr",
                  children: "when"
                }), "=", jsx(_components.span, {
                  className: "hljs-string",
                  children: "{name()}"
                }), ">"]
              }), "\n    Hello {name()!.replace(/\\s+/g, '\\xa0')}!\n  ", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "Show"
                }), ">"]
              })]
            }), "\n);\n"]
          })
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["コールバック形式の ", jsx(_components.code, {
            children: "<Show>"
          }), " を使用すると、", jsx(_components.code, {
            children: "when"
          }), " プロパティの値が truthy である場合にその値を渡すことができます:"]
        }), "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-tsx",
            children: [jsx(_components.span, {
              className: "hljs-keyword",
              children: "return"
            }), " (\n  ", jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "Show"
                }), " ", jsx(_components.span, {
                  className: "hljs-attr",
                  children: "when"
                }), "=", jsx(_components.span, {
                  className: "hljs-string",
                  children: "{name()}"
                }), ">"]
              }), "\n    {(n) =>\n      ", jsx(_components.span, {
                className: "hljs-tag",
                children: "<>"
              }), "Hello {n.replace(/\\s+/g, '\\xa0')}!", jsx(_components.span, {
                className: "hljs-tag",
                children: "</>"
              })]
            }), "\n    }\n  </", jsx(_components.span, {
              className: "hljs-title class_",
              children: "Show"
            }), ">\n);\n"]
          })
        }), "\n", jsxs(_components.p, {
          children: ["この場合、", jsx(_components.code, {
            children: "Show"
          }), " コンポーネントの型は賢いので、TypeScript に対して ", jsx(_components.code, {
            children: "n"
          }), " は truthy なので、", jsx(_components.code, {
            children: "undefined"
          }), "（または ", jsx(_components.code, {
            children: "null"
          }), " や ", jsx(_components.code, {
            children: "false"
          }), "）にはならないと伝えることができます。"]
        }), "\n", jsxs(_components.p, {
          children: ["ただし、この形式の ", jsx(_components.code, {
            children: "<Show>"
          }), " は、", jsx(_components.code, {
            children: "name()"
          }), " が falsy な値から truthy な値に変わったときだけ行うのではなく、", jsx(_components.code, {
            children: "name()"
          }), " が変わるたびに子要素全体を一からレンダリングするように強制することに注意してください。"]
        }), "\n", jsx(_components.p, {
          children: "これは、子要素がきめ細かなリアクティビティ（変更されていない部分を再利用し、変更された部分のみを更新する）の利点を完全に享受できないことを意味します。"
        }), "\n"]
      }), "\n"]
    }), "\n", jsxs(_components.h2, {
      id: "特殊な-jsx-属性とディレクティブ",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#特殊な-jsx-属性とディレクティブ",
        children: "#"
      }), "特殊な JSX 属性とディレクティブ"]
    }), "\n", jsxs(_components.h3, {
      id: "on___oncapture___",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#on___oncapture___",
        children: "#"
      }), jsx(_components.code, {
        children: "on:___"
      }), "/", jsx(_components.code, {
        children: "oncapture:___"
      })]
    }), "\n", jsxs(_components.p, {
      children: ["Solid の ", jsxs(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#on%3A___%2Foncapture%3A___",
        children: [jsx(_components.code, {
          children: "on:___"
        }), "/", jsx(_components.code, {
          children: "oncapture:___"
        }), " 属性"]
      }), "を使用してカスタムイベントハンドラーを使用する場合は、モジュール ", jsx(_components.code, {
        children: "\"solid-js\""
      }), " の ", jsx(_components.code, {
        children: "JSX"
      }), " 名前空間で ", jsx(_components.code, {
        children: "CustomEvents"
      }), " と ", jsx(_components.code, {
        children: "CustomCaptureEvents"
      }), " インターフェイスをオーバーライドし、対応する ", jsx(_components.code, {
        children: "Event"
      }), " オブジェクトの型を定義する必要があります:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "class"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NameEvent"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "extends"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_ inherited__",
          children: "CustomEvent"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "type"
        }), ": ", jsx(_components.span, {
          className: "hljs-string",
          children: "'Name'"
        }), ";\n  ", jsx(_components.span, {
          className: "hljs-attr",
          children: "detail"
        }), ": {", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), "};\n\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "constructor"
        }), "(", jsxs(_components.span, {
          className: "hljs-params",
          children: ["name: ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "string"
          })]
        }), ") {\n    ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "super"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'Name'"
        }), ", {", jsx(_components.span, {
          className: "hljs-attr",
          children: "detail"
        }), ": {name}});\n  }\n}\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "declare"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "module"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "namespace"
        }), " JSX {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "interface"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CustomEvents"
        }), " { ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// on:Name"
        }), "\n      ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Name\""
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NameEvent"
        }), ";\n    }\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "interface"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "CustomCaptureEvents"
        }), " { ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// oncapture:Name"
        }), "\n      ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Name\""
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "NameEvent"
        }), ";\n    }\n  }\n}\n\n<div ", jsx(_components.span, {
          className: "hljs-attr",
          children: "on"
        }), ":", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Name"
        }), "={", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "event"
          }), ") =>"]
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'name is'"
        }), ", event.", jsx(_components.span, {
          className: "hljs-property",
          children: "detail"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "name"
        }), ")}/>\n"]
      })
    }), "\n", jsxs(_components.h3, {
      id: "prop___attr___",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#prop___attr___",
        children: "#"
      }), jsx(_components.code, {
        children: "prop:___"
      }), "/", jsx(_components.code, {
        children: "attr:___"
      })]
    }), "\n", jsxs(_components.p, {
      children: ["Solid の ", jsxs(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#prop%3A___",
        children: [jsx(_components.code, {
          children: "prop:___"
        }), " 属性"]
      }), "で強制プロパティを使用する場合や、Solid の ", jsxs(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#attr%3A___",
        children: [jsx(_components.code, {
          children: "attr:___"
        }), " 属性"]
      }), "でカスタム属性を使用する場合、それぞれ ", jsx(_components.code, {
        children: "ExplicitProperties"
      }), " と ", jsx(_components.code, {
        children: "ExplicitAttributes"
      }), " インターフェイスで型を定義できます:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "declare"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "module"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "namespace"
        }), " JSX {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "interface"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ExplicitProperties"
        }), " { ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// prop:___"
        }), "\n      ", jsx(_components.span, {
          className: "hljs-attr",
          children: "count"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ";\n      ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ";\n    }\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "interface"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "ExplicitAttributes"
        }), " { ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// attr:___"
        }), "\n      ", jsx(_components.span, {
          className: "hljs-attr",
          children: "count"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "number"
        }), ";\n      ", jsx(_components.span, {
          className: "hljs-attr",
          children: "name"
        }), ": ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ";\n    }\n  }\n}\n\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Input"
        }), " ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop"
        }), ":name={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "name"
        }), "()} ", jsx(_components.span, {
          className: "hljs-attr",
          children: "prop"
        }), ":count={", jsx(_components.span, {
          className: "hljs-title function_",
          children: "count"
        }), "()}/>\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "my-web-component"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "attr:name"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{name()}"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "attr:count"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{count()}/"
            }), ">"]
          })
        }), "\n"]
      })
    }), "\n", jsxs(_components.h3, {
      id: "use___",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#use___",
        children: "#"
      }), jsx(_components.code, {
        children: "use:___"
      })]
    }), "\n", jsxs(_components.p, {
      children: ["Solid の ", jsxs(_components.a, {
        href: "https://www.solidjs.com/docs/latest/api#use%3A___",
        children: [jsx(_components.code, {
          children: "use:___"
        }), " 属性"]
      }), "にカスタムディレクティブを定義する場合、", jsx(_components.code, {
        children: "Directives"
      }), " インターフェイスに以下のように型を付けます:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-tsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "model"
        }), "(", jsxs(_components.span, {
          className: "hljs-params",
          children: ["element: HTMLInputElement, value: Accessor<Signal<", jsx(_components.span, {
            className: "hljs-built_in",
            children: "string"
          }), ">>"]
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [field, setField] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "value"
        }), "();\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createRenderEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " (element.", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), " = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "field"
        }), "()));\n  element.", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addEventListener"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"input\""
        }), ", ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "e"
          }), ") =>"]
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setField"
        }), "(e.", jsx(_components.span, {
          className: "hljs-property",
          children: "target"
        }), ".", jsx(_components.span, {
          className: "hljs-property",
          children: "value"
        }), "));\n}\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "declare"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "module"
        }), " ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"solid-js\""
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "namespace"
        }), " JSX {\n    ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "interface"
        }), " ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Directives"
        }), " {  ", jsx(_components.span, {
          className: "hljs-comment",
          children: "// use:model"
        }), "\n      ", jsx(_components.span, {
          className: "hljs-attr",
          children: "model"
        }), ": ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Signal"
        }), "<", jsx(_components.span, {
          className: "hljs-built_in",
          children: "string"
        }), ">;\n    }\n  }\n}\n\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "let"
        }), " [name, setName] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "''"
        }), ");\n\n", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "input"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "type"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "\"text\""
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "use:model"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "{[name,"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "setName"
            }), "]} />"]
          })
        }), ";\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["ディレクティブ ", jsx(_components.code, {
        children: "d"
      }), " を他のモジュールから ", jsx(_components.code, {
        children: "import"
      }), " していて、", jsx(_components.code, {
        children: "d"
      }), " がディレクティブ ", jsx(_components.code, {
        children: "use:d"
      }), " としてのみ使用されている場合、TypeScript（より正確には ", jsx(_components.a, {
        href: "https://babeljs.io/docs/en/babel-preset-typescript",
        children: jsx(_components.code, {
          children: "babel-preset-typescript"
        })
      }), "）はデフォルトで ", jsx(_components.code, {
        children: "d"
      }), " の ", jsx(_components.code, {
        children: "import"
      }), " を削除します（TypeScript は ", jsx(_components.code, {
        children: "use:d"
      }), " が ", jsx(_components.code, {
        children: "d"
      }), " への参照として理解しないため、", jsx(_components.code, {
        children: "d"
      }), " が型だと思ってしまう）。"]
    }), "\n", jsx(_components.p, {
      children: "この問題を回避する方法は 2 つあります:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["[babel-preset-typescript", jsx(_components.code, {
            children: "の"
          }), "onlyRemoveTypeImports: true", jsx(_components.code, {
            children: "](https://babeljs.io/docs/en/babel-preset-typescript#onlyremovetypeimports) 設定オプションを使用して、"
          }), "import type ...", jsx(_components.code, {
            children: "以外の"
          }), "import", jsx(_components.code, {
            children: " は削除しないようにできます。もし、"
          }), "vite-plugin-solid", jsx(_components.code, {
            children: " を使用しているのであれば、"
          }), "vite.config.ts", jsx(_components.code, {
            children: "の"
          }), "solidPlugin({ typescript: { onlyRemoveTypeImports: true } })` でこのオプションを指定できます。"]
        }), "\n", jsxs(_components.p, {
          children: ["このオプションは、コードベース全体で ", jsx(_components.code, {
            children: "export type"
          }), " と ", jsx(_components.code, {
            children: "import type"
          }), " を注意深く使用しないと、問題が発生する可能性があることに注意してください。"]
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["ディレクティブ ", jsx(_components.code, {
            children: "d"
          }), " を持つすべてのモジュールに、", jsx(_components.code, {
            children: "false && d;"
          }), " のような偽のアクセスを追加する。"]
        }), "\n", jsxs(_components.p, {
          children: ["これにより、TypeScript は ", jsx(_components.code, {
            children: "d"
          }), " の ", jsx(_components.code, {
            children: "import"
          }), " を削除しなくなります。また、", jsx(_components.a, {
            href: "https://terser.org/",
            children: "Terser"
          }), " などでツリーシェイクしている場合、このコードは最終的にコードバンドルから省かれることになるでしょう。"]
        }), "\n", jsxs(_components.p, {
          children: ["よりシンプルな ", jsx(_components.code, {
            children: "d;"
          }), " という偽のアクセスも ", jsx(_components.code, {
            children: "import"
          }), " が削除されるのを防ぎますが、通常はツリーシェイクされないので、最終的なコードバンドルに含まれることになります。"]
        }), "\n"]
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=typescript-be0cb7ce.js.map
