Typescript: TS2739: Type is missing the following properties from type

[bluelovers]

TypeScript Version: 3.3.0-dev.201xxxxx

Search Terms:

Code

export const sp = '_@_';

export interface IWordsOutput
{
    _source?: any,

    s?: RegExp,
    r?: string | IRegExpCallback,

    flags?: string,
}

export interface IRegExpCallback
{
    ($0: string, $1?: string, $2?: string, $3?: string, ...argv): string;
}

export interface IWords extends IWordsOutput
{
    [0]: string | RegExp,
    [1]: string | IRegExpCallback,
    [2]?: string,
}

export const words_source: IWords[] = [

    // this is work
    ['HP', 'HP'],

    // Error:TS2739: Type 'string[]' is missing the following properties from type 'IWords': [0], [1]
    (function ()
    {
        let jobclass = '(?:A|B|C)';

        return [`${jobclass}${sp}${jobclass}`, '$1・$2'];
    })(),

];

Expected behavior:

no error

Actual behavior:

Error:TS2739: Type 'string[]' is missing the following properties from type 'IWords': [0], [1]

Playground Link:

Related Issues:

[DanielRosenwasser]

I think this might be #241?

[weswigham]

I think this is just a matter of contextual types not propagating through IIFEs (but I could be wrong and it could be a manifestation of #241).

[prakarangs]

Hi,
I have the same error but slightly different scenario. I have a functional component wrapped with a redux connect function. Some props are provided via mapStateToProps. However, When calling a component without adding all the props gives me TS2739 error.

Sample code

button.tsx

export interface Props {
  canPost: boolean;
  postMethod: (name: string) => void;
  name: string;
}

const postButton = ({ canPost, postMethod, name }) => {
  const postSomething = () => {
    canPost && postMethod(name);
  };
  return <button  onClick={postSomething}>Do somthing</button>;
}

export default postButton;

canPost and postMethod are provided via connect function as follow:

index.ts

import { connect } from 'react-redux';
import postButton from  './button';
import { postMethod } from './store/actions';

export const mapStateToProps = (state) => {
  const { canPost } = state;
  return { canPost };
};
export const mapDispatchToProps = { postMethod };

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(postButton);

Then when i call the button component somewhere else, i only want to pass in the name as prop. Not anything else, however, i received TS2739: Type is missing the following properties from type for canPost and postMethod.

otherComponent.tsx

...in return function
 <postButton name="orders" />

For now i have to type canPost and postMethod as undefined. that will fixed the issue. But it is not actually undefined. Anyone could suggest me how to handle this properly? What's the best approach?

Many thanks in advance :)

[Jeff-Tian]

I met this error in my project and worked around it by fixing the typescript version to '3.0' in package.json.

[Berkmann18]

I've got a similar issue with the following code:
_index.ts_

import ListNode from './listNode';

const reverseKGroup:ListNode = (head: ListNode, k: number) => {
  const reversedNodes: ListNode[] = new ListNode[k];
    let current: ListNode = head;
    let index: number = k - 1;
    while (index > 0 /* && current.next != null */) {
      console.log('current=', current);
      reversedNodes[index] = current;
      current = current.next;
      //reversedNodes[index].next = current;
      index--;
    }
    for (let i: number = 0; i < reversedNodes.length; i++) console.log(`node(${i}): ${reversedNodes[i]}`);
    return reversedNodes[0];
}

export default reverseKGroup

_listNode.ts_

type LN = ListNode | null;

class ListNode {
  public val: number = -9999;
  public next: LN | undefined;
  public constructor(x: number, next: LN = null) {
    this.val = x;
    this.next = next;
  }

  public toString(): string {
    const fw: string = this.next != null ? '->' : '';
    return `${this.val}${fw}`;
  }
}

export default ListNode;

_listNode.d.ts_

declare type LN = ListNode | null;
declare class ListNode {
  public val: number;
  public next: LN | undefined;
  public constructor(x: number, next?: LN);
  public toString(): string;
}
export default ListNode;

