union type does not work in classes/interfaces

[babkenmes]

TypeScript Version: 2.4.2

Have tryed in http://www.typescriptlang.org/play the error is the same

Code

class Action { 
    type: string;
    payload: number;
}

type ActionCreator = ((page:number)=>Action) | Action

class Filter {
    actionCreator: ActionCreator;
    subStore: string;
}
const x: ActionCreator = (page: number) => {
    return {
        type: "foo",
        payload: 1
    }
}
const y: Filter = {
    actionCreator: (page: number) => { return {
        type: "foo",
        payload: 1
    } },
    subStore:"foo"
}

y.actionCreator(5);
x(5);

For y.actionCreator(5) I get

Cannot invoke an expression whose type lacks a call signature. Type 'ActionCreator' has no compatible call signatures.

Expected behavior: / Actual behavior:
As you can see it works for x, it should work the same way for the class/interface implementation.

Playground Link

Related Issues:

The reason it works for x is that for a const the compiler ignores the type annotation and uses the real, non-union type. For properties in an object literal it doesn't do that, so y really is Filter, and y.actionCreator is a union type which might not be callable.

[babkenmes]

I am sorry I do not understand what means

for a const the compiler ignores the type annotation and uses the real, non-union type

because the result of calling x is of type Action

x(5).payload;
x(5).type;

sorry the playground link was old I have updated it with the same code as in the issue.
link

and if we have anither z of type ActionCreator

const z:ActionCreator = {
        type: "foo",
        payload: 1
}
z.payload;
z.type;

this also works as expected
or if we do

const z = { foo: (page: number) => { return {
        type: "foo",
        payload: 1
     } }
};
z.foo(5).payload;

[babkenmes]

Ok, I understand the problem now

It tracks the object, so if we do

let x: ActionCreator = (page: number) => {
    return {
        type: "foo",
        payload: 1
    }
}
x = {
    type: "foo",
    payload: 1
};
x(5).payload;  //Cannot invoke an expression whose type lacks a call signature. Type 'Action' has no compatible call signatures.
x.payload;    //OK

So as I understand it can not track objects so, it is disabled for some cases, but in some cases it can work not as intended for example`

const x = {
    foo: (page: number) => {
        return {
            type: "foo",
            payload: 1
        }
    }
};
x.foo(5).payload; //OK here
let z = { bar: x }; 
function someFunc(data: { bar: { foo : ActionCreator} }) { 
    data.bar.foo = {  //OK here
        type: "bar",
        payload: 2
    }
}
someFunc(z);

console.log(x.foo(5)) //here compiler does not give any error but at run-time, x.foo is not a function

[typescript-bot]

Automatically closing this issue for housekeeping purposes. The issue labels indicate that it is unactionable at the moment or has already been addressed.