Vue3 源码请教

Question

最近从 Vue3 源码中学习，不怎么自己用 TypeScript 写就有问题特来请教

在 package 其中的 runtime-dom 的 patchProp.ts 文件中引入了 @vue/runtime-core 定义的泛型 RenderOptions 在文件 render.ts 中， 并做了一个类型别名。

patchProp.ts:

import { RendererOptions } from '@vue/runtime-core'

const nativeOnRE = /^on[a-z]/

type DOMRendererOptions = RendererOptions<Node, Element>

render.ts

export interface RendererOptions<
  HostNode = RendererNode,
  HostElement = RendererElement
> {
  patchProp(
    el: HostElement,
    key: string,
    prevValue: any,
    nextValue: any,
    isSVG?: boolean,
    prevChildren?: VNode<HostNode, HostElement>[],
    parentComponent?: ComponentInternalInstance | null,
    parentSuspense?: SuspenseBoundary | null,
    unmountChildren?: UnmountChildrenFn
  ): void
  forcePatchProp?(el: HostElement, key: string): boolean
  insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
  remove(el: HostNode): void
  createElement(
    type: string,
    isSVG?: boolean,
    isCustomizedBuiltIn?: string
  ): HostElement
  createText(text: string): HostNode
  createComment(text: string): HostNode
  setText(node: HostNode, text: string): void
  setElementText(node: HostElement, text: string): void
  parentNode(node: HostNode): HostElement | null
  nextSibling(node: HostNode): HostNode | null
  querySelector?(selector: string): HostElement | null
  setScopeId?(el: HostElement, id: string): void
  cloneNode?(node: HostNode): HostNode
  insertStaticContent?(
    content: string,
    parent: HostElement,
    anchor: HostNode | null,
    isSVG: boolean
  ): HostElement[]
}

export interface RendererNode {
  [key: string]: any
}

export interface RendererElement extends RendererNode {}

我就写了一个简易的 demo 怎么就报错呢？

interface B<HostNode=RenderNode,HostElement=RenderElement>{
    patchProp(el:HostNode):void
    forcePatchProp(el:HostElement):boolean
}

interface RenderNode{
    [key:string]:any
}

interface RenderElement extends RenderNode

type Ac = B<Node,Element>

Answer 1

你忘了 interface 的大括号。

interface RenderElement extends RenderNode {}