Remove almost all uses of "any" outside of test code. (lit#741)

* Remove all uses of "any" outside of test code.

* Format

* Give better types for EventPart

* Format

* Address review feedback.

* Address more review feedback.

* Get tests compiling cleanly.

* Don't use isThenable function.

* Add accidentally deleted check.

* Revert isIterable, potentially too expensive.

* Use EventListenerOrEventListenerObject instead of reinventing it.

* Reformat

* Use EventListenerObject type.

Author: rictic

package-lock.json

@@ -42,7 +42,7 @@
     "rollup-plugin-filesize": "^4.0.1",
     "rollup-plugin-terser": "^1.0.1",
     "tslint": "^5.11.0",
-    "typescript": "^3.1.1",
+    "typescript": "^3.2.2",
     "uglify-es": "^3.3.5",
     "wct-mocha": "^1.0.0",
     "web-component-tester": "^6.9.0"

package.json

@@ -33,7 +33,7 @@ import {createMarker, directive, NodePart, Part} from '../lit-html.js';
  */
 export const asyncAppend = directive(
     <T>(value: AsyncIterable<T>,
-        mapper?: (v: T, index?: number) => any) => async (part: Part) => {
+        mapper?: (v: T, index?: number) => unknown) => async (part: Part) => {
       if (!(part instanceof NodePart)) {
         throw new Error('asyncAppend can only be used in text bindings');
       }
@@ -67,7 +67,9 @@ export const asyncAppend = directive(
         // we accept a mapper function. This is especially convenient for
         // rendering a template for each item.
         if (mapper !== undefined) {
-          v = mapper(v, i);
+          // This is safe because T must otherwise be treated as unknown by
+          // the rest of the system.
+          v = mapper(v, i) as T;
         }
 
         // Like with sync iterables, each item induces a Part, so we need

src/directives/async-append.ts

@@ -33,7 +33,7 @@ import {directive, NodePart, Part} from '../lit-html.js';
  *     value. Useful for generating templates for each item in the iterable.
  */
 export const asyncReplace = directive(
-    <T>(value: AsyncIterable<T>, mapper?: (v: T, index?: number) => any) =>
+    <T>(value: AsyncIterable<T>, mapper?: (v: T, index?: number) => unknown) =>
         async (part: Part) => {
           if (!(part instanceof NodePart)) {
             throw new Error('asyncReplace can only be used in text bindings');
@@ -70,7 +70,9 @@ export const asyncReplace = directive(
             // we accept a mapper function. This is especially convenient for
             // rendering a template for each item.
             if (mapper !== undefined) {
-              v = mapper(v, i);
+              // This is safe because T must otherwise be treated as unknown by
+              // the rest of the system.
+              v = mapper(v, i) as T;
             }
 
             itemPart.setValue(v);

src/directives/async-replace.ts

@@ -37,7 +37,7 @@ const templateCaches =
  * `
  * ```
  */
-export const cache = directive((value: any) => (part: Part) => {
+export const cache = directive((value: unknown) => (part: Part) => {
   if (!(part instanceof NodePart)) {
     throw new Error('cache can only be used in text bindings');
   }

src/directives/cache.ts

@@ -20,7 +20,7 @@ import {AttributePart, directive, Part} from '../lit-html.js';
  *
  * For other part types, this directive is a no-op.
  */
-export const ifDefined = directive((value: any) => (part: Part) => {
+export const ifDefined = directive((value: unknown) => (part: Part) => {
   if (value === undefined && part instanceof AttributePart) {
     if (value !== part.value) {
       const name = part.committer.name;

src/directives/if-defined.ts

@@ -22,15 +22,15 @@ export interface StyleInfo {
  * Stores the StyleInfo object applied to a given AttributePart.
  * Used to unset existing values when a new StyleInfo object is applied.
  */
-const styleMapCache = new WeakMap();
+const styleMapCache = new WeakMap<AttributePart, StyleInfo>();
 
 /**
  * Stores AttributeParts that have had static styles applied (e.g. `height: 0;`
  * in style="height: 0; ${styleMap()}"). Static styles are applied only the
  * first time the directive is run on a part.
  */
 // Note, could be a WeakSet, but prefer not requiring this polyfill.
-const styleMapStatics = new WeakMap();
+const styleMapStatics = new WeakMap<AttributePart, true>();
 
 /**
  * A directive that applies CSS properties to an element.
@@ -70,6 +70,7 @@ export const styleMap = directive((styleInfo: StyleInfo) => (part: Part) => {
   for (const name in oldInfo) {
     if (!(name in styleInfo)) {
       if (name.indexOf('-') === -1) {
+        // tslint:disable-next-line:no-any
         (style as any)[name] = null;
       } else {
         style.removeProperty(name);
@@ -80,6 +81,7 @@ export const styleMap = directive((styleInfo: StyleInfo) => (part: Part) => {
   // Add or update properties
   for (const name in styleInfo) {
     if (name.indexOf('-') === -1) {
+      // tslint:disable-next-line:no-any
       (style as any)[name] = styleInfo[name];
     } else {
       style.setProperty(name, styleInfo[name]);

src/directives/repeat.ts

@@ -16,7 +16,7 @@ import {isPrimitive} from '../lib/parts.js';
 import {directive, NodePart, Part} from '../lit-html.js';
 
 interface PreviousValue {
-  value: any;
+  value: unknown;
   fragment: DocumentFragment;
 }
 
@@ -34,7 +34,7 @@ const previousValues = new WeakMap<NodePart, PreviousValue>();
  * sanitized or escaped, as it may lead to cross-site-scripting
  * vulnerabilities.
  */
-export const unsafeHTML = directive((value: any) => (part: Part): void => {
+export const unsafeHTML = directive((value: unknown) => (part: Part): void => {
   if (!(part instanceof NodePart)) {
     throw new Error('unsafeHTML can only be used in text bindings');
   }
@@ -47,7 +47,7 @@ export const unsafeHTML = directive((value: any) => (part: Part): void => {
   }
 
   const template = document.createElement('template');
-  template.innerHTML = value;
+  template.innerHTML = value as string;  // innerHTML casts to string internally
   const fragment = document.importNode(template.content, true);
   part.setValue(fragment);
   previousValues.set(part, {value, fragment});

src/directives/style-map.ts

@@ -46,7 +46,7 @@ const _state = new WeakMap<Part, AsyncState>();
  *     const content = fetch('./content.txt').then(r => r.text());
  *     html`${until(content, html`<span>Loading...</span>`)}`
  */
-export const until = directive((...args: any[]) => (part: Part) => {
+export const until = directive((...args: unknown[]) => (part: Part) => {
   let state = _state.get(part)!;
   if (state === undefined) {
     state = {
@@ -66,7 +66,8 @@ export const until = directive((...args: any[]) => (part: Part) => {
     const value = args[i];
 
     // Render non-Promise values immediately
-    if (isPrimitive(value) || typeof value.then !== 'function') {
+    if (isPrimitive(value) ||
+        typeof (value as {then?: unknown}).then !== 'function') {
       part.setValue(value);
       state.lastRenderedIndex = i;
       // Since a lower-priority value will never overwrite a higher-priority
@@ -76,7 +77,8 @@ export const until = directive((...args: any[]) => (part: Part) => {
 
     // If this is a Promise we've already handled, skip it.
     if (state.lastRenderedIndex !== undefined &&
-        typeof value.then === 'function' && value === previousValues[i]) {
+        typeof (value as {then?: unknown}).then === 'function' &&
+        value === previousValues[i]) {
       continue;
     }
 

src/directives/unsafe-html.ts

@@ -18,7 +18,10 @@
 
 import {Part} from './part.js';
 
-const directives = new WeakMap<any, Boolean>();
+const directives = new WeakMap<object, true>();
+
+// tslint:disable-next-line:no-any
+export type DirectiveFactory = (...args: any[]) => object;
 
 export type DirectiveFn = (part: Part) => void;
 
@@ -42,12 +45,14 @@ export type DirectiveFn = (part: Part) => void;
  * });
  * ```
  */
-export const directive = <F extends Function>(f: F): F =>
-    ((...args: any[]) => {
+// tslint:disable-next-line:no-any
+export const directive = <F extends DirectiveFactory>(f: F): F =>
+    ((...args: unknown[]) => {
       const d = f(...args);
       directives.set(d, true);
       return d;
-    }) as unknown as F;
+    }) as F;
 
-export const isDirective = (o: any) =>
-    typeof o === 'function' && directives.has(o);
+export const isDirective = (o: unknown): o is DirectiveFn => {
+  return typeof o === 'function' && directives.has(o);
+};

src/directives/until.ts

@@ -16,11 +16,16 @@
  * @module lit-html
  */
 
+interface MaybePolyfilledCe extends CustomElementRegistry {
+  polyfillWrapFlushCallback?: object;
+}
+
 /**
  * True if the custom elements polyfill is in use.
  */
 export const isCEPolyfill = window.customElements !== undefined &&
-    (window.customElements as any).polyfillWrapFlushCallback !== undefined;
+    (window.customElements as MaybePolyfilledCe).polyfillWrapFlushCallback !==
+        undefined;
 
 /**
  * Reparents nodes, starting from `startNode` (inclusive) to `endNode`

src/lib/directive.ts

@@ -40,7 +40,7 @@ export function removeNodesFromTemplate(
     template: Template, nodesToRemove: Set<Node>) {
   const {element: {content}, parts} = template;
   const walker =
-      document.createTreeWalker(content, walkerNodeFilter, null as any, false);
+      document.createTreeWalker(content, walkerNodeFilter, null, false);
   let partIndex = nextActiveIndexInTemplateParts(parts);
   let part = parts[partIndex];
   let nodeIndex = -1;
@@ -80,8 +80,7 @@ export function removeNodesFromTemplate(
 
 const countNodes = (node: Node) => {
   let count = (node.nodeType === 11 /* Node.DOCUMENT_FRAGMENT_NODE */) ? 0 : 1;
-  const walker =
-      document.createTreeWalker(node, walkerNodeFilter, null as any, false);
+  const walker = document.createTreeWalker(node, walkerNodeFilter, null, false);
   while (walker.nextNode()) {
     count++;
   }
@@ -114,7 +113,7 @@ export function insertNodeIntoTemplate(
     return;
   }
   const walker =
-      document.createTreeWalker(content, walkerNodeFilter, null as any, false);
+      document.createTreeWalker(content, walkerNodeFilter, null, false);
   let partIndex = nextActiveIndexInTemplateParts(parts);
   let insertCount = 0;
   let walkerIndex = -1;

src/lib/dom.ts

@@ -21,13 +21,13 @@
  * by lit-html.
  */
 export interface Part {
-  value: any;
+  value: unknown;
 
   /**
    * Sets the current part value, but does not write it to the DOM.
    * @param value The value that will be committed.
    */
-  setValue(value: any): void;
+  setValue(value: unknown): void;
 
   /**
    * Commits the current part value, cause it to actually be written to the DOM.
@@ -39,7 +39,7 @@ export interface Part {
  * A sentinel value that signals that a value was handled by a directive and
  * should not be written to the DOM.
  */
-export const noChange = {};
+export const noChange: object = {};
 
 /**
  * A sentinel value that signals a NodePart to fully clear its content.