How do I resolve Typescript type mismatches with legacy JS code?

Question

So I have a React project bootstrapped with create-react-app. I'm converting it to Typescript gradually and have, for example, something like:

App.tsx

import React from 'react';
import { TestThing } from './components/TestThing'

function stuff(a: any): void {
  console.log('stuff', a);
}

function App() {
  return (
    <div className="App">
      <TestThing foo="foo" bar={stuff}/>
    </div>
  );
}

export default App;

and a legacy file TestThing.js

import React from 'react';

const DEFAULT_THING = () => {
  console.log('whatever');
};

export const TestThing = ({ foo, bar = DEFAULT_THING }) => 
    <div onClick={bar}>foo = {foo}</div>;

This gives the error:

Type '(a: any) => void' is not assignable to type '() => void'.  TS2322

in App.tsx as I presume Typescript is inferring bar can take no arguments because of it's default assignment in the legacy JS code.

How can I tell TS this is valid without having to touch that legacy JS file?

Thanks!

DEFAULT_THING should have the same signature as stuff. Either remove a: any from stuff or add it to DEFAULT_THING list of arguments. — Sam R.
– Sam R., Commented Mar 31, 2020 at 23:15

Evert · Accepted Answer · 2020-03-31 23:16:24Z

2

Typescript is correct here. If a function is sometimes called without arguments, you really should mark it as such:

function stuff(a?: any): void {
  console.log('stuff', a);
}

Either that, or turn type checking off for that function.

answered Mar 31, 2020 at 23:16

Evert

101k18 gold badges136 silver badges221 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BaronVonKaneHoffen Over a year ago

Ah you're right! It was the ? that I hadn't thought about adding. ...you have no idea how long I've been staring at this haha. Thanks so much :-)

Collectives™ on Stack Overflow

How do I resolve Typescript type mismatches with legacy JS code?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related