title: Overload Typescript arrow function without causing error Duplicate identifier and Function implementation is missing or not immediately following
body: <p>We use the following code to enable compile check and IntelliSense for our redux reducers:</p>
  <p>It is in a <code>.ts</code> file and not <code>.tsx</code> (<a href="https://stackoverflow.com/a/45576880/3850405">https://stackoverflow.com/a/45576880/3850405</a>)</p>
  <pre><code>export function typedAction&lt;T extends string&gt;(type: T): { type: T };
  export function typedAction&lt;T extends string, P extends any&gt;(
      type: T,
      payload: P
  ): { type: T; payload: P };
  
  export function typedAction(type: string, payload?: any) {
      return { type, payload };
  }
  </code></pre>
  <p>This means that our reducers knows what Actions are available:</p>
  <p><a href="https://i.stack.imgur.com/70hpu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/70hpu.png" alt="enter image description here" /></a></p>
  <p>Sources:</p>
  <p><a href="https://levelup.gitconnected.com/set-up-a-typescript-react-redux-project-35d65f14b869" rel="nofollow noreferrer">https://levelup.gitconnected.com/set-up-a-typescript-react-redux-project-35d65f14b869</a></p>
  <p><a href="https://stackoverflow.com/a/61276522/3850405">https://stackoverflow.com/a/61276522/3850405</a></p>
  <p>If the below functions are removed no check is done:</p>
  <pre><code>export function typedAction&lt;T extends string&gt;(type: T): { type: T };
  export function typedAction&lt;T extends string, P extends any&gt;(
      type: T,
      payload: P
  ): { type: T; payload: P };
  </code></pre>
  <p>The project recently decided to prefer arrow functions instead of function declarations.</p>
  <p><a href="https://www.npmjs.com/package/eslint-plugin-prefer-arrow" rel="nofollow noreferrer">https://www.npmjs.com/package/eslint-plugin-prefer-arrow</a></p>
  <p><a href="https://eslint.org/docs/rules/func-style" rel="nofollow noreferrer">https://eslint.org/docs/rules/func-style</a></p>
  <p>Our eslint config looks like this:</p>
  <pre><code>&quot;plugins&quot;: [
    &quot;prefer-arrow&quot;
  ],
  &quot;rules&quot;: {
    &quot;prefer-arrow/prefer-arrow-functions&quot;: [
      &quot;error&quot;,
      {
        &quot;disallowPrototype&quot;: true,
        &quot;singleReturnOnly&quot;: false,
        &quot;classPropertiesAllowed&quot;: false
      }
    ],
    &quot;prefer-arrow-callback&quot;: [
      &quot;error&quot;,
      { &quot;allowNamedFunctions&quot;: true }
    ],
    &quot;func-style&quot;: [
      &quot;error&quot;,
      &quot;expression&quot;,
      { &quot;allowArrowFunctions&quot;: true }
    ]
  }
  </code></pre>
  <p>This meant that we got the following linting errors:</p>
  <pre><code>7:8   error    Expected a function expression                              func-style
  7:8   error    Use const or class constructors instead of named functions  prefer-arrow/prefer-arrow-functions
  </code></pre>
  <p>If the <code>typedAction</code> function is converted to an arrow function the following errors are received:</p>
  <pre><code>export const typedAction = (type: string, payload?: any) =&gt; {
      return { type, payload };
  }
  </code></pre>
  <blockquote>
  <p>TS2300 (TS) Duplicate identifier 'typedAction'.</p>
  <p>TS2391 (TS) Function implementation is missing or not immediately
  following the declaration.</p>
  </blockquote>
  <p>To be able to continue it is solved like this but a more permanent solution would be preferable:</p>
  <pre><code>export function typedAction&lt;T extends string&gt;(type: T): { type: T };
  export function typedAction&lt;T extends string, P extends any&gt;(
      type: T,
      payload: P
  ): { type: T; payload: P };
  
  // eslint-disable-next-line func-style, prefer-arrow/prefer-arrow-functions
  export function typedAction(type: string, payload?: any) {
      return { type, payload };
  }
  </code></pre>