Update ESLint config for TypeScript files (#40584)

* Update ESLint config for TypeScript files

* Change no-undefined-types to warning

* Remove unsed eslint-disable

* Restore 'jsdoc/require-returns'

* Turn off jsdoc/no-undefined-types

* Fix lints caused by turning off "jsdoc/no-undefined-types"

* Clean up jetpack-mu-wpcom/eslint.config.mjs

* Add changelog

* Restore plugins/jetpack/.eslintignore

* Turn back jsdoc/no-undefined-types ON with disabled reporting

* Re-enable param rules for now

projects/js-packages/ai-client/changelog/update-eslint-config-for-ts-files

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed lints following ESLint rule changes for TS

projects/js-packages/ai-client/src/logo-generator/components/fair-usage-notice.tsx

@@ -1,9 +1,5 @@
 import { Notice } from '@wordpress/components';
 import useFairUsageNoticeMessage from '../hooks/use-fair-usage-notice-message.js';
-/**
- * Types
- */
-import type { ReactElement } from 'react';
 
 type FairUsageNoticeProps = {
 	variant?: 'error' | 'muted';
@@ -13,7 +9,7 @@ type FairUsageNoticeProps = {
  * The fair usage notice component.
  * @param {FairUsageNoticeProps}         props         - Fair usage notice component props.
  * @param {FairUsageNoticeProps.variant} props.variant - The variant of the notice to render.
- * @return {ReactElement} the Notice component with the fair usage message.
+ * @return the Notice component with the fair usage message.
  */
 export const FairUsageNotice = ( { variant = 'error' }: FairUsageNoticeProps ) => {
 	const useFairUsageNoticeMessageElement = useFairUsageNoticeMessage();

projects/js-packages/ai-client/src/logo-generator/store/reducer.ts

@@ -30,12 +30,7 @@ import {
 	ACTION_SET_IS_LOADING_HISTORY,
 } from './constants.js';
 import INITIAL_STATE from './initial-state.js';
-import type {
-	AiFeatureStateProps,
-	LogoGeneratorStateProp,
-	RequestError,
-	TierLimitProp,
-} from './types.js';
+import type { AiFeatureStateProps, RequestError, TierLimitProp } from './types.js';
 import type { SiteDetails } from '../types.js';
 
 /**

projects/js-packages/charts/changelog/update-eslint-config-for-ts-files

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed lints following ESLint rule changes for TS

projects/js-packages/components/changelog/update-eslint-config-for-ts-files

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Fixed ESLint warning
+
+

projects/js-packages/components/components/boost-score-graph/annotations-plugin.ts

@@ -3,11 +3,12 @@ import { Annotation } from '.';
 
 import './style-annotation.scss';
 
-// eslint-disable-next-line jsdoc/require-returns
 /**
  * Custom tooltips plugin for uPlot.
  *
- * @param {Annotation[]} annotations - The periods to display in the tooltip.
+ * @param annotations - The periods to display in the tooltip.
+ *
+ * @return The plugin object.
  */
 export function annotationsPlugin( annotations: Annotation[] ) {
 	let containerEl, annotationsContainer;

projects/js-packages/components/components/boost-score-graph/tooltips-plugin.ts

@@ -6,10 +6,10 @@ import { Period } from '.';
 /**
  * Custom tooltips plugin for uPlot.
  *
- * @param {Period[]} periods - The periods to display in the tooltip.
- * @return {object} The uPlot plugin object with hooks.
+ * @param periods - The periods to display in the tooltip.
+ * @return The uPlot plugin object with hooks.
  */
-export function tooltipsPlugin( periods ) {
+export function tooltipsPlugin( periods: Period[] ) {
 	const reactRoot = document.createElement( 'div' );
 	const container = document.createElement( 'div' );
 	let reactDom;

projects/packages/jetpack-mu-wpcom/changelog/update-eslint-config-for-ts-files

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed lints following ESLint rule changes for TS

projects/packages/jetpack-mu-wpcom/eslint.config.mjs

@@ -1,4 +1,4 @@
-import makeBaseConfig, { typescriptFiles, makeEnvConfig } from 'jetpack-js-tools/eslintrc/base.mjs';
+import makeBaseConfig, { makeEnvConfig } from 'jetpack-js-tools/eslintrc/base.mjs';
 
 export default [
 	...makeBaseConfig( import.meta.url ),
@@ -9,12 +9,4 @@ export default [
 			'react/jsx-no-bind': 'off',
 		},
 	},
-	{
-		files: typescriptFiles,
-		rules: {
-			// Not needed for TypeScript.
-			'jsdoc/require-param-type': 'off',
-			'jsdoc/require-returns-type': 'off',
-		},
-	},
 ];

projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/auto-firewall-status.tsx

@@ -9,7 +9,6 @@ import ShieldInactive from './assets/shield-inactive.svg';
 import ShieldOff from './assets/shield-off.svg';
 import ShieldSuccess from './assets/shield-success.svg';
 import { useProtectTooltipCopy } from './use-protect-tooltip-copy';
-import type { ReactElement, PropsWithChildren } from 'react';
 
 export const AutoFirewallStatus = () => {
 	const slug = 'protect';
@@ -35,10 +34,10 @@ export const AutoFirewallStatus = () => {
 /**
  * WafStatus component
  *
- * @param {PropsWithChildren}             props        - The component props
- * @param {'active' | 'inactive' | 'off'} props.status - The status of the WAF
+ * @param props        - The component props
+ * @param props.status - The status of the WAF
  *
- * @return {ReactElement} rendered component
+ * @return rendered component
  */
 function WafStatus( { status }: { status: 'active' | 'inactive' | 'off' } ) {
 	const slug = 'protect';

projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/logins-blocked-status.tsx

@@ -10,7 +10,6 @@ import baseStyles from '../style.module.scss';
 import ShieldOff from './assets/shield-off.svg';
 import ShieldPartial from './assets/shield-partial.svg';
 import { useProtectTooltipCopy } from './use-protect-tooltip-copy';
-import type { ReactElement, PropsWithChildren } from 'react';
 
 export const LoginsBlockedStatus = () => {
 	const slug = 'protect';
@@ -43,10 +42,10 @@ export const LoginsBlockedStatus = () => {
 /**
  * BlockedStatus component
  *
- * @param {PropsWithChildren}             props        - The component props
- * @param {'active' | 'inactive' | 'off'} props.status - The status of Brute Force Protection
+ * @param props        - The component props
+ * @param props.status - The status of Brute Force Protection
  *
- * @return {ReactElement} rendered component
+ * @return rendered component
  */
 function BlockedStatus( { status }: { status: 'active' | 'inactive' | 'off' } ) {
 	const {

projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/scan-threats-status.tsx

@@ -14,7 +14,6 @@ import ShieldOff from './assets/shield-off.svg';
 import ShieldPartial from './assets/shield-partial.svg';
 import ShieldSuccess from './assets/shield-success.svg';
 import { useProtectTooltipCopy } from './use-protect-tooltip-copy';
-import type { PropsWithChildren, ReactElement } from 'react';
 
 export const ScanAndThreatStatus = () => {
 	const slug = 'protect';
@@ -69,11 +68,11 @@ export const ScanAndThreatStatus = () => {
 /**
  * ThreatStatus component
  *
- * @param {PropsWithChildren} props                     - The component props
- * @param {number}            props.numThreats          - The number of threats
- * @param {number}            props.criticalThreatCount - The number of critical threats
+ * @param props                     - The component props
+ * @param props.numThreats          - The number of threats
+ * @param props.criticalThreatCount - The number of critical threats
  *
- * @return {ReactElement} rendered component
+ * @return  rendered component
  */
 function ThreatStatus( {
 	numThreats,
@@ -171,10 +170,10 @@ function ThreatStatus( {
 /**
  * ScanStatus component
  *
- * @param {PropsWithChildren}             props        - The component props
- * @param {'success' | 'partial' | 'off'} props.status - The number of threats
+ * @param props        - The component props
+ * @param props.status - The number of threats
  *
- * @return { ReactElement} rendered component
+ * @return  rendered component
  */
 function ScanStatus( { status }: { status: 'success' | 'partial' | 'off' } ) {
 	const tooltipContent = useProtectTooltipCopy();

projects/packages/my-jetpack/_inc/data/use-simple-mutation.ts

@@ -2,12 +2,7 @@ import { useMutation } from '@tanstack/react-query';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { useFetchingErrorNotice } from './notices/use-fetching-error-notice';
-import type {
-	UseMutationOptions,
-	UseMutateFunction,
-	// This variable is being used as a type declaration
-	UseMutationResult,
-} from '@tanstack/react-query';
+import type { UseMutationOptions, UseMutateFunction } from '@tanstack/react-query';
 import type { APIFetchOptions } from '@wordpress/api-fetch';
 
 export type APIFetchOptionsWithQueryParams = APIFetchOptions & {
@@ -33,7 +28,7 @@ export type MutateCallback = UseMutateFunction<
  * @param {APIFetchOptions}                       params.query          - The options to be passed to the API fetch function for the mutation.
  * @param {Pick<UseMutationOptions, 'onSuccess'>} [params.options]      - Optional. Mutation options from react-query, currently supports only the 'onSuccess' option.
  * @param {string}                                [params.errorMessage] - Optional. A custom error message that can be displayed if the mutation fails.
- * @return {UseMutationResult<T>} The result object from the useMutation hook, containing data and state information about the mutation (e.g., isPending, isError).
+ * @return {import('@tanstack/react-query').UseMutationResult<T>} The result object from the useMutation hook, containing data and state information about the mutation (e.g., isPending, isError).
  */
 
 type QueryParams< T, E, V > = {

projects/packages/my-jetpack/_inc/data/use-simple-query.ts

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import apiFetch from '@wordpress/api-fetch';
 import { useFetchingErrorNotice } from './notices/use-fetching-error-notice';
 import type { WP_Error } from './types';
-import type { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
+import type { UseQueryOptions } from '@tanstack/react-query';
 import type { APIFetchOptions } from '@wordpress/api-fetch';
 
 /**
@@ -18,7 +18,7 @@ import type { APIFetchOptions } from '@wordpress/api-fetch';
  * @param {APIFetchOptions}                  params.query          - The options to be passed to the API fetch function.
  * @param {Pick<UseQueryOptions, 'enabled'>} [params.options]      - Optional. Query options from react-query, currently supports only the 'enabled' option.
  * @param {string}                           [params.errorMessage] - Optional. A custom error message that can be displayed if the query fails.
- * @return {UseQueryResult<T>} The result object from the useQuery hook, containing data and state information about the query (e.g., isLoading, isError).
+ * @return {import('@tanstack/react-query').UseQueryResult<T>} The result object from the useQuery hook, containing data and state information about the query (e.g., isLoading, isError).
  */
 type QueryParams = {
 	name: string;

projects/packages/my-jetpack/changelog/update-eslint-config-for-ts-files

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed lints following ESLint rule changes for TS

projects/packages/videopress/changelog/update-eslint-config-for-ts-files

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed lints following ESLint rule changes for TS

projects/packages/videopress/src/client/admin/components/video-thumbnail-selector-modal/index.tsx

@@ -5,7 +5,7 @@ import { Button, ThemeProvider, useBreakpointMatch } from '@automattic/jetpack-c
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import { useState, ReactNode } from 'react';
+import { useState } from 'react';
 /**
  * Internal dependencies
  */
@@ -17,7 +17,7 @@ import { VideoThumbnailSelectorModalProps } from './types';
  * Video Thumbnail Selector component
  *
  * @param {VideoThumbnailSelectorModalProps} props - Component props.
- * @return {ReactNode} - VideoThumbnailSelector react component.
+ * @return - VideoThumbnailSelector react component.
  */
 const VideoThumbnailSelectorModal = ( {
 	url,

projects/packages/videopress/src/client/admin/components/video-upload-area/index.tsx

@@ -13,16 +13,12 @@ import { usePlan } from '../../hooks/use-plan';
 import useSelectVideoFiles from '../../hooks/use-select-video-files';
 import styles from './style.module.scss';
 import { VideoUploadAreaProps } from './types';
-/**
- * Types
- */
-import type { ReactNode } from 'react';
 
 /**
  * Video Upload Area component
  *
  * @param {VideoUploadAreaProps} props - Component props.
- * @return {ReactNode} - VideoUploadArea react component.
+ * @return - VideoUploadArea react component.
  */
 const VideoUploadArea = ( { className, onSelectFiles }: VideoUploadAreaProps ) => {
 	const [ isSm ] = useBreakpointMatch( 'sm' );

projects/plugins/crm/changelog/update-eslint-config-for-ts-files

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fixed lints following ESLint rule changes for TS

projects/plugins/crm/src/js/data/hooks/queries.ts

@@ -1,12 +1,12 @@
-import { useQuery, UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { getAutomationWorkflows } from 'crm/data/query-functions';
 import { Workflow } from 'crm/state/automations-admin/types';
 
 /**
  * Gets the Automation Workflows.
  *
  * @param {Function} hydrate - A function which takes an array of workflows and hydrates the store with them.
- * @return {UseQueryResult} - The result of the query.
+ * @return {import('@tanstack/react-query').UseQueryResult} - The result of the query.
  */
 export const useGetAutomationWorkflows = ( hydrate: ( workflows: Workflow[] ) => void ) =>
 	useQuery( {

projects/plugins/crm/src/js/state/automations-admin/util.ts

@@ -1,10 +1,10 @@
-import { Workflow, ServerPreparedWorkflow } from 'crm/state/automations-admin/types';
+import { Workflow } from 'crm/state/automations-admin/types';
 
 /**
  * Gets a workflow which has been prepared for sending to the server.
  *
  * @param {Workflow} workflow - The workflow to prepare
- * @return {ServerPreparedWorkflow} The prepared workflow
+ * @return {import('crm/state/automations-admin/types').ServerPreparedWorkflow} The prepared workflow
  */
 export const getServerPreparedWorkflow = ( workflow: Workflow ) => {
 	return {

projects/plugins/jetpack/changelog/update-eslint-config-for-ts-files

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Fixed lints following ESLint rule changes for TS

projects/plugins/jetpack/extensions/blocks/ai-assistant/components/ai-assistant-toolbar-dropdown/index.tsx

@@ -23,7 +23,6 @@ import './style.scss';
 import type { AiAssistantDropdownOnChangeOptionsArgProps } from './dropdown-content';
 import type { ExtendedBlockProp } from '../../extensions/constants';
 import type { PromptTypeProp } from '../../lib/prompt';
-import type { ReactElement } from 'react';
 
 const debug = debugFactory( 'jetpack-ai-assistant:dropdown' );
 
@@ -35,7 +34,7 @@ type AiAssistantBlockToolbarDropdownContentProps = {
 /**
  * The dropdown component with logic for the AI Assistant block.
  * @param {AiAssistantBlockToolbarDropdownContentProps} props - The props.
- * @return {ReactElement} The React content of the dropdown.
+ * @return The React content of the dropdown.
  */
 function AiAssistantBlockToolbarDropdownContent( {
 	onClose,
@@ -165,7 +164,7 @@ type AiAssistantBlockToolbarDropdownProps = {
 /**
  * The AI Assistant dropdown component.
  * @param {AiAssistantBlockToolbarDropdownProps} props - The props.
- * @return {ReactElement} The AI Assistant dropdown component.
+ * @return The AI Assistant dropdown component.
  */
 export default function AiAssistantBlockToolbarDropdown( {
 	blockType,

tools/js-tools/eslintrc/base.mjs

@@ -325,6 +325,13 @@ export default function makeBaseConfig( configurl, opts = {} ) {
 					'error',
 					{ allowInterfaces: 'with-single-extends' },
 				],
+				// Mark types in jsdoc as used without reporting about any that are undefined.
+				'jsdoc/no-undefined-types': [ 'warn', { disableReporting: true } ],
+				// TS should mostly have the type set.
+				'jsdoc/require-param-type': 'off',
+				'jsdoc/require-property-type': 'off',
+				// Let us use TS return type for better inference
+				'jsdoc/require-returns-type': 'off',
 			},
 		} ),
 		// Jest.