可选链是一个裂缝式的新JavaScript功能，我们今天可以在React和TypeScript应用程序中使用。这个功能是什么，它对React和TypeScript应用有什么用？让我们来了解一下。
一个简单的组件
让我们从一个简单的组件开始：
type Person = {
name: string,
subscription?: Subscription
};
type Subscription = {
amount: number,
lastPayment?: Payment
};
type Payment = {
amount: number,
date: Date
};
type Props = {
person: Person
};
const PersonCard: React.FC<Props> = ({
person
}) => {
return (
<div>
<div>
<span>Name: </span>
<span>{person.name}</span>
</div>
<div>
<span>Subscription amount: </span>
<span>{person.subscription.amount}</span> </div>
<div>
<span>Last payment date: </span>
<span>
{person.subscription.lastPayment.date} </span>
</div>
</div>
);
};
突出显示的几行引起了类型错误，*Object可能是 "未定义"，*因为subscription 属性是可选的，因此，可能是undefined 。subscription 对象内的lastPayment 属性也是如此。
我们希望在没有订阅的情况下，对金额不做任何渲染。当没有最后一次付款时，我们也想不显示最后一次付款日期。所以，我们通常会使用短路评估。
<div>
<span>Subscription amount: </span>
<span>{person.subscription && person.subscription.amount}</span></div>
<div>
<span>Last payment date: </span>
<span>
{person.subscription && person.subscription.lastPayment && person.subscription.lastPayment.date} </span>
</div>
在可选道具上使用可选链
可选链给了我们一个更简单更短的解决方案:
<div>
<span>Subscription amount: </span>
<span>{person.subscription?.amount}</span></div>
<div>
<span>Last payment date: </span>
<span>{person.subscription?.lastPayment?.date}</span></div>
注意subscription 和lastPayment 属性后面的? 。这是可选的链式运算符，意味着如果它前面的属性是null 或undefined ，那么在访问其成员时就不会发生错误。相反，该表达式将被自动短路，并返回undefined 。很好!
在可选函数道具上使用可选链
让我们来看看一个不同的组件:
type Props = {
value?: string,
onValueChange?: (value: string) => void
};
const Textbox: React.FC<Props> = ({
value,
onValueChange
}) => {
return (
<input type="text"
value={value}
onChange={e =>
onValueChange(e.currentTarget.value)
}
/>
);
};
我们在突出显示的一行得到了一个类型错误，因为onValueChange 是可选的，可以是undefined 。
我们可以使用可选链来解决这个错误:
<input
type="text"
value={value}
onChange={e =>
onValueChange?.(e.currentTarget.value)
}
/>
注意，我们需要在可选链式运算符 (?) 后面加一个. ；否则，我们会得到一个解析错误。
我现在可以使用可选链了吗？
可以，如果你运行的是React和TypeScript的最新版本:
- TypeScript 3.7支持可选链式
- Babel 7.8.0支持可选链式
- 用create react app 3.3.0创建的项目也支持可选链式
