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

Question

我正在编写 React 打字稿，可选 prop-types 检查有问题。下面是我的代码：

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)]),
};

像这样声明时，我的打字稿以某种方式在 className 中抛出错误。这是错误：

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'.

这看起来很奇怪，因为正如我在文档中所读，prop-types 应该是 可选的 并接受 undefined。任何人都知道如何解决这个问题，谢谢。

更新：我认为问题出在PropTypes.arrayOf(PropTypes.string)。 arrayOf 导致错误。

我的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": "^3.4.2"

Answer 1

当可选值在打字稿中可能是 undefined 或 null 时，您应该准确设置它们的类型。如果您处于 strict 模式，您有两种选择：

1.设置 undefineds 和 nulls

的类型

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

2。更改 tsconfig 以跳过 null 和 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__/**"]
}

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

Error in optional prop-types check in typescript

javascript

typescript

reactjs

react-proptypes