diff --git a/packages/dataviews/src/layouts.js b/packages/dataviews/src/layouts.ts
similarity index 100%
rename from packages/dataviews/src/layouts.js
rename to packages/dataviews/src/layouts.ts
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index 3735eaf0dd2033..e4bcb3440f5854 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -190,12 +190,12 @@ export interface ViewTable extends ViewBase {
 		/**
 		 * The field to use as the primary field.
 		 */
-		primaryField: string;
+		primaryField?: string;
 
 		/**
 		 * The field to use as the media field.
 		 */
-		mediaField: string;
+		mediaField?: string;
 	};
 }
 
@@ -206,12 +206,12 @@ export interface ViewList extends ViewBase {
 		/**
 		 * The field to use as the primary field.
 		 */
-		primaryField: string;
+		primaryField?: string;
 
 		/**
 		 * The field to use as the media field.
 		 */
-		mediaField: string;
+		mediaField?: string;
 	};
 }
 
@@ -222,22 +222,22 @@ export interface ViewGrid extends ViewBase {
 		/**
 		 * The field to use as the primary field.
 		 */
-		primaryField: string;
+		primaryField?: string;
 
 		/**
 		 * The field to use as the media field.
 		 */
-		mediaField: string;
+		mediaField?: string;
 
 		/**
 		 * The fields to use as columns.
 		 */
-		columnFields: string[];
+		columnFields?: string[];
 
 		/**
 		 * The fields to use as badge fields.
 		 */
-		badgeFields: string[];
+		badgeFields?: string[];
 	};
 }
 
diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.tsx
similarity index 78%
rename from packages/dataviews/src/view-actions.js
rename to packages/dataviews/src/view-actions.tsx
index ee65b60c37b075..0e041cc070c525 100644
--- a/packages/dataviews/src/view-actions.js
+++ b/packages/dataviews/src/view-actions.tsx
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -15,6 +20,7 @@ import { settings } from '@wordpress/icons';
 import { unlock } from './lock-unlock';
 import { SORTING_DIRECTIONS, sortLabels } from './constants';
 import { VIEW_LAYOUTS } from './layouts';
+import type { AnyItem, NormalizedField, View } from './types';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -25,7 +31,41 @@ const {
 	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
 } = unlock( componentsPrivateApis );
 
-function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
+interface ViewTypeMenuProps {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	supportedLayouts?: string[];
+}
+
+interface PageSizeMenuProps {
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface FieldsVisibilityMenuProps< Item extends AnyItem > {
+	view: View;
+	onChangeView: ( view: View ) => void;
+	fields: NormalizedField< Item >[];
+}
+
+interface SortMenuProps< Item extends AnyItem > {
+	fields: NormalizedField< Item >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+}
+
+interface ViewActionsProps< Item extends AnyItem > {
+	fields: NormalizedField< Item >[];
+	view: View;
+	onChangeView: ( view: View ) => void;
+	supportedLayouts?: string[];
+}
+
+function ViewTypeMenu( {
+	view,
+	onChangeView,
+	supportedLayouts,
+}: ViewTypeMenuProps ) {
 	let _availableViews = VIEW_LAYOUTS;
 	if ( supportedLayouts ) {
 		_availableViews = _availableViews.filter( ( _view ) =>
@@ -41,7 +81,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 			trigger={
 				<DropdownMenuItem
 					suffix={
-						<span aria-hidden="true">{ activeView.label }</span>
+						<span aria-hidden="true">{ activeView?.label }</span>
 					}
 				>
 					<DropdownMenuItemLabel>
@@ -58,11 +98,18 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 						name="view-actions-available-view"
 						checked={ availableView.type === view.type }
 						hideOnClick
-						onChange={ ( e ) => {
-							onChangeView( {
-								...view,
-								type: e.target.value,
-							} );
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => {
+							switch ( e.target.value ) {
+								case 'list':
+								case 'grid':
+								case 'table':
+									return onChangeView( {
+										...view,
+										type: e.target.value,
+										layout: {},
+									} );
+							}
+							throw new Error( 'Invalid dataview' );
 						} }
 					>
 						<DropdownMenuItemLabel>
@@ -76,7 +123,7 @@ function ViewTypeMenu( { view, onChangeView, supportedLayouts } ) {
 }
 
 const PAGE_SIZE_VALUES = [ 10, 20, 50, 100 ];
-function PageSizeMenu( { view, onChangeView } ) {
+function PageSizeMenu( { view, onChangeView }: PageSizeMenuProps ) {
 	return (
 		<DropdownMenu
 			trigger={
@@ -114,7 +161,11 @@ function PageSizeMenu( { view, onChangeView } ) {
 	);
 }
 
-function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
+function FieldsVisibilityMenu< Item extends AnyItem >( {
+	view,
+	onChangeView,
+	fields,
+}: FieldsVisibilityMenuProps< Item > ) {
 	const hidableFields = fields.filter(
 		( field ) =>
 			field.enableHiding !== false && field.id !== view.layout.mediaField
@@ -164,7 +215,11 @@ function FieldsVisibilityMenu( { view, onChangeView, fields } ) {
 	);
 }
 
-function SortMenu( { fields, view, onChangeView } ) {
+function SortMenu< Item extends AnyItem >( {
+	fields,
+	view,
+	onChangeView,
+}: SortMenuProps< Item > ) {
 	const sortableFields = fields.filter(
 		( field ) => field.enableSorting !== false
 	);
@@ -248,12 +303,12 @@ function SortMenu( { fields, view, onChangeView } ) {
 	);
 }
 
-const ViewActions = memo( function ViewActions( {
+const ViewActions = memo( function ViewActions< Item extends AnyItem >( {
 	fields,
 	view,
 	onChangeView,
 	supportedLayouts,
-} ) {
+}: ViewActionsProps< Item > ) {
 	return (
 		<DropdownMenu
 			trigger={
diff --git a/packages/dataviews/src/view-grid.tsx b/packages/dataviews/src/view-grid.tsx
index e3bb2920e82ba3..3f09244da69edd 100644
--- a/packages/dataviews/src/view-grid.tsx
+++ b/packages/dataviews/src/view-grid.tsx
@@ -44,7 +44,7 @@ interface GridItemProps< Item extends AnyItem > {
 	primaryField?: NormalizedField< Item >;
 	visibleFields: NormalizedField< Item >[];
 	badgeFields: NormalizedField< Item >[];
-	columnFields: string[];
+	columnFields?: string[];
 }
 
 function GridItem< Item extends AnyItem >( {