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

使用非null断言运算符!

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

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

2 个答案: