Fix TS 4.8 errors

code/addons/viewport/src/shortcuts.ts

@@ -1,6 +1,11 @@
 import type { API } from '@storybook/api';
 import { ADDON_ID } from './constants';
 
+type State = {
+  selected: string;
+  isRotated: boolean;
+};
+
 const getCurrentViewportIndex = (viewportsKeys: string[], current: string): number =>
   viewportsKeys.indexOf(current);
 
@@ -24,7 +29,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
     defaultShortcut: ['shift', 'V'],
     actionName: 'previous',
     action: () => {
-      const { selected, isRotated } = api.getAddonState(ADDON_ID);
+      const { selected, isRotated } = api.getAddonState<State>(ADDON_ID);
       setState({
         selected: getPreviousViewport(viewportsKeys, selected),
         isRotated,
@@ -37,7 +42,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
     defaultShortcut: ['V'],
     actionName: 'next',
     action: () => {
-      const { selected, isRotated } = api.getAddonState(ADDON_ID);
+      const { selected, isRotated } = api.getAddonState<State>(ADDON_ID);
       setState({
         selected: getNextViewport(viewportsKeys, selected),
         isRotated,
@@ -50,7 +55,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
     defaultShortcut: ['alt', 'V'],
     actionName: 'reset',
     action: () => {
-      const { isRotated } = api.getAddonState(ADDON_ID);
+      const { isRotated } = api.getAddonState<State>(ADDON_ID);
       setState({
         selected: 'reset',
         isRotated,

code/lib/store/src/args.ts

@@ -152,7 +152,7 @@ export const deepDiff = (value: any, update: any): any => {
 };
 
 export const NO_TARGET_NAME = '';
-export function groupArgsByTarget<TArgs = Args>({
+export function groupArgsByTarget<TArgs extends Args = Args>({
   args,
   argTypes,
 }: StoryContext<AnyFramework, TArgs>) {
@@ -166,6 +166,8 @@ export function groupArgsByTarget<TArgs = Args>({
   return groupedArgs;
 }
 
-export function noTargetArgs<TArgs = Args>(context: StoryContext<AnyFramework, TArgs>) {
+export function noTargetArgs<TArgs extends Args = Args>(
+  context: StoryContext<AnyFramework, TArgs>
+) {
   return groupArgsByTarget(context)[NO_TARGET_NAME];
 }

code/renderers/react/src/testing-api.ts

@@ -80,7 +80,7 @@ const defaultProjectAnnotations: ProjectAnnotations<ReactFramework> = {
  * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
  * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
  */
-export function composeStory<TArgs = Args>(
+export function composeStory<TArgs extends Args = Args>(
   story: Store_ComposedStory<ReactFramework, TArgs>,
   componentAnnotations: Meta<TArgs | any>,
   projectAnnotations?: ProjectAnnotations<ReactFramework>,

scripts/prepare/bundle.ts

@@ -37,12 +37,12 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
       entries.map(async (file: string) => {
         console.log(`skipping generating types for ${file}`);
         const { name: entryName, dir } = path.parse(file);
-  
+
         const pathName = join(process.cwd(), dir.replace('./src', 'dist'), `${entryName}.d.ts`);
         const srcName = join(process.cwd(), file);
-  
+
         const rel = relative(dirname(pathName), dirname(srcName));
-  
+
         await fs.ensureFile(pathName);
         await fs.writeFile(
           pathName,
@@ -54,7 +54,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
       })
     );
   }
-  
+
   const tsConfigPath = join(cwd, 'tsconfig.json');
   const tsConfigExists = await fs.pathExists(tsConfigPath);
   await Promise.all([