TSX“儿童”类型

时间:2018-12-04 11:24:53

标签: typescript

以下伪造的示例声明了自定义tsx工厂。它编译。但是,我不希望编译的一部分-children: number构造函数参数。我希望它只能使用children: Renderable[]进行编译。

那是为什么?怎样使它成为类型错误?

/* @jsx jsx */

declare function jsx (
  tag: string | { new<T extends object>(props: T, children: Renderable[]): App },
  nodeProps: NodeProps | undefined,
  children?: Renderable | Renderable[],
): VdomFragment


type VdomFragment = string
type Renderable = string
type NodeProps = object

interface App {
    render (): VdomFragment
}

class Blue implements App {
  private readonly title: string

  // How to make `children: number` a type error?
  constructor (properties: { title: string }, readonly children: number) {
    this.title = properties.title
  }

  public render () {
    return (
      <div>
        <h1>{this.title}</h1>
        {this.children}
      </div>
    )
  }
}

function render () {
  return (
    <div>
      <Blue title="Blue">
        <div className="orange">Orange</div>
        <div className="green">Green</div>
      </Blue>
    </div>
  )
}

谢谢!

0 个答案:

没有答案