Scripts: Add TypeScript support to linting command

package.json

@@ -292,14 +292,14 @@
 		"*.scss": [
 			"wp-scripts lint-style"
 		],
-		"*.js": [
+		"*.{js,ts,tsx}": [
 			"wp-scripts format-js",
 			"wp-scripts lint-js"
 		],
 		"{docs/{toc.json,tool/*.js},packages/{*/README.md,components/src/*/**/README.md}}": [
 			"node ./docs/tool/index.js"
 		],
-		"packages/**/*.js": [
+		"packages/**/*.{js,ts,tsx}": [
 			"node ./bin/api-docs/update-api-docs.js",
 			"node ./bin/api-docs/are-api-docs-unstaged.js",
 			"node ./bin/packages/lint-staged-typecheck.js"

packages/components/package.json

@@ -67,7 +67,11 @@
 		"tinycolor2": "^1.4.2",
 		"uuid": "^8.3.0"
 	},
+	"peerDependencies": {
+		"@wp-g2/create-styles": "^0.0.154",
+		"reakit-utils": "^0.15.1"
+	},
 	"publishConfig": {
 		"access": "public"
 	}
-}
+}

packages/components/src/ui/control-group/types.ts

@@ -1,6 +1,13 @@
-import { CSSProperties } from 'react';
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { CSSProperties } from 'react';
 
