typed-query

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

Usage no npm install needed!

<script type="module">
  import typedQuery from 'https://cdn.skypack.dev/typed-query';
</script>

README

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>