Add types for react-beforeunload (#36380)

* 🎉 add types for `react-beforeunload`

* 🐛 [react-beforeunload] - fix broken tests from travis-ci (add `dom` for compiler `lib` option and duplicate `Handler` type because of https://github.com/Microsoft/dtslint/blob/master/docs/strict-export-declare-modifiers.md)

* [react-beforeunload] make the handler and its `event` argument optional

* [react-beforeunload] only make the hook handler optional

Only make the hook handler optional (but not the event!)

* [react-beforeunload] add noop hook test case

* [react-beforeunload] oops, fix lint error :)

* [react-beforeunload] add appropriate `undefined` return type

* [react-beforeunload] split types semantically by function signatures

* [react-beforeunload] fix typo

types/react-beforeunload/index.d.ts

@@ -0,0 +1,16 @@
+// Type definitions for react-beforeunload 2.1
+// Project: https://github.com/jacobbuck/react-beforeunload#readme
+// Definitions by: nem035 <https://github.com/nem035>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from 'react';
+
+export type UseBeforeunloadHandler = ((arg: Event) => string | undefined) | ((arg: Event) => void);
+
+export function useBeforeunload(handler?: UseBeforeunloadHandler): void;
+
+export const Beforeunload: React.FC<{
+    children?: React.ReactNode;
+    onBeforeunload: UseBeforeunloadHandler;
+}>;

types/react-beforeunload/react-beforeunload-tests.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { useBeforeunload, Beforeunload } from 'react-beforeunload';
+
+function AppWithNoopHook() {
+    useBeforeunload();
+
+    return <h1>AppWithDialogBoxHook</h1>;
+}
+
+function AppWithDialogBoxHook() {
+    useBeforeunload(event => event.preventDefault());
+
+    return <h1>AppWithDialogBoxHook</h1>;
+}
+
+function AppWithCustomMessageHook() {
+    useBeforeunload(() => "You'll lose your data!");
+
+    return <h1>AppWithCustomMessageHook</h1>;
+}
+
+function AppWithDialogBoxComponent() {
+    return <Beforeunload onBeforeunload={event => event.preventDefault()} />;
+}
+
+function AppWithCustomMessageComponent() {
+    return <Beforeunload onBeforeunload={() => "You'll lose your data!"} />;
+}
+
+function AppWithDialogBoxWithChildrenComponent() {
+    return (
+        <Beforeunload onBeforeunload={event => event.preventDefault()}>
+            <h1>AppWithCustomMessageHook</h1>
+        </Beforeunload>
+    );
+}
+
+function AppWithCustomMessageWithChildrenComponent() {
+    return (
+        <Beforeunload onBeforeunload={() => "You'll lose your data!"}>
+            <h1>AppWithCustomMessageHook</h1>
+        </Beforeunload>
+    );
+}
+
+function App() {
+    return (
+        <>
+            <AppWithDialogBoxHook />
+            <AppWithCustomMessageHook />
+            <AppWithDialogBoxComponent />
+            <AppWithCustomMessageComponent />
+            <AppWithDialogBoxWithChildrenComponent />
+            <AppWithCustomMessageWithChildrenComponent />
+        </>
+    );
+}
+ReactDOM.render(<App />, document.getElementById('app'));

types/react-beforeunload/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "dom",
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "react-beforeunload-tests.tsx"
+    ]
+}

types/react-beforeunload/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }