Convert @ts-ignore to @ts-expect-error

code/addons/actions/src/preview/action.ts

@@ -20,7 +20,7 @@ const isReactSyntheticEvent = (e: unknown): e is SyntheticEvent =>
 const serializeArg = <T>(a: T) => {
   if (isReactSyntheticEvent(a)) {
     const e: SyntheticEvent = Object.create(
-      // @ts-ignore
+      // @ts-expect-error (Converted from ts-ignore)
       a.constructor.prototype,
       Object.getOwnPropertyDescriptors(a)
     );

code/addons/docs/angular/index.js

@@ -2,6 +2,6 @@
 /* global window */
 
 export const setCompodocJson = (compodocJson) => {
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };

code/addons/docs/src/preset.ts

@@ -145,7 +145,7 @@ export async function webpack(
 export const storyIndexers = async (indexers: StoryIndexer[] | null) => {
   const mdxIndexer = async (fileName: string, opts: IndexerOptions) => {
     let code = (await fs.readFile(fileName, 'utf-8')).toString();
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
     const { compile } = global.FEATURES?.previewMdx2
       ? await import('@storybook/mdx2-csf')
       : await import('@storybook/mdx1-csf');

code/addons/jest/src/shared.test.ts

@@ -27,7 +27,7 @@ describe('defineJestParameter', () => {
   });
 
   test('returns null if filename is a module ID that cannot be inferred from', () => {
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
     expect(defineJestParameter({ fileName: 1234 })).toBeNull();
   });
 });

code/addons/links/src/react/components/link.test.tsx

@@ -14,7 +14,7 @@ jest.mock('global', () => ({
       search: 'search',
     },
   },
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   window: global,
   __STORYBOOK_STORY_STORE__: {
     getSelection: jest.fn(() => ({ id: 1 })),

code/addons/links/src/utils.test.ts

@@ -5,9 +5,9 @@ import { linkTo, hrefTo } from './utils';
 
 jest.mock('@storybook/addons');
 jest.mock('global', () => ({
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   document: global.document,
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   window: global,
 }));
 

code/addons/links/src/utils.ts

@@ -36,9 +36,9 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string>
   return new Promise((resolve) => {
     const { location } = document;
     const query = parseQuery(location.search);
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
     const existingId = [].concat(query.id)[0];
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
     const titleToLink = title || existingId.split('--', 2)[0];
     const id = toId(titleToLink, name);
     const url = `${location.origin + location.pathname}?${Object.entries({ ...query, id })

code/addons/storyshots/storyshots-core/src/api/ensureOptionsDefaults.ts

@@ -25,7 +25,6 @@ function getIntegrityOptions({ integrityOptions }: StoryshotsOptions) {
   };
 }
 
-// @ts-ignore
 function ensureOptionsDefaults(options: StoryshotsOptions) {
   const {
     suite = 'Storyshots',

code/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.ts

@@ -52,7 +52,7 @@ function integrityTest(integrityOptions: any, stories2snapsConverter: any) {
       const snapshotExtension = stories2snapsConverter.getSnapshotExtension();
       const storyshots = glob.sync(`**/*${snapshotExtension}`, integrityOptions);
 
-      // @ts-ignore
+      // @ts-expect-error (Converted from ts-ignore)
       expect(storyshots).notToBeAbandoned(stories2snapsConverter);
     });
   });

code/addons/storyshots/storyshots-core/src/frameworks/svelte/renderTree.ts

@@ -1,6 +1,5 @@
 /* eslint-disable camelcase */
 import global from 'global';
-// @ts-ignore
 import { set_current_component } from 'svelte/internal';
 
 const { document } = global;

code/addons/storyshots/storyshots-core/src/frameworks/vue/renderTree.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import Vue from 'vue';
 
 // this is defined in @storybook/vue but not exported,
@@ -14,7 +13,7 @@ function getRenderedTree(story: any) {
     },
   });
 
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   vm[VALUES] = story.initialArgs;
 
   return vm.$mount().$el;

code/examples/angular-cli/.storybook/preview.ts

@@ -2,7 +2,6 @@
 import { setCompodocJson } from '@storybook/addon-docs/angular';
 import addCssWarning from '../src/cssWarning';
 
-// @ts-ignore
 import docJson from '../documentation.json';
 // remove ButtonComponent to test #12009
 const filtered = !docJson?.components

code/examples/cra-kitchen-sink/.storybook/main.ts

@@ -25,7 +25,7 @@ const mainConfig: StorybookConfig = {
     const resolvePlugins = config.resolve?.plugins;
     if (Array.isArray(resolvePlugins)) {
       resolvePlugins.forEach((p) => {
-        // @ts-ignore
+        // @ts-expect-error (Converted from ts-ignore)
         const appSrcs = p.appSrcs as unknown as string[];
         if (Array.isArray(appSrcs)) {
           appSrcs.push(path.join(__dirname, '..', '..', '..'));

code/examples/cra-ts-essentials/.storybook/main.ts

@@ -20,7 +20,7 @@ const mainConfig: StorybookConfig = {
     const resolvePlugins = config.resolve?.plugins;
     if (Array.isArray(resolvePlugins)) {
       resolvePlugins.forEach((p) => {
-        // @ts-ignore
+        // @ts-expect-error (Converted from ts-ignore)
         const appSrcs = p.appSrcs as unknown as string[];
         if (Array.isArray(appSrcs)) {
           appSrcs.push(path.join(__dirname, '..', '..', '..'));

code/examples/cra-ts-kitchen-sink/.storybook/main.ts

@@ -20,7 +20,7 @@ const mainConfig: StorybookConfig = {
     const resolvePlugins = config.resolve?.plugins;
     if (Array.isArray(resolvePlugins)) {
       resolvePlugins.forEach((p) => {
-        // @ts-ignore
+        // @ts-expect-error (Converted from ts-ignore)
         const appSrcs = p.appSrcs as unknown as string[];
         if (Array.isArray(appSrcs)) {
           appSrcs.push(path.join(__dirname, '..', '..', '..'));

code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/DocgenTS.tsx

@@ -15,7 +15,6 @@ export const ButtonReactFC: React.FC<ButtonProps> = ({ onClick, children }) => (
   <button onClick={onClick}>{children}</button>
 );
 ButtonReactFC.defaultProps = {
-  // @ts-ignore
   onClick: null,
 };
 
@@ -26,7 +25,6 @@ export const ButtonFC: FC<ButtonProps> = ({ onClick, children }) => (
   <button onClick={onClick}>{children}</button>
 );
 ButtonFC.defaultProps = {
-  // @ts-ignore
   onClick: null,
 };
 
@@ -37,6 +35,5 @@ export const ButtonFunctionComponent: FC<ButtonProps> = ({ onClick, children })
   <button onClick={onClick}>{children}</button>
 );
 ButtonFunctionComponent.defaultProps = {
-  // @ts-ignore
   onClick: null,
 };

code/examples/cra-ts-kitchen-sink/src/stories/docgen-tests/types/ext.js

@@ -1,4 +1,4 @@
-// @ts-ignore
+// @ts-expect-error (Converted from ts-ignore)
 import PropTypes from 'prop-types';
 
 export const PRESET_SHAPE = {

code/examples/vue-3-cli/.storybook/preview.ts

@@ -1,5 +1,5 @@
 import { Parameters, setup } from '@storybook/vue3';
-// @ts-ignore
+// @ts-expect-error (Converted from ts-ignore)
 import Button from '../src/stories/Button.vue';
 
 // TODO: I'd like to be able to export rather than imperatively calling an imported function

code/examples/vue-3-cli/src/stories/Button.vue

@@ -37,7 +37,7 @@ export default defineComponent({
 
   emits: ['click'],
 
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   setup(props, { emit }) {
     props = reactive(props);
     return {

code/examples/vue-3-cli/src/stories/DynamicHeading.stories.ts

@@ -15,7 +15,6 @@ export default {
       const story = storyFn();
       // Vue 3 "Functional" component as decorator
       return () => {
-        // @ts-ignore // this is an unfortunate side-effect of having vue & vue3 in 1 repo
         return h('div', { style: 'border: 2px solid red' }, h(story));
       };
     },
@@ -27,7 +26,6 @@ export default {
 
   Make sure to pass the `args` the component expects  to receive as the props!
  */
-// @ts-ignore // this is an unfortunate side-effect of having vue & vue3 in 1 repo
 const Template: StoryFn<Props> = (args, { argTypes }) => {
   const component: FunctionalComponent<Props> = () => h(DynamicHeading, args, 'Hello World!');
   component.props = Object.keys(argTypes);

code/examples/vue-3-cli/src/stories/OverrideArgs.vue

@@ -23,7 +23,7 @@ export default {
     },
   },
 
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   setup(props, { emit }) {
     const classes = {
       'storybook-button': true,

code/frameworks/angular/src/client/angular/helpers.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import global from 'global';
 import { enableProdMode, NgModule, Component, NgModuleRef, Type, NgZone } from '@angular/core';
 import { FormsModule } from '@angular/forms';

code/frameworks/angular/src/client/docs/angular-properties.test.ts

@@ -6,7 +6,7 @@ import { sync as spawnSync } from 'cross-spawn';
 
 import { findComponentByName, extractArgTypesFromData } from './compodoc';
 
-// @ts-ignore
+// @ts-expect-error (Converted from ts-ignore)
 const { SNAPSHOT_OS } = global;
 
 // File hierarchy: __testfixtures__ / some-test-case / input.*

code/frameworks/angular/src/client/docs/compodoc.ts

@@ -21,11 +21,11 @@ export const isMethod = (methodOrProp: Method | Property): methodOrProp is Metho
 };
 
 export const setCompodocJson = (compodocJson: CompodocJson) => {
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };
 
-// @ts-ignore
+// @ts-expect-error (Converted from ts-ignore)
 export const getCompodocJson = (): CompodocJson => window.__STORYBOOK_COMPODOC_JSON__;
 
 export const checkValidComponentOrDirective = (component: Component | Directive) => {
@@ -191,7 +191,6 @@ const extractDefaultValueFromComments = (property: Property, value: any) => {
   let commentValue = value;
   property.jsdoctags.forEach((tag: JsDocTag) => {
     if (['default', 'defaultvalue'].includes(tag.tagName.escapedText)) {
-      // @ts-ignore
       const dom = new window.DOMParser().parseFromString(tag.comment, 'text/html');
       commentValue = dom.body.textContent;
     }

code/frameworks/angular/src/server/angular-cli-webpack-older.ts

@@ -109,7 +109,6 @@ function mergeAngularCliWebpackConfig(
   // styleWebpackConfig.entry adds global style files to the webpack context
   const entry = [
     ...(baseConfig.entry as string[]),
-    // @ts-ignore
     ...Object.values(cliStyleWebpackConfig.entry).reduce((acc, item) => acc.concat(item), []),
   ];
 

code/frameworks/angular/src/server/angular-devkit-build-webpack.ts

@@ -121,8 +121,6 @@ const buildWebpackConfigOptions = async (
     sourceMap: {},
     styles: [],
     // Deleted in angular 12. Keep for compatibility with versions lower than angular 12
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     lazyModules: [],
 
     // Project Options
@@ -139,8 +137,7 @@ const buildWebpackConfigOptions = async (
     statsJson: false,
 
     // Deleted in angular 12. Keep for compatibility with versions lower than angular 12
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
     forkTypeChecker: false,
   };
 

code/frameworks/ember/src/client/preview/render.ts

@@ -1,7 +1,7 @@
 import global from 'global';
 import { dedent } from 'ts-dedent';
 import type { RenderContext } from '@storybook/store';
-// @ts-ignore
+// @ts-expect-error (Converted from ts-ignore)
 import Component from '@ember/component'; // eslint-disable-line import/no-unresolved
 import { OptionsArgs, EmberFramework } from './types';
 

code/jest.init.ts

@@ -3,11 +3,10 @@ import '@testing-library/jest-dom';
 
 // setup file
 import { configure } from 'enzyme';
-// @ts-ignore
+// @ts-expect-error (Converted from ts-ignore)
 import Adapter from 'enzyme-adapter-react-16';
-// @ts-ignore
+// @ts-expect-error (Converted from ts-ignore)
 import regeneratorRuntime from 'regenerator-runtime';
-// @ts-ignore
 import registerRequireContextHook from '@storybook/babel-plugin-require-context-hook/register';
 import EventEmitter from 'events';
 
@@ -25,9 +24,9 @@ const localStorageMock = {
   setItem: jest.fn().mockName('setItem'),
   clear: jest.fn().mockName('clear'),
 };
-// @ts-ignore
+// @ts-expect-error (Converted from ts-ignore)
 global.localStorage = localStorageMock;
-// @ts-ignore
+// @ts-expect-error (Converted from ts-ignore)
 global.regeneratorRuntime = regeneratorRuntime;
 
 configure({ adapter: new Adapter() });

code/lib/addons/src/hooks.ts

@@ -329,11 +329,11 @@ function useStateLike<S>(
 ): [S, (update: ((prevState: S) => S) | S) => void] {
   const stateRef = useRefLike(
     name,
-    // @ts-ignore S type should never be function, but there's no way to tell that to TypeScript
+    // @ts-expect-error S type should never be function, but there's no way to tell that to TypeScript
     typeof initialState === 'function' ? initialState() : initialState
   );
   const setState = (update: ((prevState: S) => S) | S) => {
-    // @ts-ignore S type should never be function, but there's no way to tell that to TypeScript
+    // @ts-expect-error S type should never be function, but there's no way to tell that to TypeScript
     stateRef.current = typeof update === 'function' ? update(stateRef.current) : update;
     triggerUpdate();
   };

code/lib/api/src/index.tsx

@@ -309,7 +309,7 @@ interface ManagerConsumerProps<P = unknown> {
 const defaultFilter = (c: Combo) => c;
 
 function ManagerConsumer<P = Combo>({
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   filter = defaultFilter,
   children,
 }: ManagerConsumerProps<P>): ReactElement {

code/lib/api/src/modules/versions.ts

@@ -1,5 +1,5 @@
 import global from 'global';
-// @ts-ignore
+// @ts-expect-error no typedefs
 import semver from '@storybook/semver';
 import memoize from 'memoizerific';
 

code/lib/api/src/store.ts

@@ -4,7 +4,6 @@ import storeSetup from './lib/store-setup';
 import type { State } from './index';
 
 // setting up the store, overriding set and get to use telejson
-// @ts-ignore
 storeSetup(store._);
 
 export const STORAGE_KEY = '@storybook/ui/store';

code/lib/blocks/src/blocks/Props.tsx

@@ -13,7 +13,7 @@ export const Props = deprecate(
   `
 );
 
-// @ts-ignore
+// @ts-expect-error (Converted from ts-ignore)
 Props.defaultProps = {
   of: PRIMARY_STORY,
 };

code/lib/blocks/src/blocks/mdx.tsx

@@ -53,7 +53,6 @@ function navigate(context: DocsContextProps, url: string) {
   context.channel.emit(NAVIGATE_URL, url);
 }
 
-// @ts-ignore
 const A = components.a;
 
 interface AnchorInPageProps {
@@ -124,7 +123,7 @@ const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const OcticonHeaders = SUPPORTED_MDX_HEADERS.reduce(
   (acc, headerType) => ({
     ...acc,
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
     [headerType]: styled(components[headerType])({
       '& svg': {
         visibility: 'hidden',
@@ -159,7 +158,7 @@ const HeaderWithOcticonAnchor: FC<HeaderWithOcticonAnchorProps> = ({
 }) => {
   const context = useContext(DocsContext);
 
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   const OcticonHeader = OcticonHeaders[as];
   const hash = `#${id}`;
 
@@ -213,7 +212,7 @@ export const HeaderMdx: FC<HeaderMdxProps> = (props) => {
     );
   }
 
-  // @ts-ignore
+  // @ts-expect-error (Converted from ts-ignore)
   const Header = components[as];
 
   // Make sure it still work if "remark-slug" plugin is not present.
@@ -223,7 +222,7 @@ export const HeaderMdx: FC<HeaderMdxProps> = (props) => {
 export const HeadersMdx = SUPPORTED_MDX_HEADERS.reduce(
   (acc, headerType) => ({
     ...acc,
-    // @ts-ignore
+    // @ts-expect-error (Converted from ts-ignore)
     [headerType]: (props: object) => <HeaderMdx as={headerType} {...props} />,
   }),
   {}