CODEWITHSUNDEEP
reactjstypescriptreact-proptypes
Lin Du
Lin Du

Reputation: 102277

prop-types array of string is incompatible with TypeScript type

The prop-types of list is PTs.arrayOf(PTs.string), is incompatible with TypeScript type. The list props can be empty array.

import React from 'react';
import PTs from 'prop-types';

interface AppProps {
  list?: string[];
}
const App: React.FC<AppProps> = ({ list }) => {
  return <div>app</div>
}

App.displayName = 'App';
App.defaultProps = {
  list: []
};
App.propTypes = {
  list: PTs.arrayOf(PTs.string) //<- error here
};

Got TS type error:

Type 'Requireable<(string | null | undefined)[]>' is not assignable to type 'Validator<string[] | null | undefined>'.
  Types of property '[nominalTypeHack]' are incompatible.
    Type '{ type: (string | null | undefined)[] | null | undefined; } | undefined' is not assignable to type '{ type: string[] | null | undefined; } | undefined'.
      Type '{ type: (string | null | undefined)[] | null | undefined; }' is not assignable to type '{ type: string[] | null | undefined; }'.
        Types of property 'type' are incompatible.
          Type '(string | null | undefined)[] | null | undefined' is not assignable to type 'string[] | null | undefined'.
            Type '(string | null | undefined)[]' is not assignable to type 'string[]'.
              Type 'string | null | undefined' is not assignable to type 'string'.
                Type 'undefined' is not assignable to type 'string'.(2322)

TypeScript Playground

Upvotes: 1

Views: 1272

Answers (1)

Teneff
Teneff

Reputation: 32158

You should change the definition to:

App.propTypes = {
  list: PTs.arrayOf(PTs.string.isRequired)
};

TS Playground

Upvotes: 1

Related Questions