Typescript feature detection without creating errors

Question

I'm trying to implement feature detection in a typescript function, but I keep getting linting errors.

It is obvious why I get them, because in some of the cases I'm checking against, the feature doesn't exist in the typescript definition. For example in the function below, I get a typescript error on "doc.body.createTextRange".

public searchContent(text:string) {
    let doc = document;
    let range:any; 
    let selection: any;

    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

(By the way, the code can be used for selecting text, see Selecting text in an element (akin to highlighting with your mouse))

What would be the best strategy to avoid these errors? I could extend the body definition with all possible cases, but that seems a bad idea... I can off course switch of linting in this case, but again seems like not a good solution.

What lint error do you get? Consider changing your lint configuration to something reasonable. — Halcyon, Jun 08 '17 at 11:51
Honestly, I think your best bet would be to extend the definition of `body` to include the methods your using, preferably with a big doc comment saying **CHECK THIS EXISTS BEFORE USING IT**. If you're going to be using it, may as well give yourself the proper autocomplete/type checking. — Joe Clay, Jun 08 '17 at 11:53

score 2 · Accepted Answer · answered Jul 21 '17 at 04:42

You simply typecast to any to force it to accept anything. Also in this particular code, you should check for the standards way of doing it and then fallback to the IE specific one.

function hl(element: HTMLElement) {
  let doc = document;
  if (!element)
     return;
  if (window.getSelection) {
     let selection = window.getSelection();
     let range = document.createRange();
     range.selectNodeContents(element);
     selection.removeAllRanges();
     selection.addRange(range);
     return;
  }
  //IE only feature
  let documentBody = <any>doc.body;
  if (!documentBody.createTextRange) {
     let range = documentBody.createTextRange();
     range.moveToElementText(element);
     range.select();
  }
};

Typescript feature detection without creating errors

1 Answers1