html-parse-stringify icon indicating copy to clipboard operation
html-parse-stringify copied to clipboard

TypeScript types

Open drachehavoc opened this issue 4 years ago • 1 comments

I greatly appreciate this library, but I miss types for TypeScript, so I wrote a d.ts for my use, but I'd like to share it with you developers

Below is the d.ts I created:

html-parse-stringify.d.ts

type AstElement = {
    tag: 'tag' | 'text' | 'component'
    name: string
    attrs?: { [attributeName: string]: string }
    voidElement?: boolean
    children?: AstElement[]
}

declare type Htmlparsestringify = {
    parse(htmlString: string, options?: any): AstElement[]
    stringify(AST: AstElement[]): string
}

declare module "html-parse-stringify" {
    export default null as Htmlparsestringify
}

drachehavoc avatar Sep 29 '21 14:09 drachehavoc

Should be:

type TagNode = {
  attrs: { [attr: string]: string }
  children: HTMLAstNode[]
  name: string
  type: 'tag'
  voidElement: boolean
}

type TextNode = {
  content: string
  type: 'text'
}

type ComponentNode = {
  attrs: { [attr: string]: string }
  children: []
  name: string
  type: 'component'
  voidElement: boolean
}

type HTMLAstNode = ComponentNode | TagNode | TextNode

So we can do type discrimination:

const foo = (node: HTMLAstNode) => {
  if (node.type === 'tag') {
    // node is TagNode
  }
}

Additionally, types should be exported from module so we can import type { HTMLAstNode } from 'html-parse-stringify'

bfricka avatar May 11 '22 18:05 bfricka