refactor(types): use stricter settings

fix #847

packages/runtime-dom/src/components/Transition.ts

@@ -13,7 +13,7 @@ import { ErrorCodes } from 'packages/runtime-core/src/errorHandling'
 const TRANSITION = 'transition'
 const ANIMATION = 'animation'
 
-export interface TransitionProps extends BaseTransitionProps {
+export interface TransitionProps extends BaseTransitionProps<Element> {
   name?: string
   type?: typeof TRANSITION | typeof ANIMATION
   css?: boolean
@@ -76,7 +76,7 @@ export function resolveTransitionProps({
   leaveActiveClass = `${name}-leave-active`,
   leaveToClass = `${name}-leave-to`,
   ...baseProps
-}: TransitionProps): BaseTransitionProps {
+}: TransitionProps): BaseTransitionProps<Element> {
   if (!css) {
     return baseProps
   }
@@ -94,7 +94,7 @@ export function resolveTransitionProps({
     enterToClass = appearToClass
   }
 
-  type Hook = (el: HTMLElement, done?: () => void) => void
+  type Hook = (el: Element, done?: () => void) => void
 
   const finishEnter: Hook = (el, done) => {
     removeTransitionClass(el, enterToClass)
@@ -124,7 +124,7 @@ export function resolveTransitionProps({
     onEnter(el, done) {
       nextFrame(() => {
         const resolve = () => finishEnter(el, done)
-        onEnter && callHookWithErrorHandling(onEnter, [el, resolve])
+        onEnter && callHookWithErrorHandling(onEnter as Hook, [el, resolve])
         removeTransitionClass(el, enterFromClass)
         addTransitionClass(el, enterToClass)
         if (!(onEnter && onEnter.length > 1)) {
@@ -141,7 +141,7 @@ export function resolveTransitionProps({
       addTransitionClass(el, leaveFromClass)
       nextFrame(() => {
         const resolve = () => finishLeave(el, done)
-        onLeave && callHookWithErrorHandling(onLeave, [el, resolve])
+        onLeave && callHookWithErrorHandling(onLeave as Hook, [el, resolve])
         removeTransitionClass(el, leaveFromClass)
         addTransitionClass(el, leaveToClass)
         if (!(onLeave && onLeave.length > 1)) {
@@ -199,17 +199,21 @@ export interface ElementWithTransition extends HTMLElement {
   _vtc?: Set<string>
 }
 
-export function addTransitionClass(el: ElementWithTransition, cls: string) {
+export function addTransitionClass(el: Element, cls: string) {
   cls.split(/\s+/).forEach(c => c && el.classList.add(c))
-  ;(el._vtc || (el._vtc = new Set())).add(cls)
+  ;(
+    (el as ElementWithTransition)._vtc ||
+    ((el as ElementWithTransition)._vtc = new Set())
+  ).add(cls)
 }
 
-export function removeTransitionClass(el: ElementWithTransition, cls: string) {
+export function removeTransitionClass(el: Element, cls: string) {
   cls.split(/\s+/).forEach(c => c && el.classList.remove(c))
-  if (el._vtc) {
-    el._vtc.delete(cls)
-    if (!el._vtc!.size) {
-      el._vtc = undefined
+  const { _vtc } = el as ElementWithTransition
+  if (_vtc) {
+    _vtc.delete(cls)
+    if (!_vtc!.size) {
+      ;(el as ElementWithTransition)._vtc = undefined
     }
   }
 }

packages/runtime-dom/src/components/TransitionGroup.ts

@@ -52,8 +52,8 @@ const TransitionGroupImpl = {
       hasMove =
         hasMove === null
           ? (hasMove = hasCSSTransform(
-              prevChildren[0].el,
-              instance.vnode.el,
+              prevChildren[0].el as ElementWithTransition,
+              instance.vnode.el as Node,
               moveClass
             ))
           : hasMove
@@ -71,17 +71,17 @@ const TransitionGroupImpl = {
       forceReflow()
 
       movedChildren.forEach(c => {
-        const el = c.el
+        const el = c.el as ElementWithTransition
         const style = el.style
         addTransitionClass(el, moveClass)
-        style.transform = style.WebkitTransform = style.transitionDuration = ''
-        const cb = (el._moveCb = (e: TransitionEvent) => {
+        style.transform = style.webkitTransform = style.transitionDuration = ''
+        const cb = ((el as any)._moveCb = (e: TransitionEvent) => {
           if (e && e.target !== el) {
             return
           }
           if (!e || /transform$/.test(e.propertyName)) {
             el.removeEventListener('transitionend', cb)
-            el._moveCb = null
+            ;(el as any)._moveCb = null
             removeTransitionClass(el, moveClass)
           }
         })
@@ -120,7 +120,7 @@ const TransitionGroupImpl = {
             child,
             resolveTransitionHooks(child, cssTransitionProps, state, instance)
           )
-          positionMap.set(child, child.el.getBoundingClientRect())
+          positionMap.set(child, (child.el as Element).getBoundingClientRect())
         }
       }
 
@@ -145,16 +145,17 @@ if (__DEV__) {
 }
 
 function callPendingCbs(c: VNode) {
-  if (c.el._moveCb) {
-    c.el._moveCb()
+  const el = c.el as any
+  if (el._moveCb) {
+    el._moveCb()
   }
-  if (c.el._enterCb) {
-    c.el._enterCb()
+  if (el._enterCb) {
+    el._enterCb()
   }
 }
 
 function recordPosition(c: VNode) {
-  newPositionMap.set(c, c.el.getBoundingClientRect())
+  newPositionMap.set(c, (c.el as Element).getBoundingClientRect())
 }
 
 function applyTranslation(c: VNode): VNode | undefined {
@@ -163,8 +164,8 @@ function applyTranslation(c: VNode): VNode | undefined {
   const dx = oldPos.left - newPos.left
   const dy = oldPos.top - newPos.top
   if (dx || dy) {
-    const s = c.el.style
-    s.transform = s.WebkitTransform = `translate(${dx}px,${dy}px)`
+    const s = (c.el as HTMLElement).style
+    s.transform = s.webkitTransform = `translate(${dx}px,${dy}px)`
     s.transitionDuration = '0s'
     return c
   }