使用 PropTypes.InferProps 和默认参数时，如何删除 Object is possible is 'null' TS2531 警告？答案

【问题标题】：How to remove Object is possibly 'null' TS2531 warning when using PropTypes.InferProps and default parameters?使用 PropTypes.InferProps 和默认参数时，如何删除 Object is possible is 'null' TS2531 警告？
【发布时间】：2020-04-12 15:59:33
【问题描述】：

我有一个简单的 React 组件，可以将两个数字相加。它是用 TypeScript 编写的，并使用 @types/prop-types。

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

const AddPropsTypes = {
  first: PropTypes.number,
  second: PropTypes.number
};

type Props = PropTypes.InferProps<typeof AddPropsTypes>;
const Add: React.FC<Props> = ({ first = 1, second = 2 }) => {
  return <div>{first + second}</div>;
};

Add.propTypes = AddPropsTypes;

export default Add;

Typescript 抱怨 first 和 second 可能是 'null' ts(2531)，但它们具有默认参数值。

制作这些PropTypes.number.isRequired 显然会使警告消失，但我不希望它们是必需的。

我知道我可以在 jsx 中使用 <div>{(first || 1) + (second || 2)}</div> 消除此警告，但我不应该两次定义默认值。目前，我忽略了行上方的警告：

{/* lol https://github.com/Microsoft/TypeScript/issues/27552
// @ts-ignore */}

有什么方法可以定义PropTypes 或InferProps 以便它知道默认参数值？

【问题讨论】：

标签： javascript reactjs typescript react-proptypes

【解决方案1】：

这是一个超级骗子法师额外烦人的事情，它结合了 proptypes 和 typescript。我得到的唯一解决方法是使用 "strictNullChecks": false 但这本质上意味着你对待不对待空案例。

【讨论】：

【解决方案2】：

一个问题我看到没有为数组函数参数定义类型

const Add: React.FC<Props> = ({ first = 1, second = 2 }) => {
  return <div>{first + second}</div>;
};

怎么样

const Add: React.FC<Props> = ({ first = 1, second = 2 }: Props) => {
  return <div>{first + second}</div>;
};

或

const Add: React.FC<Props> = ({ first = 1, second = 2 }: {
  first: PropTypes.number,
  second: PropTypes.number
}) => {
  return <div>{first + second}</div>;
};

【讨论】：

【解决方案3】：

使用非空断言运算符!

first! +second!

【讨论】：

谢谢！我不得不关闭“@typescript-eslint/no-non-null-assertion”规则，但我对此非常满意。