当使用PropTypes.InferProps和默认参数时，如何删除对象可能是'null'TS2531警告？

Question

我有一个简单的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，以便它知道默认参数值？

Answer 1

使用非空断言运算符!

first! +second!