如何将接口自定义为TypeScript上的一种用途

Question

我有这段代码，我想在Link组件上使用接口Link，但我不想总是添加需要使用Link组件的linkType属性。当我不申报时，我想要适当的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>`
 ...
`

Answer 1

如果我对你的理解是正确的，你可以通过以下方式做到这一点：

使linkType属性可选：

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

然后将'default'设置为linkType的默认值

  const { href, children, linkType = 'default' } = props