React Typescript中Props接口能否为属性设置取值范围与初始化默认值？

错误原因 #

你原来的写法存在两个语法问题：

• TS 的 interface 仅做类型声明，不能直接在内部给属性设置默认值，默认值属于运行时逻辑，需要在实际使用变量的位置定义
• 要限制字符串的取值范围，不需要额外加 string 类型声明，直接使用字符串字面量联合类型即可，加了string会让类型放宽到任意字符串，失去限制效果

正确实现方式 #

1. 修正类型定义

直接把finco的类型指定为'TAF' | 'ACC'的联合类型：

interface Props {
  finco?: 'TAF' | 'ACC'
}

这时候如果你给finco赋值这两个字符串之外的值，TS 会直接抛出类型错误。

2. 额外添加默认值（如果需要）

如果需要默认值为TAF，在实际使用该类型的位置设置即可，举两个常见场景的例子：

• 普通函数参数场景：

function handleProps(props: Props) {
  const { finco = 'TAF' } = props
  // 后续逻辑
}

• React 组件场景：

const DemoComponent = ({ finco = 'TAF' }: Props) => {
  return <div>{finco}</div>
}

内容的提问来源于stack exchange，提问作者yesia Plorina