TypeScript中自定义接口如何设置属性默认值简化组件传参

需要在Link组件中使用ILink接口，实现以下效果：调用Link组件时无需手动传入linkType属性，未传该属性时自动使用default作为默认值。
现有代码如下：

index.ts #

import { StyledLink, ILink } from './styled'

export default function Link(props: ILink) {
  const { href, children, linkType } = props

  return (
    <StyledLink href={href} linkType={!linkType ? 'default' : linkType}>
      {props.children ? (children) : (href)}
    </StyledLink>
  )
}

styled.ts #

export interface ILink {
  href: string
  linkType: 'default' | 'applications'
  children?: React.ReactNode
}

export const StyledLink = styled.a<ILink>`
 ...
`

一共需要改两处：

• 调整ILink接口定义，将linkType标记为可选属性
  原有接口中linkType是必填项，即使组件内部做了值兜底，TS类型检查仍会强制调用方传入该属性，需要给属性名后加?标记为可选，修改后styled.ts的接口部分代码如下：

export interface ILink {
  href: string
  // 加?标记为可选属性
  linkType?: 'default' | 'applications'
  children?: React.ReactNode
}

• 在组件解构props时直接设置linkType的默认值，替代原有JSX中的三元判断，写法更简洁符合React规范，修改后index.ts代码如下：

import { StyledLink, ILink } from './styled'

export default function Link(props: ILink) {
  // 解构时直接设置默认值，当外部未传linkType或传入undefined时，自动取'default'
  const { href, children, linkType = 'default' } = props

  return (
    <StyledLink href={href} linkType={linkType}>
      {children ?? href}
    </StyledLink>
  )
}

注：这里把原有children的判断换成了空值合并运算符??，可以避免children传入0、空字符串这类合法falsy值时，被错误替换为href的问题。

改完之后调用Link组件时，不传linkType就会自动使用default值，传入applications时则正常使用传入值，TS类型校验也不会报错。

内容的提问来源于stack exchange，提问作者Pedro Peregrina