Typed query

Wrapper functions in Typescript and Javascript for document.querySelector and document.querySelectorAll.

The functions take an optional tyep parameter - a constructor function for an HTML element

Uses the monad-wrap package to return a Maybe value from the maybeQuery function.

• typedQuery

  • Wraps document.querySelector
  • Throws QueryError if the element is not found or does not match the given type (if the type is specified)

• typedQueryAll

  • Wraps document.querySelectorAll
  • Throws QueryError if any of the found elements does not match the given type (if the type is specified)

• maybeQuery

  • Wraps document.querySelector
  • Returns Nothing if the elemens if not found or does not match the given type (if the type is specified)
  • Returns Just the element if it is found

Examples

import { typedQuery, typedQueryAll, maybeQuery } from 'typed-query'  

typedQuery('body') // => HTMLBodyElement  
typedQuery('#nonexistent-id') // => QueryError (element does not exist)  
typedQuery('#existent-id') // => Element  
typedQuery('#my-awesome-logo', HTMLImageElement) // => HTMLImageElement  
typedQuery('#my-awesome-logo', HTMLAudioElement) // => QueryError (element does not match the type)  

typedQueryAll('.row', HTMLDivElement) // => Array<HTMLDivElement> if all found elements match the type  
typedQueryAll('.row', HTMLDivElement) // => QueryError if any of the found elements don't match the type  

maybeQuery('#my-awesome-logo', HTMLImageElement) // => Maybe<HTMLImageElement>