-import { FlexProps } from '../flex/types';
+/**
+ * Internal dependencies
+ */
+import type { FlexProps } from '../flex/types';
 
 export type ControlGroupContext = {
 	isFirst?: boolean;

packages/components/src/ui/control-label/types.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Props as TextProps } from '../text/types';
+import type { Props as TextProps } from '../text/types';
 
 export type Props = TextProps & {
 	isBlock?: boolean;

packages/components/src/ui/elevation/types.ts

@@ -1,4 +1,8 @@
-import { CSSProperties } from 'react';
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { CSSProperties } from 'react';
 
 export type Props = {
 	/**

packages/components/src/ui/flex/types.ts

@@ -1,5 +1,13 @@
-import { CSSProperties } from 'react';
-import { ResponsiveCSSValue } from '../utils/types';
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { ResponsiveCSSValue } from '../utils/types';
 
 export type FlexDirection = ResponsiveCSSValue<
 	CSSProperties[ 'flexDirection' ]

packages/components/src/ui/form-group/types.ts

@@ -1,10 +1,14 @@
-import { CSSProperties, ReactNode, ReactText } from 'react';
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { CSSProperties, ReactNode, ReactText } from 'react';
 
 /**
  * Internal dependencies
  */
-import { Props as ControlLabelProps } from '../control-label/types';
-import { Props as GridProps } from '../grid/types';
+import type { Props as ControlLabelProps } from '../control-label/types';
+import type { Props as GridProps } from '../grid/types';
 
 export type FormGroupLabelProps = ControlLabelProps & {
 	labelHidden?: boolean;

packages/components/src/ui/grid/types.ts

@@ -1,4 +1,8 @@
-import { CSSProperties } from 'react';
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { CSSProperties } from 'react';
 
 type ResponsiveCSSValue< T > = Array< T | undefined > | T;
 

packages/components/src/ui/h-stack/component.js

@@ -5,7 +5,7 @@ import { createComponent } from '../utils';
 import { useHStack } from './hook';
 
 /**
- *`HStack` (Horizontal Stack) arranges child elements in a horizontal line.
+ * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.
  *
  * `HStack` can render anything inside.
  *
@@ -30,8 +30,10 @@ import { useHStack } from './hook';
  * }
  * ```
  */
-export default createComponent( {
+const HStack = createComponent( {
 	as: 'div',
 	useHook: useHStack,
 	name: 'HStack',
 } );
+
+export default HStack;

packages/components/src/ui/h-stack/types.ts

@@ -1,5 +1,13 @@
-import { CSSProperties } from 'react';
-import { FlexProps } from '../flex/types';
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { FlexProps } from '../flex/types';
 
 export type HStackAlignment =
 	| 'bottom'

packages/components/src/ui/text/types.ts

@@ -1,4 +1,12 @@
+/**
+ * Internal dependencies
+ */
 import type { Props as TruncateProps } from '../truncate/types';
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties } from 'react';
 
 type TextAdjustLineHeightForInnerControls =

packages/components/src/ui/utils/types.ts

@@ -1,5 +1,8 @@
-import { As } from 'reakit-utils/types';
-import { ViewOwnProps } from '@wp-g2/create-styles';
+/**
+ * External dependencies
+ */
+import type { As } from 'reakit-utils/types';
+import type { ViewOwnProps } from '@wp-g2/create-styles';
 
 export type Options< T extends As, P extends ViewOwnProps< {}, T > > = {
 	as: T;

packages/components/src/ui/v-stack/types.ts

@@ -1,5 +1,13 @@
-import { CSSProperties } from 'react';
-import { HStackAlignment, Props as HStackProps } from '../h-stack/types';
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { HStackAlignment, Props as HStackProps } from '../h-stack/types';
 
 export type Props = HStackProps & {
 	alignment?: HStackAlignment | CSSProperties[ 'alignItems' ];

packages/eslint-plugin/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+- Add support and configuration for TypeScript files. [#27143](https://github.com/WordPress/gutenberg/pull/27143)
+
 ### New Features
 
 -   Enabled `import/default` and `import/named` rules in the `recommended` ruleset. [#28513](https://github.com/WordPress/gutenberg/pull/28513)

packages/eslint-plugin/configs/recommended.js

@@ -13,12 +13,35 @@ const { config: localPrettierConfig } =
 const prettierConfig = { ...defaultPrettierConfig, ...localPrettierConfig };
 
 module.exports = {
+	settings: {
+		'import/resolver': {
+			node: {
+				extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
+			},
+		},
+		'import/core-modules': [ 'react' ],
+	},
 	extends: [
 		require.resolve( './recommended-with-formatting.js' ),
 		'plugin:prettier/recommended',
 		'prettier/react',
+		'plugin:@typescript-eslint/eslint-recommended',
 	],
+	ignorePatterns: [ '**/*.d.ts' ],
 	rules: {
 		'prettier/prettier': [ 'error', prettierConfig ],
 	},
+	overrides: [
+		{
+			files: [ '**/*.ts', '**/*.tsx' ],
+			parser: '@typescript-eslint/parser',
+			rules: {
+				// Don't require redundant JSDoc types in TypeScript files.
+				'jsdoc/require-param-type': 'off',
+				'jsdoc/require-returns-type': 'off',
+				// handled by TS itself
+				'no-unused-vars': 'off',
+			},
+		},
+	],
 };

packages/eslint-plugin/package.json

@@ -31,6 +31,8 @@
 	],
 	"main": "index.js",
 	"dependencies": {
+		"@typescript-eslint/eslint-plugin": "^4.15.0",
+		"@typescript-eslint/parser": "^4.15.0",
 		"@wordpress/prettier-config": "file:../prettier-config",
 		"babel-eslint": "^10.1.0",
 		"cosmiconfig": "^7.0.0",

packages/react-i18n/README.md

@@ -38,6 +38,14 @@ ReactDom.render(
 You can also instantiate the provider without the `i18n` prop. In that case it will use the
 default `I18n` instance exported from `@wordpress/i18n`.
 
+_Parameters_
+
+-   _props_ ``: i18n provider props.
+
+_Returns_
+
+-   ``: Children wrapped in the I18nProvider.
+
 <a name="useI18n" href="#useI18n">#</a> **useI18n**
 
 React hook providing access to i18n functions. It exposes the `__`, `_x`, `_n`, `_nx`,

packages/react-i18n/src/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * External dependencies
+ */
+// Disable reason: Type-only import, this is fine. See https://github.com/typescript-eslint/typescript-eslint/issues/2661
+// eslint-disable-next-line no-restricted-imports
+import type { ComponentType, PropsWithChildren } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -8,9 +15,7 @@ import {
 	useMemo,
 	useReducer,
 } from '@wordpress/element';
-import { defaultI18n } from '@wordpress/i18n';
-import type { I18n } from '@wordpress/i18n';
-import type { ComponentType, PropsWithChildren } from 'react';
+import { defaultI18n, I18n } from '@wordpress/i18n';
 import type { Subtract } from 'utility-types';
 
 interface I18nContextProps {
@@ -24,6 +29,8 @@ interface I18nContextProps {
 
 /**
  * Utility to make a new context value
+ *
+ * @param i18n
  */
 function makeContextValue( i18n: I18n ): I18nContextProps {
 	return {
@@ -59,8 +66,11 @@ type I18nProviderProps = PropsWithChildren< { i18n: I18n } >;
  *
  * You can also instantiate the provider without the `i18n` prop. In that case it will use the
  * default `I18n` instance exported from `@wordpress/i18n`.
+ *
+ * @param props i18n provider props.
+ * @return Children wrapped in the I18nProvider.
  */
-export function I18nProvider( props: I18nProviderProps ) {
+export function I18nProvider( props: I18nProviderProps ): JSX.Element {
 	const { children, i18n = defaultI18n } = props;
 	const [ update, forceUpdate ] = useReducer( () => [], [] );
 

packages/scripts/CHANGELOG.md

@@ -5,6 +5,9 @@
 ### New Features
 
 -   Default `check-engines` command to the `engines` config in `package.json` file of the current project ([#29066](https://github.com/WordPress/gutenberg/pull/29066)).
+### Breaking Changes
+
+- Lint TypeScript files as part of `lint-js`. [#27143](https://github.com/WordPress/gutenberg/pull/27143)
 
 ### Enhancements
 

packages/scripts/scripts/lint-js.js

@@ -47,11 +47,16 @@ const defaultIgnoreArgs = ! hasIgnoredFiles
 	? [ '--ignore-path', fromConfigRoot( '.eslintignore' ) ]
 	: [];
 
+const defaultExtArgs = hasArgInCLI( '--ext' )
+	? []
+	: [ '--ext', 'js,jsx,ts,tsx' ];
+
 const result = spawn(
 	resolveBin( 'eslint' ),
 	[
 		...defaultConfigArgs,
 		...defaultIgnoreArgs,
+		...defaultExtArgs,
 		...args,
 		...defaultFilesArgs,
 	],

tsconfig.base.json

@@ -21,6 +21,7 @@
 		"noUnusedParameters": true,
 		"noImplicitReturns": true,
 		"noFallthroughCasesInSwitch": true,
+		"importsNotUsedAsValues": "error",
 
 		/* Module Resolution Options */
 		"moduleResolution": "node",