打字稿中可选的道具类型检查错误

Question

I'm writing react typescript and have problem with optional prop-types check. Below is my code:

import PropTypes from 'prop-types';

interface InputNumberProps {
  className?: string | string[];
}  

export const InputNumberAutosize = (props: InputNumberProps, ref: refType) => {  
   ...
}

const InputNumberAutoSizeComponent = React.forwardRef(InputNumberAutosize);

InputNumberAutoSizeComponent.propTypes = {
  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
};

Somehow my typescript throw error in className when declare like this. Here is the error:

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

Type '{ type: string | (string | null | undefined)[] | null | undefined; } | undefined' is not assignable to type '{ type: string | string[] | null | undefined; } | undefined'.     

Type '{ type: string | (string | null | undefined)[] | null | undefined; }' is not assignable to type '{ type: string | string[] | null | undefined; }'.       

Types of property 'type' are incompatible.        

Type 'string | (string | null | undefined)[] | null | undefined' is not assignable to type 'string | string[] | null | undefined'.          

Type '(string | null | undefined)[]' is not assignable to type 'string | 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'.

This looks weird because as I read in the documents, the prop-types should be optional and accept undefined . Anyone know how to fix this, thanks.

Update : I think the problem come from PropTypes.arrayOf(PropTypes.string) . The arrayOf cause the error.

My tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "module": "commonjs",
        "target": "es5",
        "lib": ["es2015", "dom"],
        "types": ["node", "jest"],
        "jsx": "react",
        "moduleResolution": "node",
        "sourceMap": true,
        "allowJs": false,
        "strict": true,
        "declaration": true,
        "esModuleInterop": true
    },
    "exclude": ["src/**/__tests__/**"]
}

Typescript version : "typescript": "^3.4.2"

Answer 1

You should set exactly the types of your optional values when they might be undefined or null in typescript. If you are in strict mode you have two options for this situation:

1. Set the type for undefined s and null s

interface InputNumberProps {
  className?: undefined | string | (string | undefined | null)[];
}  

2. Change your tsconfig to skip checking of null and undefined :

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "module": "commonjs",
        "target": "es5",
        "lib": ["es2015", "dom"],
        "types": ["node", "jest"],
        "jsx": "react",
        "moduleResolution": "node",
        "sourceMap": true,
        "allowJs": false,
        "strict": true,
        "strictNullChecks": false, // this will skip that checking 
        "declaration": true,
        "esModuleInterop": true
    },
    "exclude": ["src/**/__tests__/**"]
}