fix(typings): enable strict mode for projects (#2323)

* fix(typings): enable strict mode for projects

* fix types

* add changelog entry

Author: layershifter

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Fixes
+- Remove dependency on Lodash in TypeScript typings @layershifter ([#2323](https://github.com/microsoft/fluent-ui-react/pull/2323))
+
 <!--------------------------------[ v0.44.0 ]------------------------------- -->
 ## [v0.44.0](https://github.com/microsoft/fluent-ui-react/tree/v0.44.0) (2020-02-05)
 [Compare changes](https://github.com/microsoft/fluent-ui-react/compare/v0.43.2..v0.44.0)

build/gulp/tasks/test-projects/typings/tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "jsx": "react",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "target": "es5"
+    "target": "es5",
+    "strict": true
   },
   "include": ["src"]
 }

packages/react/src/components/Carousel/Carousel.tsx

@@ -19,6 +19,7 @@ import {
 import {
   WithAsProp,
   withSafeTypeForAs,
+  DebounceResultFn,
   ShorthandCollection,
   ShorthandValue,
   ComponentEventHandler,
@@ -216,7 +217,7 @@ class Carousel extends AutoControlledComponent<WithAsProp<CarouselProps>, Carous
   itemRefs = [] as React.RefObject<HTMLElement>[]
   paddleNextRef = React.createRef<HTMLElement>()
   paddlePreviousRef = React.createRef<HTMLElement>()
-  focusItemAtIndex = _.debounce((index: number) => {
+  focusItemAtIndex: DebounceResultFn<(index: number) => void> = _.debounce((index: number) => {
     this.itemRefs[index].current.focus()
   }, 400)
 

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -7,6 +7,7 @@ import cx from 'classnames'
 import * as keyboardKey from 'keyboard-key'
 
 import {
+  DebounceResultFn,
   ShorthandRenderFunction,
   ShorthandValue,
   ComponentEventHandler,
@@ -1371,11 +1372,11 @@ class Dropdown extends AutoControlledComponent<WithAsProp<DropdownProps>, Dropdo
     this.clearStartingString()
   }
 
-  clearA11ySelectionMessage = _.debounce(() => {
+  clearA11ySelectionMessage: DebounceResultFn<() => void> = _.debounce(() => {
     this.setState({ a11ySelectionStatus: '' })
   }, Dropdown.a11yStatusCleanupTime)
 
-  clearStartingString = _.debounce(() => {
+  clearStartingString: DebounceResultFn<() => void> = _.debounce(() => {
     this.setState({ startingString: '' })
   }, Dropdown.charKeyPressedCleanupTime)
 }

packages/react/src/types.ts

@@ -3,6 +3,13 @@ import * as React from 'react'
 
 import { ShorthandFactory } from './utils/factories'
 
+// Temporary workaround for @lodash dependency
+
+export type DebounceResultFn<T> = T & {
+  cancel: () => void
+  flush: () => void
+}
+
 // ========================================================
 // Utilities
 // ========================================================

packages/react/src/utils/applyAccessibilityKeyHandlers.ts

@@ -9,7 +9,10 @@ import { Props, ShorthandValue } from '../types'
 const applyAccessibilityKeyHandlers = (
   keyHandlers: AccessibilityHandlerProps,
   value: Props | ShorthandValue<Props>,
-) => {
+): Partial<Record<
+  keyof AccessibilityHandlerProps,
+  (e: React.KeyboardEvent, ...args: any[]) => void
+>> => {
   const valIsPropsObject = _.isPlainObject(value)
   const valIsReactElement = React.isValidElement(value)