Typescript generic and extend

Question

I am new to Typescript.

I have following 4 interfaces :

export interface MyAction<T = any> {
  type: T
}

export interface MyAnyAction extends MyAction {
  [extraProps: string]: any
}

export interface MyAnyAnyAction extends MyAnyAction{

}

export interface ITestDispatch<A extends MyAction = MyAnyAction> {
  <T extends A>(action: T): T
}

I want to create a function of type "ITestDispatch".

I could not understand why TS compiler is throwing error for the below function :

const TestDispatch1Func: ITestDispatch1<MyAnyAction> = (action: MyAnyAnyAction): MyAnyAnyAction => {


  let obj: MyAnyAnyAction = { 
        type: 'skdw',
        da: 20
  };

  return obj;
}

I am getting the below error on "TestDispatch1Func" :

Type '(action: MyAnyAnyAction) => MyAnyAnyAction' is not assignable to type 'ITestDispatch<MyAnyAction>'.   Type 'MyAnyAnyAction' is not assignable to type 'T'.     'MyAnyAnyAction' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'MyAnyAction'.

Thanks for clearing my doubt.

Answer 1

This is because the interface ITestDispatch means that the function can take an action of any subtype of A, so it's conflicting with the types declaration & return type of the function TestDispatch1Func which is limited to MyAnyAnyAction. The interface is accepting any subtype of A, while the implementation is accepting only 1 subtype.

For instance if you had another interface

export interface AnotherAction extends MyAnyAction{}

The definition ITestDispatch1<MyAnyAction> allows you to call TestDispatch1Func(action: AnotherAction) since AnotherAction extends MyAnyAction, but that would obviously conflict with the function defnition expecting only MyAnyAnyAction.

There are 3 solutions here

export interface MyAction<T = any> {
  type: T
}

export interface MyAnyAction extends MyAction {
  [extraProps: string]: any
}

export interface MyAnyAnyAction extends MyAnyAction{}


// solution 1: specify the action input & output types in function defnition
export interface ITestDispatch1<T extends MyAction = MyAnyAction> {
  (action: T): T
}

// this means that the function will always be called with MyAnyAnyAction and return MyAnyAnyAction
const TestDispatchFunc1: ITestDispatch1<MyAnyAnyAction> = (action) => {
  // here you can always return `MyAnyAnyAction`,
  // because you explicitly declared it the as function output type
  let obj: MyAnyAnyAction = { 
        type: 'skdw',
        da: 20
  };

  return obj;
}


// solution 2: separate action input & output types, specify output type in function defintion
export interface ITestDispatch2<A extends MyAction, R extends A> {
  <T extends A>(action: T): R
}

// this function can be called with any subtype of MyAnyAction, but will always return MyAnyAnyAction
const TestDispatchFunc2: ITestDispatch2<MyAnyAction, MyAnyAnyAction> = (action) => {
  // here you can always return `MyAnyAnyAction`,
  // because you explicitly declared it the as function output type
  let obj: MyAnyAnyAction = { 
        type: 'skdw',
        da: 20
  };

  return action;
}


// solution 3: decide the function input & output types types in function invocation
export interface ITestDispatch3<A extends MyAction = MyAnyAction> {
  <T extends A>(action: T): T
}

// this function can be called with any subtype of MyAnyAction, returns the same subtype
const TestDispatchFunc3: ITestDispatch3<MyAnyAction> = (action) => {
  // can't return MyAnyAnyAction because the return type is the same as the input type,
  // which can be any subtype of MyAnyAction, not necessarily MyAnyAnyAction
  // let obj: MyAnyAnyAction = { 
  //       type: 'skdw',
  //       da: 30
  // };

  return action;
}

// the result type is determined base on the input type
const result1 = TestDispatchFunc3({} as MyAnyAnyAction) // result: MyAnyAnyAction
const result2 = TestDispatchFunc3({} as MyAnyAction) // result: MyAnyAction

TS Playground here

Answer 2

It's actually an obscure mistake in your function signature. <MyAnyAction> declares a new Type Parameter that changes the meaning of MyAnyAction. It is difficult to spot because the Type Parameter has the same name as an interface in your code.

const TestDispatch1Func: ITestDispatch<MyAnyAction> =
    <MyAnyAction>(action: MyAnyAction): MyAnyAction => {

It should be

const TestDispatch1Func: ITestDispatch<MyAnyAction> =
    (action: MyAnyAction): MyAnyAction => {

For a bit more context you can rename <MyAnyAction> to anything, since it's a type parameter and in this context it means create a Type Parameter called MyAnyAction. If you rename is then the error is also clearer:

const TestDispatch1Func: ITestDispatch<MyAnyAction> = <T>(action: T): T => {

Type 'MyAnyAction' is not assignable to type 'T'. 'MyAnyAction' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint '{}'