[zmnv]

@prakarangs, did you setup defaultProps for component 'clean' component?
Also, your component doesn't uses 'Props' interface at all.

I have the same warning without defaultProps.
But what the... I don't want to setup 'default values' to the 'isRequired' props.

Any other solution or fixes?

[prakarangs]

@zmnv I did use props interface, just forgot to add the postButton = ({ canPost, postMethod, name }: Props) in sample code 🙈

[iamtomhanks]

Hi,
I have the same error but slightly different scenario. I have a functional component wrapped with a redux connect function. Some props are provided via mapStateToProps. However, When calling a component without adding all the props gives me TS2739 error.

Sample code

button.tsx

export interface Props {
  canPost: boolean;
  postMethod: (name: string) => void;
  name: string;
}

const postButton = ({ canPost, postMethod, name }) => {
  const postSomething = () => {
    canPost && postMethod(name);
  };
  return <button  onClick={postSomething}>Do somthing</button>;
}

export default postButton;

canPost and postMethod are provided via connect function as follow:

index.ts

import { connect } from 'react-redux';
import postButton from  './button';
import { postMethod } from './store/actions';

export const mapStateToProps = (state) => {
  const { canPost } = state;
  return { canPost };
};
export const mapDispatchToProps = { postMethod };

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(postButton);

Then when i call the button component somewhere else, i only want to pass in the name as prop. Not anything else, however, i received TS2739: Type is missing the following properties from type for canPost and postMethod.

otherComponent.tsx

...in return function
 <postButton name="orders" />

For now i have to type canPost and postMethod as undefined. that will fixed the issue. But it is not actually undefined. Anyone could suggest me how to handle this properly? What's the best approach?
Did you end up fixing this issue?

[DanielRosenwasser]

@weswigham agreed, this has more to do with IIFEs I think.

[tikazyq]

Hi,
I have the same error but slightly different scenario. I have a functional component wrapped with a redux connect function. Some props are provided via mapStateToProps. However, When calling a component without adding all the props gives me TS2739 error.

Sample code

button.tsx

export interface Props {
  canPost: boolean;
  postMethod: (name: string) => void;
  name: string;
}

const postButton = ({ canPost, postMethod, name }) => {
  const postSomething = () => {
    canPost && postMethod(name);
  };
  return <button  onClick={postSomething}>Do somthing</button>;
}

export default postButton;

canPost and postMethod are provided via connect function as follow:

index.ts

import { connect } from 'react-redux';
import postButton from  './button';
import { postMethod } from './store/actions';

export const mapStateToProps = (state) => {
  const { canPost } = state;
  return { canPost };
};
export const mapDispatchToProps = { postMethod };

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(postButton);

Then when i call the button component somewhere else, i only want to pass in the name as prop. Not anything else, however, i received TS2739: Type is missing the following properties from type for canPost and postMethod.

otherComponent.tsx

...in return function
 <postButton name="orders" />

For now i have to type canPost and postMethod as undefined. that will fixed the issue. But it is not actually undefined. Anyone could suggest me how to handle this properly? What's the best approach?

Many thanks in advance :)

I found this weird issue as well. The sub-component is complaining as the properties of it seem mandatory.

I managed to fix it with a workaround.

This is the tsx file of the sub-component.

interface SubCompProps {
  dispatch: Dispatch;
  state: CustomState;
}

const SubComp = (props?: CompProps) => {
  const {dispatch, state} = props as CompProps;
  ...
};

const mapStateToProps = (state: any) => {
  return {...state[namespace]};
};

export default connect(mapStateToProps)(SubComp);

By changing the mandatory properties interface declaration from props: CompProps to props?: CompProps, and adding a forcible type declaration const {dispatch, state} = props as CompProps;, ts error went away. Now I can safely reference the sub-component without assigning any properties to it.

<React.Fragment>
      <SubComp/>
</React.Fragment>

Through it seems not a trouble for now, it is still not the best solution. It will be awesome if some ts dev guru could fix it once for all.