TypeScript interface with spread members

Question

I'm bulk importing a bunch of properties with

import * as actionCreators from './billingUtil2';

and TypeScript is correctly identifying each export inside of actionCreators. Is it possible to "spread" those members into an interface? Ideally something like this, but valid

interface componentState {
    ...actionCreators
}

---

My use case is, I'd like to create a React component and accurately describe the shape of the props it'll be receiving from Redux. So ideally something along these lines

import * as actionCreators from './billingUtil2';

interface State {
    name: string;
    age: number
}

interface componentState extends State {
    ...actionCreators
}

and then I could tell TypeScript to expect props of the form componentState. My redux reducers would already be returning results implementing an interface; my main goal here is to avoid manually typing out each action creator.

Answer 1

You could create an Intersection Type

import * as actionCreators from './billingUtil2';

type MyState = typeof actionCreators & {
    name: string
    age: number
}

or from your code in the second section above, where you had the State interface, you could do

import * as actionCreators from './billingUtil2';

interface State {
    name: string;
    age: number
}

type componentShape = typeof actionCreators & State;

or you could similarly do

type acT = typeof actionCreators
interface MyState extends acT {
    name; age;
}

class Comp extends React.Component<{}, MyState> {

}