在 Typescript 中处理 React 的 ‘default props‘

在 JS 中处理 react 的 default props 是一件比较容易的事情。但是 TS 有类型检查在，最开始的时候，我采用了以下的做法:

type Props = {
  image: ImageSourcePropType;
  size: number;
};

const ImageContainer = (
  props: Props = {
    image: require('../../asset/image/icon/default-avatar.png'),
    size: 50,
  },
) => {
  return (
      ...
  );
};

这种做法的确让 props 初始化了，但是却在 TS 的类型检查下错了，TS 检测不到这个默认值的存在，导致我在里面写了大量的冗余代码去处理。

后来应付完客户之后，我回去重新思考了这个问题，然后稍微总结了可以两种方法来写 default props。

纯 Typescript 写法

type Props = {
  image: ImageSourcePropType;
  size: number;
};

const ImageContainer = ({
  image = require('../asset/image/default-avatar.png'),
  size = 50,
}: Props) => {
  return (
      ...
  );
};

React.FC 写法

const ImageContainer: React.FC<{
  image: ImageSourcePropType;
  size: number;
}> = ({
  image = require('../../asset/image/icon/default-avatar.png'),
  size = 50,
}) => {
  return (
      ...
  );
};