Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/classic/action-row.tsx (TypeScript)

Code before:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { useTranslation } from 'react-i18next';
import store from 'store';
import { DailyCodingChallengeLanguages } from '../../../redux/prop-types';
import EditorTabs from './editor-tabs';

interface ClassicLayoutProps {
  dailyCodingChallengeLanguage: DailyCodingChallengeLanguages;
  hasNotes: boolean;
  hasPreview: boolean;
  areInstructionsDisplayable: boolean;
  isDailyCodingChallenge: boolean;
  setDailyCodingChallengeLanguage: (
    language: DailyCodingChallengeLanguages
  ) => void;
  showConsole: boolean;
  showNotes: boolean;
  showInstructions: boolean;
  showPreviewPane: boolean;
  showPreviewPortal: boolean;
  togglePane: (pane: string) => void;
}

interface InteractiveEditorProps {
  hasInteractiveEditor: boolean;
  showInteractiveEditor: boolean;
  toggleInteractiveEditor: () => void;
}

type ActionRowProps = ClassicLayoutProps | InteractiveEditorProps;

const ActionRow = (props: ActionRowProps): JSX.Element => {
  const { t } = useTranslation();

  if ('hasInteractiveEditor' in props && props.hasInteractiveEditor) {
    const { toggleInteractiveEditor, showInteractiveEditor } = props;

    return (
      <div className='action-row'>
        <div className='tabs-row'>
          <div className='tabs-row-right'>
            <button
              aria-expanded={!!showInteractiveEditor}
              aria-describedby='interactive-editor-desc'
              onClick={toggleInteractiveEditor}
            >
              {t('learn.editor-tabs.interactive-editor')}
            </button>
            <span id='interactive-editor-desc' className='sr-only'>
              {t('aria.interactive-editor-desc')}

Review comment (suggestion):
```suggestion
  hasInteractiveEditor: true;
```
i.e. if this prop exists, it's true and we know that the props are InteractiveEditorProps and not ClassicLayoutProps

Code after:
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { useTranslation } from 'react-i18next';
import store from 'store';
import { DailyCodingChallengeLanguages } from '../../../redux/prop-types';
import EditorTabs from './editor-tabs';

interface ClassicLayoutProps {
  dailyCodingChallengeLanguage: DailyCodingChallengeLanguages;
  hasNotes: boolean;
  hasPreview: boolean;
  areInstructionsDisplayable: boolean;
  isDailyCodingChallenge: boolean;
  setDailyCodingChallengeLanguage: (
    language: DailyCodingChallengeLanguages
  ) => void;
  showConsole: boolean;
  showNotes: boolean;
  showInstructions: boolean;
  showPreviewPane: boolean;
  showPreviewPortal: boolean;
  togglePane: (pane: string) => void;
  hasInteractiveEditor?: never;
}

interface InteractiveEditorProps {
  hasInteractiveEditor: true;
  showInteractiveEditor: boolean;
  toggleInteractiveEditor: () => void;
}

type ActionRowProps = ClassicLayoutProps | InteractiveEditorProps;

const ActionRow = (props: ActionRowProps): JSX.Element => {
  const { t } = useTranslation();

  if (props.hasInteractiveEditor) {
    const { toggleInteractiveEditor, showInteractiveEditor } = props;

    return (
      <div className='action-row'>
        <div className='tabs-row'>
          <div className='tabs-row-right'>
            <button
              aria-expanded={!!showInteractiveEditor}
              aria-describedby='interactive-editor-desc'
              onClick={toggleInteractiveEditor}
            >
              {t('learn.editor-tabs.interactive-editor')}
            </button>
            <span id='interactive-editor-desc' className='sr-only'>