TypeScript:如何告诉 TypeScript 我在哪种情况下?
TypeScript: How to tell TypeScript in which If case I am?
我正在使用 TypeScript 构建一个 React Native 应用程序。我的初创公司最近从 JavaScript 切换到 TypeScript,我正在迁移代码。
我有一个 <FlatList />
,其中包含两种类型的场所:餐厅和酒吧。 Restaurant 和 Bar 共享一些属性,但它们也不共享。例如 属性 servesFood
是餐厅独有的。
renderItem
函数如下所示:
renderItem = ({ item }: { item: Restaurant | Bar }) => {
return item.servesFood ? (
// ... Restaurant code
) : (
// ... Bar code
)
问题是,在这个三元运算符的条件下,TypeScript 抛出错误:
Property 'servesFood' does not exist on type 'Restaurant | Bar'.
Property 'servesFood' does not exist on type 'Bar'
此外,在访问特定类型的属性时,特定类型的代码中也存在 linting 错误。
注意: 由于各种原因,我不能让他们共享一个 属性 并在 first
上将一个设置为 true 并将 false
在另一个上。
那么我如何告诉 TypeScript 在 If 子句/三元运算符的一部分中项目是 Restaurant 类型而在另一部分是 bar 类型,这样这些 linting 错误就会消失。
您可以使用类型保护来缩小参数的类型。
您可以使用基于 servesFood
字段的可区分联合:
interface Restaurant{
servesFood: true
}
interface Bar {
servesFood?: false
}
const renderItem = ({ item }: { item: Restaurant | Bar }) => {
return item.servesFood ? (
// ... Restaurant code
) : (
// ... Bar code
)
或者如果接口不共享 servesFood
你可以使用 in
类型保护
interface Restaurant{
servesFood: true
}
interface Bar {
drinks: true
}
const renderItem = ({ item }: { item: Restaurant | Bar }) => {
return 'servesFood' in item ? (
item.servesFood
) : (
// ... Bar code
item.drinks
);
您可以简单地比较对象的 key/value,这样您就可以知道当前项目是否存在 属性 servesFood。如果值是 null
则表示 item
不包含 属性 servesFood
像这样:
renderItem = ({ item }: { item: Restaurant | Bar }) => {
return ((item["servesFood"] != null) ? (
// ... Restaurant code, it exists the property servesFood
) : (
// ... Bar code, it doesn't exists the property servesFood so it is null
))
我正在使用 TypeScript 构建一个 React Native 应用程序。我的初创公司最近从 JavaScript 切换到 TypeScript,我正在迁移代码。
我有一个 <FlatList />
,其中包含两种类型的场所:餐厅和酒吧。 Restaurant 和 Bar 共享一些属性,但它们也不共享。例如 属性 servesFood
是餐厅独有的。
renderItem
函数如下所示:
renderItem = ({ item }: { item: Restaurant | Bar }) => {
return item.servesFood ? (
// ... Restaurant code
) : (
// ... Bar code
)
问题是,在这个三元运算符的条件下,TypeScript 抛出错误:
Property 'servesFood' does not exist on type 'Restaurant | Bar'.
Property 'servesFood' does not exist on type 'Bar'
此外,在访问特定类型的属性时,特定类型的代码中也存在 linting 错误。
注意: 由于各种原因,我不能让他们共享一个 属性 并在 first
上将一个设置为 true 并将 false
在另一个上。
那么我如何告诉 TypeScript 在 If 子句/三元运算符的一部分中项目是 Restaurant 类型而在另一部分是 bar 类型,这样这些 linting 错误就会消失。
您可以使用类型保护来缩小参数的类型。
您可以使用基于 servesFood
字段的可区分联合:
interface Restaurant{
servesFood: true
}
interface Bar {
servesFood?: false
}
const renderItem = ({ item }: { item: Restaurant | Bar }) => {
return item.servesFood ? (
// ... Restaurant code
) : (
// ... Bar code
)
或者如果接口不共享 servesFood
你可以使用 in
类型保护
interface Restaurant{
servesFood: true
}
interface Bar {
drinks: true
}
const renderItem = ({ item }: { item: Restaurant | Bar }) => {
return 'servesFood' in item ? (
item.servesFood
) : (
// ... Bar code
item.drinks
);
您可以简单地比较对象的 key/value,这样您就可以知道当前项目是否存在 属性 servesFood。如果值是 null
则表示 item
不包含 属性 servesFood
像这样:
renderItem = ({ item }: { item: Restaurant | Bar }) => {
return ((item["servesFood"] != null) ? (
// ... Restaurant code, it exists the property servesFood
) : (
// ... Bar code, it doesn't exists the property servesFood so it is null
))