TypeScript React Default Optional Properties Demo

在react组件中，我们可以定义一些Optional的properties，比如：

type Props = {
  name: string,
  city?: string;
  emails?: string[],
}

在使用时，为了方便，通常在解构时会给一个默认值，比如这样：

function SomeComponent(props: Props) {
  const {name, city = '', emails = []} = props;
}

但是这样会存在一个风险：对于emails来说，如果外面没有显式传入值，则每次都会创建一个新的[]数组给它。

如果emails被用于某些hook的dependency，比如:

useEffect(() => {
  // do some expensive things
}, [emails]),

则该hook将被意外调用。因为emails每次都是一个新的[]，虽然看起来一样，实际上对于react hook来说，引用变了，会被视为变化。

为了解决该问题，我们可能有两种常用方案：

const defaultEmails: string[] = []
function SomeComponent(props: Props) {
  const {name, city = '', emails = defaultEmails} = props;
}

但这样的问题在于，如果组件内有多个optional的值，就需要分别处理，看起来乱并且比较容易漏掉，而且起名也比较困难，比如叫defaultEmails/emptyArray/EMPTY_STRING_ARRAY等等。

SomeComponent.defaultProps = {
  city: ''
  emails: []
}

它的问题在于哪怕我们这里给了默认值，但在类型层面，city和emails还是optional的，处理起来麻烦并且存在误会。

另外这种方式将会被deprecated

在这个demo里，我尝试利用typescript的类型来处理：

可以找到Props中的全部optional的property，供进一步使用
提供了两种withAll和withSome方法，即可以强行指定全部optional的值，也可以仅指定某些默认值，让其它一些不需要处理的继续保持optional
在给默认值时，使用 const {name, emails, city} = {...defaultProps, ...props} 的形式

注意：在typescript中，optional和undefined实际上被区分对待：

type Props = {
  aaa?: string,
  bbb: string | undefined
}

对于react组件来说，如果它的property是Props，那么外界调用时，只有aaa可以不提供，而bbb必须显式赋值（哪怕是undefined），所以我们在定义时，应该只关心aaa这样的optional类型

npm install
npm run demo

It will open page on browser automatically.

freewind-demos / typescript-react-default-optional-properties-withall-withsome-demo Goto Github PK