diff --git a/packages/react/src/components/AspectRatio/AspectRatio.js b/packages/react/src/components/AspectRatio/AspectRatio.tsx
similarity index 67%
rename from packages/react/src/components/AspectRatio/AspectRatio.js
rename to packages/react/src/components/AspectRatio/AspectRatio.tsx
index 28ed7c1ee9d3..201f57a6d94d 100644
--- a/packages/react/src/components/AspectRatio/AspectRatio.js
+++ b/packages/react/src/components/AspectRatio/AspectRatio.tsx
@@ -7,22 +7,58 @@
 
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { PropsWithChildren, ReactHTML } from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 
+interface AspectRatioProps {
+  /**
+   * Provide a custom component or string to be rendered as
+   * the outermost node of the component. This is useful if you want
+   * to deviate from the default `div` tag, where you could specify
+   * `section` or `article` instead.
+   *
+   * ```jsx
+   * <AspectRatio as="article">My content</AspectRatio>
+   * ```
+   */
+  as?: keyof ReactHTML;
+
+  /**
+   * Specify a class name for the outermost node
+   * of the component.
+   */
+  className?: string;
+
+  /**
+   * Specify the ratio to be used by the aspect ratio
+   * container. This will  determine what aspect ratio your content
+   * will be displayed in.
+   */
+  ratio?:
+    | '1x1'
+    | '2x3'
+    | '3x2'
+    | '3x4'
+    | '4x3'
+    | '1x2'
+    | '2x1'
+    | '9x16'
+    | '16x9';
+}
+
 /**
  * The AspectRatio component provides a `ratio` prop that will be used to
  * specify the aspect ratio that the children you provide will be displayed in.
  * This is often useful alongside our grid components, or for media assets like
  * images or videos.
  */
-function AspectRatio({
+const AspectRatio = ({
   as: BaseComponent = 'div',
   className: containerClassName,
   children,
   ratio = '1x1',
   ...rest
-}) {
+}: PropsWithChildren<AspectRatioProps>) => {
   const prefix = usePrefix();
   const className = cx(
     containerClassName,
@@ -34,7 +70,7 @@ function AspectRatio({
       {children}
     </BaseComponent>
   );
-}
+};
 
 AspectRatio.propTypes = {
   /**
diff --git a/packages/react/src/components/AspectRatio/index.js b/packages/react/src/components/AspectRatio/index.tsx
similarity index 100%
rename from packages/react/src/components/AspectRatio/index.js
rename to packages/react/src/components/AspectRatio/index.tsx