使用 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!

Answer 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>;
};

Answer 3

这是一个 proptypes 与打字稿相结合的超级骗子法师额外烦人的东西。我得到的唯一解决方法是使用 "strictNullChecks": false 但这本质上意味着你对待不对待空案例。

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

How to remove Object is possibly 'null' TS2531 warning when using PropTypes.InferProps and default parameters?

javascript

typescript

reactjs

react-proptypes