diff --git a/src/library-authoring/LibraryAuthoringPage.test.tsx b/src/library-authoring/LibraryAuthoringPage.test.tsx
index 9ad458e48a..80d732d981 100644
--- a/src/library-authoring/LibraryAuthoringPage.test.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.test.tsx
@@ -170,7 +170,6 @@ describe('<LibraryAuthoringPage />', () => {
     expect(queryByText('Recently Modified')).not.toBeInTheDocument();
     expect(queryByText('Collections (0)')).not.toBeInTheDocument();
     expect(queryByText('Components (6)')).not.toBeInTheDocument();
-    expect(getByText('There are 6 components in this library')).toBeInTheDocument();
 
     // Navigate to the collections tab
     fireEvent.click(getByRole('tab', { name: 'Collections' }));
@@ -186,7 +185,6 @@ describe('<LibraryAuthoringPage />', () => {
     expect(getByText('Recently Modified')).toBeInTheDocument();
     expect(getByText('Collections (0)')).toBeInTheDocument();
     expect(getByText('Components (6)')).toBeInTheDocument();
-    expect(getByText('There are 6 components in this library')).toBeInTheDocument();
   });
 
   it('show library without components', async () => {
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
index f3f12e257f..6adf82279f 100644
--- a/src/library-authoring/LibraryAuthoringPage.tsx
+++ b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -103,7 +103,7 @@ const LibraryAuthoringPage = () => {
             element={<LibraryHome libraryId={libraryId} filter={{ searchKeywords }} />}
           />
           <Route
-            path={TAB_LIST.components}
+            path={TabList.components}
             element={<LibraryComponents libraryId={libraryId} filter={{ searchKeywords }} variant="full" />}
           />
           <Route
diff --git a/src/library-authoring/components/ComponentCard.jsx b/src/library-authoring/components/ComponentCard.tsx
similarity index 85%
rename from src/library-authoring/components/ComponentCard.jsx
rename to src/library-authoring/components/ComponentCard.tsx
index 6680f8b007..42d05119cb 100644
--- a/src/library-authoring/components/ComponentCard.jsx
+++ b/src/library-authoring/components/ComponentCard.tsx
@@ -1,4 +1,3 @@
-// @ts-check
 import React from 'react';
 import {
   ActionRow,
@@ -9,13 +8,20 @@ import {
   Dropdown,
   Stack,
 } from '@openedx/paragon';
-import PropTypes from 'prop-types';
 import { MoreVert } from '@openedx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import TagCount from '../../generic/tag-count';
 import { getItemIcon, getComponentColor } from '../../generic/block-type-utils';
 
+type ComponentCardProps = {
+  title: string,
+  description: string,
+  tagCount: number,
+  blockType: string,
+  blockTypeDisplayName: string,
+};
+
 const ComponentCardMenu = () => (
   <Dropdown>
     <Dropdown.Toggle
@@ -54,18 +60,17 @@ export const ComponentCardLoading = () => (
 );
 
 export const ComponentCard = ({
-  isLoading,
   title,
   description,
   tagCount,
   blockType,
   blockTypeDisplayName,
-}) => {
+}: ComponentCardProps) => {
   const componentIcon = getItemIcon(blockType);
 
   return (
     <Container className="library-component-card">
-      <Card isLoading={isLoading}>
+      <Card>
         <Card.Header
           className={`library-component-header ${getComponentColor(blockType)}`}
           title={
@@ -98,16 +103,3 @@ export const ComponentCard = ({
     </Container>
   );
 };
-
-ComponentCard.defaultProps = {
-  isLoading: false,
-};
-
-ComponentCard.propTypes = {
-  isLoading: PropTypes.bool,
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  tagCount: PropTypes.number.isRequired,
-  blockType: PropTypes.string.isRequired,
-  blockTypeDisplayName: PropTypes.string.isRequired,
-};
diff --git a/src/library-authoring/components/LibraryComponents.jsx b/src/library-authoring/components/LibraryComponents.tsx
similarity index 96%
rename from src/library-authoring/components/LibraryComponents.jsx
rename to src/library-authoring/components/LibraryComponents.tsx
index 8653eda1fa..2b632d3df8 100644
--- a/src/library-authoring/components/LibraryComponents.jsx
+++ b/src/library-authoring/components/LibraryComponents.tsx
@@ -5,26 +5,26 @@ import { NoComponents, NoSearchResults } from '../EmptyStates';
 import { useLibraryBlockTypes, useLibraryComponentCount, useLibraryComponents } from '../data/apiHook';
 import { ComponentCard, ComponentCardLoading } from './ComponentCard';
 
+type LibraryComponentsProps = {
+  libraryId: string,
+  filter: {
+    searchKeywords: string,
+  },
+  variant: string,
+};
+
 /**
  * Library Components to show components grid
  *
  * Use style to:
  *   - 'full': Show all components with Infinite scroll pagination.
  *   - 'preview': Show first 4 components without pagination.
- *
- * @type {React.FC<{
- *   libraryId: string,
- *   filter: {
- *     searchKeywords: string,
- *   },
- *   variant: 'full'|'preview',
- * }>}
  */
 const LibraryComponents = ({
   libraryId,
   filter: { searchKeywords },
   variant,
-}) => {
+}: LibraryComponentsProps) => {
   const { componentCount } = useLibraryComponentCount(libraryId, searchKeywords);
   const {
     hits,
diff --git a/src/library-authoring/data/api.js b/src/library-authoring/data/api.js
deleted file mode 100644
index ef3a397fad..0000000000
--- a/src/library-authoring/data/api.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// @ts-check
-import { camelCaseObject, getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-
-const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
-/**
- * Get the URL for the content library API.
- * @param {string} libraryId - The ID of the library to fetch.
- */
-export const getContentLibraryApiUrl = (libraryId) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/`;
-/**
- * Get the URL for get block types of library.
- * @param {string} libraryId - The ID of the library to fetch.
- */
-export const getLibraryBlockTypesUrl = (libraryId) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/block_types/`;
-
-/**
- * Fetch a content library by its ID.
- * @param {string} [libraryId] - The ID of the library to fetch.
- * @returns {Promise<import("./types.mjs").ContentLibrary>}
- */
-export async function getContentLibrary(libraryId) {
-  if (!libraryId) {
-    throw new Error('libraryId is required');
-  }
-
-  const { data } = await getAuthenticatedHttpClient().get(getContentLibraryApiUrl(libraryId));
-  return camelCaseObject(data);
-}
-
-/**
- * Fetch block types of a library
- * @param {string} [libraryId]
- * @returns {Promise<import("./types.mjs").LibraryBlockType[]>}
- */
-export async function getLibraryBlockTypes(libraryId) {
-  if (!libraryId) {
-    throw new Error('libraryId is required');
-  }
-
-  const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockTypesUrl(libraryId));
-  return camelCaseObject(data);
-}
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
index 95126d8269..dc66d8ad94 100644
--- a/src/library-authoring/data/api.ts
+++ b/src/library-authoring/data/api.ts
@@ -6,6 +6,10 @@ const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
  * Get the URL for the content library API.
  */
 export const getContentLibraryApiUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/`;
+/**
+ * Get the URL for get block types of library.
+ */
+export const getLibraryBlockTypesUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/block_types/`;
 
 export interface ContentLibrary {
   id: string;
@@ -25,6 +29,11 @@ export interface ContentLibrary {
   license: string;
 }
 
+export interface LibraryBlockType {
+  blockType: string;
+  displayName: string;
+}
+
 /**
  * Fetch a content library by its ID.
  */
@@ -36,3 +45,15 @@ export async function getContentLibrary(libraryId?: string): Promise<ContentLibr
   const { data } = await getAuthenticatedHttpClient().get(getContentLibraryApiUrl(libraryId));
   return camelCaseObject(data);
 }
+
+/**
+ * Fetch block types of a library
+ */
+export async function getLibraryBlockTypes(libraryId?: string): Promise<LibraryBlockType[]> {
+  if (!libraryId) {
+    throw new Error('libraryId is required');
+  }
+
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockTypesUrl(libraryId));
+  return camelCaseObject(data);
+}
diff --git a/src/library-authoring/data/types.mjs b/src/library-authoring/data/types.mjs
deleted file mode 100644
index 7fc4761863..0000000000
--- a/src/library-authoring/data/types.mjs
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
-  * @typedef {Object} ContentLibrary
-  * @property {string} id
-  * @property {string} type
-  * @property {string} org
-  * @property {string} slug
-  * @property {string} title
-  * @property {string} description
-  * @property {number} numBlocks
-  * @property {number} version
-  * @property {Date | null} lastPublished
-  * @property {boolean} allowLti
-  * @property {boolean} allowPublicLearning
-  * @property {boolean} allowPublicRead
-  * @property {boolean} hasUnpublishedChanges
-  * @property {boolean} hasUnpublishedDeletes
-  * @property {string} license
-  */
-
-/**
- * @typedef {Object} LibraryBlockType
- * @property {string} blockType
- * @property {string} displayName
- */