73262


以下の記事を参考に仮装DOMについて勉強しているのですが、仮想DOMからリアルDOMに反映する箇所のコードの構文がよく分からないです。

`(node: NodeType)`は辞書型アクセスをしているのでしょうか？  
ifは省略されているのでしょうか？  
`@param`も何を示しているのか分からないです。  
`export`とある箇所は後から使用するための関数になるのでしょうか？

[仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう](https://eh-
career.com/engineerhub/entry/2020/02/18/103000)

[code]

    /**
     * Nodeを受け取り、VNodeなのかTextなのかを判定する
     */
    const isVNode = (node: NodeType): node is VNode => {
      return typeof node !== 'string' && typeof node !== 'number'
    }
    
    /**
     * リアルDOMを作成する
     * @param node 作成するNode
     */
    export function createElement(node: NodeType): HTMLElement | Text {
      if (!isVNode(node)) {
        return document.createTextNode(node.toString())
      }
    
      const el = document.createElement(node.nodeName)
      setAttributes(el, node.attributes)
      node.children.forEach(child => el.appendChild(createElement(child)))
    
      return el
    }
    
    /**
     * 属性を設定する
     * @param target 操作対象のElement
     * @param attributes Elementに追加したい属性のリスト
     */
    const setAttributes = (target: HTMLElement, attributes: Attributes): void => {
      for (const attr in attributes) {
        if (isEventAttr(attr)) {
          // onclickなどはイベントリスナーに登録する
          // onclickやoninput、onchangeなどのonを除いたイベント名を取得する
          const eventName = attr.slice(2)
          target.addEventListener(eventName, attributes[attr] as EventListener)
        } else {
          // イベントリスナ−以外はそのまま属性に設定する
          target.setAttribute(attr, attributes[attr] as string)
        }
      }
    }
    
    /**
     * 受け取った属性がイベントかどうか判定する
     * @param attribute 属性
     */
    const isEventAttr = (attribute: string): boolean => {
      // onからはじまる属性名はイベントとして扱う
      return /^on/.test(attribute)
    }
    
[/code]


CC BY-SA 4.0
2021-01-13T04:40:11.483
73261
2021-01-13T05:42:55.597
2021-01-13T05:18:36.270
3060
22565
question
javascript typescript dom
TypeScriptの構文 (node: NoddeType): node is VNodeが分からない。


> (node: NodeType)は辞書型アクセスをしているのでしょうか？

いいえ。関数の引数です。最初の行はJavaScriptでは `const isVNode = (node) => {` や `function
isVNode(node) {` と同等です。

`node is VNode` の部分は関数の戻り値の型を書くところですが、これは [User−Defined Type
Guard](https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-
defined-type-guards) で、「この関数が真を返すと、引数 `node` は `VNode`
型である」という型情報をTypescript処理系に伝えます。

> @paramも何を示しているのか分からないです。

[JSDoc](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-
types.html) です。

> exportとある箇所は後から使用するための関数になるのでしょうか？

JavaScript module と同じです。


CC BY-SA 4.0
2021-01-13T05:42:55.597
73262
2021-01-13T05:42:55.597
3475
73261
answer