refactor(useWebTerminal): add typescript types (#5132)

* refactor(useWebTerminal): add typescript types

* refactor(useWebTerminal): resolve error in WebTerminal.tsx

packages/ibm-products/src/components/WebTerminal/WebTerminal.tsx

@@ -131,7 +131,7 @@ export let WebTerminal = React.forwardRef(
     */
     useEffect(() => {
       if (isInitiallyOpen) {
-        openWebTerminal();
+        openWebTerminal?.();
       }
     }, []); // eslint-disable-line
 
@@ -152,7 +152,7 @@ export let WebTerminal = React.forwardRef(
       if (prefersReducedMotion) {
         setRender(false);
       }
-      closeWebTerminal();
+      closeWebTerminal?.();
     };
 
     return shouldRender ? (

packages/ibm-products/src/components/WebTerminal/hooks/index.js → packages/ibm-products/src/components/WebTerminal/hooks/index.tsx

@@ -5,15 +5,32 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-import React, { useState, useCallback, createContext } from 'react';
+import React, { useState, useCallback, createContext, ReactNode } from 'react';
 import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { pkg } from '../../../settings';
 
-export const WebTerminalContext = createContext();
+export interface WebTerminalContextType {
+  open?: boolean;
+  openWebTerminal?: () => void;
+  closeWebTerminal?: () => void;
+  toggleWebTerminal?: () => void;
+}
+
+export const WebTerminalContext = createContext<WebTerminalContextType>({});
 
 const componentName = 'WebTerminalProvider';
-export let WebTerminalProvider = ({ children }) => {
+
+interface WebTerminalProviderProps {
+  /**
+   * Provide your own terminal component as children to show up in the web terminal
+   */
+  children: ReactNode | ReactNode[];
+}
+
+export let WebTerminalProvider: React.FC<WebTerminalProviderProps> = ({
+  children,
+}) => {
   const [open, setOpen] = useState(false);
 
   const openWebTerminal = useCallback(() => setOpen(true), []);