Bump typescript from 5.9.3 to 6.0.2 in the lint group across 1 directory (#357)

dependabot[bot] · colinrotherham · web-flow · commit ab0f0382b501 · 2026-04-02T14:12:16.000Z
* Bump typescript from 5.9.3 to 6.0.2 in the lint group Bumps the lint group with 1 update: [typescript](https://github.com/microsoft/TypeScript). Updates `typescript` from 5.9.3 to 6.0.2 - [Release notes](https://github.com/microsoft/TypeScript/releases) - [Commits](microsoft/TypeScript@v5.9.3...v6.0.2) --- updated-dependencies: - dependency-name: typescript dependency-version: 6.0.2 dependency-type: direct:development update-type: version-update:semver-major dependency-group: lint ... Signed-off-by: dependabot[bot] <support@github.com> * Resolve TypeScript v6 issues * Run `eslint —fix` --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Colin Rotherham <work@colinr.com>
diff --git a/.storybook/storybook.d.ts b/.storybook/storybook.d.ts
@@ -0,0 +1 @@
+declare module '*.scss';
diff --git a/eslint.config.js b/eslint.config.js
@@ -18,11 +18,11 @@ export default defineConfig([
   {
     files: ['**/*.{js,mjs,ts,tsx}'],
     extends: [
-      configPrettier,
       eslint.configs.recommended,
-      pluginTypeScript.configs.recommended,
       pluginImport.flatConfigs.recommended,
       pluginImport.flatConfigs.typescript,
+      pluginTypeScript.configs.recommended,
+      configPrettier,
     ],
     languageOptions: {
       parser: pluginTypeScript.parser,
diff --git a/package.json b/package.json
@@ -81,13 +81,14 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/eslint": "^9.6.1",
+    "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/jest": "^30.0.0",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "babel-jest": "^30.3.0",
-    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-module-resolver": "^5.0.3",
     "babel-plugin-replace-import-extension": "^1.1.5",
     "classnames": "^2.5.1",
     "eslint": "^9.39.4",
@@ -111,8 +112,8 @@
     "sass-embedded": "^1.97.2",
     "storybook": "^10.2.14",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.1",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
     "vite": "^7.3.1",
     "vite-tsconfig-paths": "^6.1.1"
   },
diff --git a/src/components/form-elements/checkboxes/Checkboxes.tsx b/src/components/form-elements/checkboxes/Checkboxes.tsx
@@ -35,7 +35,7 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
   const [instance, setInstance] = useState<CheckboxesModule>();
 
   const _boxReferences: string[] = [];
-  let _boxCount: number = 0;
+  let _boxCount = 0;
   let _boxIds: Record<string, string> = {};
 
   useImperativeHandle(forwardedRef, () => moduleRef.current!, [moduleRef]);
@@ -61,7 +61,7 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
   };
 
   const leaseReference = (): string => {
-    let reference: string = '';
+    let reference = '';
     do {
       reference = generateRandomName();
     } while (_boxReferences.includes(reference));
diff --git a/src/components/form-elements/checkboxes/components/CheckboxesDivider.tsx b/src/components/form-elements/checkboxes/components/CheckboxesDivider.tsx
@@ -1,8 +1,8 @@
 import { type FC } from 'react';
 
-export type CheckboxesDividerProps = {
+export interface CheckboxesDividerProps {
   dividerText?: string;
-};
+}
 
 export const CheckboxesDivider: FC<CheckboxesDividerProps> = ({ dividerText = 'or' }) => (
   <div className="nhsuk-checkboxes__divider">{dividerText}</div>
diff --git a/src/components/form-elements/date-input/DateInput.tsx b/src/components/form-elements/date-input/DateInput.tsx
@@ -17,11 +17,11 @@ import { DateInputDay, DateInputMonth, DateInputYear } from './components/index.
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export type DateInputValue = {
+export interface DateInputValue {
   day: string;
   month: string;
   year: string;
-};
+}
 
 export interface DateInputChangeEvent extends Omit<
   ChangeEvent<DateInputElement>,
diff --git a/src/components/form-elements/date-input/DateInputContext.ts b/src/components/form-elements/date-input/DateInputContext.ts
@@ -2,14 +2,14 @@
 
 import { createContext, type ChangeEvent, type ReactElement } from 'react';
 
-export type IDateInputContext = {
+export interface IDateInputContext {
   id: string;
   name: string;
   error: string | ReactElement | undefined;
   value?: { day?: string; month?: string; year?: string };
   defaultValue?: { day?: string; month?: string; year?: string };
   handleChange: (inputType: 'day' | 'month' | 'year', event: ChangeEvent<HTMLInputElement>) => void;
-};
+}
 
 export const DateInputContext = createContext<IDateInputContext>({
   id: '',
diff --git a/src/components/form-elements/radios/Radios.tsx b/src/components/form-elements/radios/Radios.tsx
@@ -35,7 +35,7 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
   const [instance, setInstance] = useState<RadiosModule>();
   const [selectedRadio, setSelectedRadio] = useState<string>();
 
-  const _radioReferences: Array<string> = [];
+  const _radioReferences: string[] = [];
   let _radioCount = 0;
   let _radioIds: Record<string, string> = {};
 
@@ -63,7 +63,7 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
   };
 
   const leaseReference = (): string => {
-    let reference: string = '';
+    let reference = '';
     do {
       reference = generateRandomName();
     } while (_radioReferences.includes(reference));
diff --git a/src/components/form-elements/radios/RadiosContext.ts b/src/components/form-elements/radios/RadiosContext.ts
@@ -2,14 +2,14 @@
 
 import { createContext } from 'react';
 
-export type IRadiosContext = {
+export interface IRadiosContext {
   name: string;
   selectedRadio?: string;
   getRadioId: (reference: string) => string;
   setSelected: (radioRef: string) => void;
   leaseReference: () => string;
   unleaseReference: (reference: string) => void;
-};
+}
 
 export const RadiosContext = createContext<IRadiosContext>({
   name: '',
diff --git a/src/components/navigation/breadcrumb/Breadcrumb.tsx b/src/components/navigation/breadcrumb/Breadcrumb.tsx
@@ -14,8 +14,8 @@ const BreadcrumbComponent = forwardRef<HTMLElement, BreadcrumbProps>((props, for
 
   // Split off any "Item" components
   const { ItemChildren, OtherChildren } = Children.toArray(children).reduce<{
-    ItemChildren: Array<ReactNode>;
-    OtherChildren: Array<ReactNode>;
+    ItemChildren: ReactNode[];
+    OtherChildren: ReactNode[];
   }>(
     (prev, child) => {
       if (childIsOfComponentType(child, BreadcrumbItem)) {
diff --git a/src/components/typography/__tests__/Heading.test.tsx b/src/components/typography/__tests__/Heading.test.tsx
@@ -57,7 +57,7 @@ describe('Heading', () => {
   });
 
   it('console.warn when headingLevel is invalid', () => {
-    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
     // @ts-expect-error - testing invalid prop
     render(<Heading headingLevel="h7" />);
 
diff --git a/src/components/utils/FormGroupContext.ts b/src/components/utils/FormGroupContext.ts
@@ -2,10 +2,10 @@
 
 import { createContext } from 'react';
 
-export type IFormGroupContext = {
+export interface IFormGroupContext {
   passError: (componentId: string, error: boolean) => void;
   registerComponent: (componentId: string, deregister?: boolean) => void;
-};
+}
 
 export const FormGroupContext = createContext<IFormGroupContext>({
   passError: () => {},
diff --git a/src/components/utils/__tests__/FormGroup.test.tsx b/src/components/utils/__tests__/FormGroup.test.tsx
@@ -202,7 +202,7 @@ describe('FormGroup', () => {
 
     expect(renderProps?.id).toHaveLength(11);
     expect(renderProps?.id).toContain('input');
-    expect(renderProps!['aria-describedby']).toBe(`${renderProps?.id}--error-message`);
+    expect(renderProps?.['aria-describedby']).toBe(`${renderProps?.id}--error-message`);
 
     expect(container.querySelector('.nhsuk-error-message')?.getAttribute('id')).toBe(
       `${renderProps?.id}--error-message`,
@@ -231,7 +231,7 @@ describe('FormGroup', () => {
     );
 
     expect(renderProps?.id).toBe('testID');
-    expect(renderProps!['aria-describedby']).toBe(`testID--error-message`);
+    expect(renderProps?.['aria-describedby']).toBe(`testID--error-message`);
 
     expect(container.querySelector('.nhsuk-error-message')?.getAttribute('id')).toBe(
       'testID--error-message',
diff --git a/src/patterns/nav-a-z/NavAZ.tsx b/src/patterns/nav-a-z/NavAZ.tsx
@@ -8,9 +8,9 @@ const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 const processLetters = (
   children: ReactNode,
   fullAlphabet: boolean | undefined,
-  removedLetters: Array<string> | undefined,
-  disabledLetters: Array<string> | undefined,
-  letters: Array<string> | undefined,
+  removedLetters: string[] | undefined,
+  disabledLetters: string[] | undefined,
+  letters: string[] | undefined,
 ) => {
   const letterMap = (letter: string) => {
     if (removedLetters && removedLetters.includes(letter)) {
@@ -39,9 +39,9 @@ const processLetters = (
 
 export interface NavAZProps extends ComponentPropsWithoutRef<'div'> {
   fullAlphabet?: boolean;
-  removedLetters?: Array<string>;
-  disabledLetters?: Array<string>;
-  letters?: Array<string>;
+  removedLetters?: string[];
+  disabledLetters?: string[];
+  letters?: string[];
 }
 
 const NavAZComponent = forwardRef<HTMLElement, NavAZProps>((props, forwardedRef) => {
diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx
@@ -29,11 +29,11 @@ const meta: Meta<typeof Checkboxes> = {
 export default meta;
 type Story = StoryObj<typeof Checkboxes>;
 
-type CheckboxState = {
+interface CheckboxState {
   box1: { name?: string; id?: string };
   box2: { name?: string; id?: string };
   box3: { name?: string; id?: string };
-};
+}
 
 export const Standard: Story = {
   name: 'Checkboxes default',
@@ -838,9 +838,9 @@ export const OnChangeAndOnInputHandlers: Story = {
     },
   },
   render: function OnChangeAndOnInputHandlersRender() {
-    const [changeEventLog, setChangeEventLog] = useState<Array<string>>([]);
-    const [inputEventLog, setInputEventLog] = useState<Array<string>>([]);
-    const [currentValue, setCurrentValue] = useState<Array<string>>([]);
+    const [changeEventLog, setChangeEventLog] = useState<string[]>([]);
+    const [inputEventLog, setInputEventLog] = useState<string[]>([]);
+    const [currentValue, setCurrentValue] = useState<string[]>([]);
 
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       const target = e.target as HTMLInputElement;
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -3,12 +3,15 @@
     "allowJs": true,
     "checkJs": true,
     "esModuleInterop": true,
-    "module": "NodeNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "noEmit": true,
+    "noImplicitThis": true,
     "noUnusedLocals": true,
     "resolveJsonModule": true,
+    "resolvePackageJsonImports": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "strictBindCallApply": true,
     "strictFunctionTypes": true,
     "strictNullChecks": true,
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -7,7 +7,6 @@
     "lib": ["ESNext", "DOM"],
     "outDir": "./dist",
     "rootDir": "./src",
-    "strict": true,
     "sourceMap": true,
     "target": "ES2015",
     "types": ["node"]
diff --git a/tsconfig.dev.json b/tsconfig.dev.json
@@ -2,8 +2,6 @@
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsxdev",
-    "module": "ESNext",
-    "moduleResolution": "Node",
     "types": ["jest", "node"]
   },
   "include": [
diff --git a/yarn.lock b/yarn.lock
