diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 87835d163e55..9f09fffce1ec 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -3440,7 +3440,17 @@ Map {
         "type": "oneOf",
       },
       "tabIndex": Object {
-        "type": "string",
+        "args": Array [
+          Array [
+            Object {
+              "type": "number",
+            },
+            Object {
+              "type": "string",
+            },
+          ],
+        ],
+        "type": "oneOfType",
       },
     },
   },
diff --git a/packages/react/src/components/FileUploader/FileUploader.Skeleton.js b/packages/react/src/components/FileUploader/FileUploader.Skeleton.tsx
similarity index 82%
rename from packages/react/src/components/FileUploader/FileUploader.Skeleton.js
rename to packages/react/src/components/FileUploader/FileUploader.Skeleton.tsx
index ba4da8537aba..87c535501fac 100644
--- a/packages/react/src/components/FileUploader/FileUploader.Skeleton.js
+++ b/packages/react/src/components/FileUploader/FileUploader.Skeleton.tsx
@@ -11,6 +11,14 @@ import cx from 'classnames';
 import SkeletonText from '../SkeletonText';
 import ButtonSkeleton from '../Button/Button.Skeleton';
 import { usePrefix } from '../../internal/usePrefix';
+import { ReactAttr } from '../../types/common';
+
+export interface FileUploaderSkeletonProps extends ReactAttr<HTMLDivElement> {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+}
 
 function FileUploaderSkeleton({ className, ...rest }) {
   const prefix = usePrefix();
diff --git a/packages/react/src/components/FileUploader/FileUploader.js b/packages/react/src/components/FileUploader/FileUploader.tsx
similarity index 70%
rename from packages/react/src/components/FileUploader/FileUploader.js
rename to packages/react/src/components/FileUploader/FileUploader.tsx
index 78734e95acc9..179605f8a3d1 100644
--- a/packages/react/src/components/FileUploader/FileUploader.js
+++ b/packages/react/src/components/FileUploader/FileUploader.tsx
@@ -13,8 +13,102 @@ import FileUploaderButton from './FileUploaderButton';
 import { ButtonKinds } from '../../prop-types/types';
 import { keys, matches } from '../../internal/keyboard';
 import { PrefixContext } from '../../internal/usePrefix';
+import { ReactAttr } from '../../types/common';
 
-export default class FileUploader extends React.Component {
+export interface FileUploaderProps extends ReactAttr<HTMLSpanElement> {
+  /**
+   * Specify the types of files that this input should be able to receive
+   */
+  accept?: string[];
+
+  /**
+   * Specify the type of the `<FileUploaderButton>`
+   */
+  buttonKind?:
+    | 'primary'
+    | 'secondary'
+    | 'danger'
+    | 'ghost'
+    | 'danger--primary'
+    | 'danger--ghost'
+    | 'danger--tertiary'
+    | 'tertiary';
+
+  /**
+   * Provide the label text to be read by screen readers when interacting with
+   * the `<FileUploaderButton>`
+   */
+  buttonLabel?: string;
+
+  /**
+   * Provide a custom className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Specify whether file input is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify the status of the File Upload
+   */
+  filenameStatus: 'edit' | 'complete' | 'uploading';
+
+  /**
+   * Provide a description for the complete/close icon that can be read by screen readers
+   */
+  iconDescription: string;
+
+  /**
+   * Specify the description text of this `<FileUploader>`
+   */
+  labelDescription?: string;
+
+  /**
+   * Specify the title text of this `<FileUploader>`
+   */
+  labelTitle?: string;
+
+  /**
+   * Specify if the component should accept multiple files to upload
+   */
+  multiple?: boolean;
+
+  /**
+   * Provide a name for the underlying `<input>` node
+   */
+  name?: string;
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the input is
+   * changed
+   */
+  onChange?: (event: any) => void;
+
+  /**
+   * Provide an optional `onClick` hook that is called each time the
+   * FileUploader is clicked
+   */
+  onClick?: (event: any) => void;
+
+  /**
+   * Provide an optional `onDelete` hook that is called when an uploaded item
+   * is removed
+   */
+  onDelete?: (event: any) => void;
+
+  /**
+   * Specify the size of the FileUploaderButton, from a list of available
+   * sizes.
+   */
+  size?: 'sm' | 'small' | 'md' | 'field' | 'lg';
+}
+
+export default class FileUploader extends React.Component<
+  FileUploaderProps,
+  { filenames: string[] }
+> {
   static propTypes = {
     /**
      * Specify the types of files that this input should be able to receive
@@ -111,12 +205,12 @@ export default class FileUploader extends React.Component {
   };
 
   state = {
-    filenames: [],
+    filenames: [] as string[],
   };
 
-  nodes = [];
+  nodes: HTMLElement[] = [];
 
-  uploaderButton = React.createRef();
+  uploaderButton = React.createRef<HTMLLabelElement>();
 
   static getDerivedStateFromProps({ filenameStatus }, state) {
     const { prevFilenameStatus } = state;
@@ -133,7 +227,7 @@ export default class FileUploader extends React.Component {
     const filenames = Array.prototype.map.call(
       evt.target.files,
       (file) => file.name
-    );
+    ) as string[];
     this.setState({
       filenames: this.props.multiple
         ? this.state.filenames.concat(filenames)
@@ -153,9 +247,9 @@ export default class FileUploader extends React.Component {
       this.setState({ filenames: filteredArray });
       if (this.props.onDelete) {
         this.props.onDelete(evt);
-        this.uploaderButton.current.focus();
+        this.uploaderButton.current?.focus?.();
       }
-      this.props.onClick(evt);
+      this.props.onClick?.(evt);
     }
   };
 
@@ -178,7 +272,7 @@ export default class FileUploader extends React.Component {
       accept,
       name,
       size = 'md',
-      onDelete, // eslint-disable-line no-unused-vars
+      onDelete, // eslint-disable-line
       ...other
     } = this.props;
 
@@ -186,7 +280,7 @@ export default class FileUploader extends React.Component {
 
     const classes = classNames({
       [`${prefix}--form-item`]: true,
-      [className]: className,
+      [className as string]: className,
     });
 
     const getHelperLabelClasses = (baseClass) =>
@@ -228,7 +322,7 @@ export default class FileUploader extends React.Component {
                 <span
                   key={index}
                   className={selectedFileClasses}
-                  ref={(node) => (this.nodes[index] = node)} // eslint-disable-line
+                  ref={(node) => (this.nodes[index] = node as HTMLSpanElement)} // eslint-disable-line
                   {...other}>
                   <p className={`${prefix}--file-filename`} id={name}>
                     {name}
@@ -239,7 +333,12 @@ export default class FileUploader extends React.Component {
                       iconDescription={iconDescription}
                       status={filenameStatus}
                       onKeyDown={(evt) => {
-                        if (matches(evt, [keys.Enter, keys.Space])) {
+                        if (
+                          matches(evt as unknown as Event, [
+                            keys.Enter,
+                            keys.Space,
+                          ])
+                        ) {
                           this.handleClick(evt, { index, filenameStatus });
                         }
                       }}
diff --git a/packages/react/src/components/FileUploader/FileUploaderButton.js b/packages/react/src/components/FileUploader/FileUploaderButton.tsx
similarity index 63%
rename from packages/react/src/components/FileUploader/FileUploaderButton.js
rename to packages/react/src/components/FileUploader/FileUploaderButton.tsx
index 6abea547b47a..9b9bc4312c83 100644
--- a/packages/react/src/components/FileUploader/FileUploaderButton.js
+++ b/packages/react/src/components/FileUploader/FileUploaderButton.tsx
@@ -13,9 +13,98 @@ import { ButtonKinds } from '../../prop-types/types';
 import uid from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
+import { ReactAttr } from '../../types/common';
 
 function noop() {}
 
+export interface FileUploaderButtonProps
+  extends Omit<ReactAttr<HTMLButtonElement>, 'onChange' | 'tabIndex'> {
+  /**
+   * Specify the types of files that this input should be able to receive
+   */
+  accept?: string[];
+
+  /**
+   * Specify the type of underlying button
+   */
+  buttonKind?:
+    | 'primary'
+    | 'secondary'
+    | 'danger'
+    | 'ghost'
+    | 'danger--primary'
+    | 'danger--ghost'
+    | 'danger--tertiary'
+    | 'tertiary';
+
+  /**
+   * Provide a custom className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Specify whether you want to disable any updates to the FileUploaderButton
+   * label
+   */
+  disableLabelChanges?: boolean;
+
+  /**
+   * Specify whether file input is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Provide a unique id for the underlying `<input>` node
+   */
+  id?: string;
+
+  /**
+   * Provide the label text to be read by screen readers when interacting with
+   * this control
+   */
+  labelText?: React.ReactNode;
+
+  /**
+   * Specify if the component should accept multiple files to upload
+   */
+  multiple?: boolean;
+
+  /**
+   * Provide a name for the underlying `<input>` node
+   */
+  name?: string;
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the `<input>`
+   * value changes
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   * Provide an optional `onClick` hook that is called each time the button is
+   * clicked
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Provide an accessibility role for the `<FileUploaderButton>`
+   */
+  role?: string;
+
+  /**
+   * Specify the size of the FileUploaderButton, from a list of available
+   * sizes.
+   */
+  size?: 'sm' | 'small' | 'field' | 'md' | 'lg';
+
+  /**
+   * @deprecated The `tabIndex` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default.
+   */
+  tabIndex?: number | string;
+
+  innerRef?: React.RefObject<HTMLLabelElement>;
+}
+
 function FileUploaderButton({
   accept,
   buttonKind = 'primary',
@@ -31,12 +120,12 @@ function FileUploaderButton({
   // eslint-disable-next-line react/prop-types
   innerRef,
   ...other
-}) {
+}: FileUploaderButtonProps) {
   const prefix = usePrefix();
   const [labelText, setLabelText] = useState(ownerLabelText);
   const [prevOwnerLabelText, setPrevOwnerLabelText] = useState(ownerLabelText);
   const { current: inputId } = useRef(id || uid());
-  const inputNode = useRef(null);
+  const inputNode = useRef<HTMLInputElement>(null);
   const classes = cx(`${prefix}--btn`, className, {
     [`${prefix}--btn--${buttonKind}`]: buttonKind,
     [`${prefix}--btn--disabled`]: disabled,
@@ -54,20 +143,22 @@ function FileUploaderButton({
 
   function onClick(event) {
     event.target.value = null;
-    inputNode.current.value = '';
-    inputNode.current.click();
+    if (inputNode.current) {
+      inputNode.current.value = '';
+      inputNode.current.click();
+    }
   }
 
   function onKeyDown(event) {
-    if (matches(event, [keys.Enter, keys.Space])) {
+    if (matches(event, [keys.Enter, keys.Space]) && inputNode.current) {
       inputNode.current.value = '';
       inputNode.current.click();
     }
   }
 
-  function handleOnChange(event) {
+  function handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {
     const files = event.target.files;
-    const length = event.target.files.length;
+    const length = event.target.files?.length || 0;
     if (files && !disableLabelChanges) {
       if (length > 1) {
         setLabelText(`${length} files`);
@@ -86,7 +177,12 @@ function FileUploaderButton({
         className={classes}
         onClick={onClick}
         onKeyDown={onKeyDown}
-        {...other}>
+        {...other}
+        tabIndex={
+          other.tabIndex !== undefined
+            ? parseInt(other.tabIndex as string)
+            : undefined
+        }>
         {labelText}
       </button>
       <label
@@ -101,9 +197,9 @@ function FileUploaderButton({
         id={inputId}
         disabled={disabled}
         type="file"
-        tabIndex="-1"
+        tabIndex={-1}
         multiple={multiple}
-        accept={accept}
+        accept={accept?.toString()}
         name={name}
         onChange={handleOnChange}
       />
diff --git a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js b/packages/react/src/components/FileUploader/FileUploaderDropContainer.tsx
similarity index 75%
rename from packages/react/src/components/FileUploader/FileUploaderDropContainer.js
rename to packages/react/src/components/FileUploader/FileUploaderDropContainer.tsx
index 7233f74195e8..31933065a2d6 100644
--- a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js
+++ b/packages/react/src/components/FileUploader/FileUploaderDropContainer.tsx
@@ -13,6 +13,73 @@ import uniqueId from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
 import { composeEventHandlers } from '../../tools/events';
 import deprecate from '../../prop-types/deprecate';
+import { ReactAttr } from '../../types/common';
+
+export interface FileUploaderDropContainerProps
+  extends Omit<ReactAttr<HTMLButtonElement>, 'tabIndex'> {
+  /**
+   * Specify the types of files that this input should be able to receive
+   */
+  accept?: string[];
+
+  /**
+   * Provide a custom className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Specify whether file input is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Provide a unique id for the underlying `<input>` node
+   */
+  id?: string;
+
+  /**
+   * Provide the label text to be read by screen readers when interacting with
+   * this control
+   */
+  labelText: string;
+
+  /**
+   * Specify if the component should accept multiple files to upload
+   */
+  multiple?: boolean;
+
+  /**
+   * Provide a name for the underlying `<input>` node
+   */
+  name?: string;
+
+  /**
+   * Event handler that is called after files are added to the uploader
+   * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
+   */
+  onAddFiles?: () => void;
+
+  /**
+   * Provide an optional function to be called when the button element
+   * is clicked
+   */
+  onClick?: () => void;
+
+  /**
+   * Provide a custom regex pattern for the acceptedTypes
+   */
+  pattern?: string;
+
+  /**
+   * @deprecated The `role` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default, and has an implicit role of button.
+   */
+  role?: string;
+
+  /**
+   * @deprecated The `tabIndex` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default.
+   */
+  tabIndex?: number | string;
+}
 
 function FileUploaderDropContainer({
   accept,
@@ -30,7 +97,7 @@ function FileUploaderDropContainer({
   ...rest
 }) {
   const prefix = usePrefix();
-  const inputRef = useRef(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const { current: uid } = useRef(id || uniqueId());
   const [isActive, setActive] = useState(false);
   const dropareaClasses = classNames(
@@ -84,7 +151,7 @@ function FileUploaderDropContainer({
 
   const handleClick = () => {
     if (!disabled) {
-      inputRef.current.click();
+      inputRef.current?.click();
     }
   };
 
@@ -123,9 +190,9 @@ function FileUploaderDropContainer({
         className={dropareaClasses}
         ref={innerRef}
         onKeyDown={(evt) => {
-          if (matches(evt, [keys.Enter, keys.Space])) {
+          if (matches(evt as unknown as Event, [keys.Enter, keys.Space])) {
             evt.preventDefault();
-            inputRef.current.click();
+            inputRef.current?.click();
           }
         }}
         onClick={composeEventHandlers([onClick, handleClick])}
@@ -140,14 +207,14 @@ function FileUploaderDropContainer({
         id={uid}
         className={`${prefix}--file-input`}
         ref={inputRef}
-        tabIndex="-1"
+        tabIndex={-1}
         disabled={disabled}
         accept={accept}
         name={name}
         multiple={multiple}
         onChange={handleChange}
         onClick={(evt) => {
-          evt.target.value = null;
+          (evt.target as HTMLInputElement).value = null as unknown as string;
         }}
       />
     </div>
diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.js b/packages/react/src/components/FileUploader/FileUploaderItem.tsx
similarity index 74%
rename from packages/react/src/components/FileUploader/FileUploaderItem.js
rename to packages/react/src/components/FileUploader/FileUploaderItem.tsx
index 537b686adfdc..57900ba87dd9 100644
--- a/packages/react/src/components/FileUploader/FileUploaderItem.js
+++ b/packages/react/src/components/FileUploader/FileUploaderItem.tsx
@@ -12,6 +12,56 @@ import Filename from './Filename';
 import { keys, matches } from '../../internal/keyboard';
 import uid from '../../tools/uniqueId';
 import { usePrefix } from '../../internal/usePrefix';
+import { ReactAttr } from '../../types/common';
+
+export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
+  /**
+   * Error message body for an invalid file upload
+   */
+  errorBody?: string;
+
+  /**
+   * Error message subject for an invalid file upload
+   */
+  errorSubject?: string;
+
+  /**
+   * Description of status icon (displayed in native tooltip)
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify if the currently uploaded file is invalid
+   */
+  invalid?: boolean;
+
+  /**
+   * Name of the uploaded file
+   */
+  name?: string;
+
+  /**
+   * Event handler that is called after removing a file from the file uploader
+   * The event handler signature looks like `onDelete(evt, { uuid })`
+   */
+  onDelete?: (event: any, opts: { uuid: string }) => void;
+
+  /**
+   * Specify the size of the FileUploaderButton, from a list of available
+   * sizes.
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Status of the file upload
+   */
+  status?: 'uploading' | 'edit' | 'complete';
+
+  /**
+   * Unique identifier for the file object
+   */
+  uuid?: string;
+}
 
 function FileUploaderItem({
   uuid,
@@ -45,7 +95,7 @@ function FileUploaderItem({
           invalid={invalid}
           aria-describedby={`${name}-id-error`}
           onKeyDown={(evt) => {
-            if (matches(evt, [keys.Enter, keys.Space])) {
+            if (matches(evt as unknown as Event, [keys.Enter, keys.Space])) {
               if (status === 'edit') {
                 evt.preventDefault();
                 onDelete(evt, { uuid: id });
diff --git a/packages/react/src/components/FileUploader/Filename.js b/packages/react/src/components/FileUploader/Filename.tsx
similarity index 64%
rename from packages/react/src/components/FileUploader/Filename.js
rename to packages/react/src/components/FileUploader/Filename.tsx
index 6e5a98197c35..c9fd8d13c9ed 100644
--- a/packages/react/src/components/FileUploader/Filename.js
+++ b/packages/react/src/components/FileUploader/Filename.tsx
@@ -10,15 +10,51 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Loading from '../Loading';
 import { usePrefix } from '../../internal/usePrefix';
+import { ReactAttr } from '../../types/common';
+
+export type FilenameStatus = 'edit' | 'complete' | 'uploading';
+
+export interface FilenameProps
+  extends Omit<ReactAttr<HTMLElement>, 'tabIndex'> {
+  /**
+   * Specify an id that describes the error to be read by screen readers when the filename is invalid
+   */
+  ['aria-describedby']?: string;
+
+  /**
+   * Provide a description of the SVG icon to denote file upload status
+   */
+  iconDescription?: string;
+
+  /**
+   * Specify if the file is invalid
+   */
+  invalid?: boolean;
+
+  /**
+   * Name of the uploaded file
+   */
+  name?: string;
+
+  /**
+   * Status of the file upload
+   */
+  status?: FilenameStatus;
+
+  /**
+   * Provide a custom tabIndex value for the `<Filename>`
+   */
+  tabIndex?: number | string;
+}
 
 function Filename({
   iconDescription,
   status,
   invalid,
   name,
-  ['aria-describedBy']: ariaDescribedBy,
+  ['aria-describedby']: ariaDescribedBy,
   ...rest
-}) {
+}: FilenameProps) {
   const prefix = usePrefix();
   switch (status) {
     case 'uploading':
@@ -31,10 +67,15 @@ function Filename({
           {invalid && <WarningFilled className={`${prefix}--file-invalid`} />}
           <button
             aria-label={`${iconDescription} - ${name}`}
-            aria-describedby={invalid ? ariaDescribedBy : null}
             className={`${prefix}--file-close`}
             type="button"
-            {...rest}>
+            {...rest}
+            tabIndex={
+              rest.tabIndex !== undefined
+                ? parseInt(rest.tabIndex as string, 10)
+                : undefined
+            }
+            aria-describedby={invalid ? ariaDescribedBy : undefined}>
             <Close />
           </button>
         </>
@@ -83,7 +124,7 @@ Filename.propTypes = {
   /**
    * Provide a custom tabIndex value for the `<Filename>`
    */
-  tabIndex: PropTypes.string,
+  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
 Filename.defaultProps = {
diff --git a/packages/react/src/components/Loading/Loading.js b/packages/react/src/components/Loading/Loading.tsx
similarity index 75%
rename from packages/react/src/components/Loading/Loading.js
rename to packages/react/src/components/Loading/Loading.tsx
index 97d052aa2d4c..8fb7b644d6eb 100644
--- a/packages/react/src/components/Loading/Loading.js
+++ b/packages/react/src/components/Loading/Loading.tsx
@@ -10,6 +10,39 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
+import { ReactAttr } from '../../types/common';
+
+export interface LoadingProps extends ReactAttr<HTMLDivElement> {
+  /**
+   * Specify whether you want the loading indicator to be spinning or not
+   */
+  active?: boolean;
+
+  /**
+   * Provide an optional className to be applied to the containing node
+   */
+  className?: string;
+
+  /**
+   * Specify a description that would be used to best describe the loading state
+   */
+  description?: string;
+
+  /**
+   * @deprecated The prop `id` is no longer needed
+   */
+  id?: string;
+
+  /**
+   * Specify whether you would like the small variant of <Loading>
+   */
+  small?: boolean;
+
+  /**
+   * Specify whether you want the loader to be applied with an overlay
+   */
+  withOverlay: boolean;
+}
 
 function Loading({
   active = true,
@@ -18,7 +51,7 @@ function Loading({
   small = false,
   description = 'loading',
   ...rest
-}) {
+}: LoadingProps) {
   const prefix = usePrefix();
   const loadingClassName = cx(customClassName, {
     [`${prefix}--loading`]: true,