我不想允许将未定义的值传递给组件

Question

我正在使用swr
swr中的数据类型为IAge|undefined
我不想将undefined传递给AgeComponent，所以我希望age的类型为IAge
由于AgeComponent中不允许未定义类型"IAge|undefined"不可分配给类型"IAge"。类型"undefined"不可分配给类型"IAge"。t错误

如果我不想在AgeComponent道具的时代允许未定义，我该怎么办？

import useSWR from 'swr';
import { IAge } from 'domain/age_groups';
export const useAgeGroups = () => {
const path = `age_groups`;
const { data, error } = useSWR<IAge>(path);
return {
ages: data,
agesLoading: !error && !data && data === undefined,
agesError: error,
};
};

const Index: FunctionComponent = () => {
const { ages, agesLoading } = useAgeGroups();
return (
<>
<div>
{agesLoading && <div>loading</div>}
<AgeComponent age={ages}/>
</div>
</>
);
};
export default Index;

Answer 1

刚刚使用！！

注意：！！不是操作员，只是！操作员两次

const Index: FunctionComponent = () => {
const { ages, agesLoading } = useAgeGroups();
const defaultAge = 0; 
return (
<>
<div>
{agesLoading && <div>loading</div>}
<AgeComponent age={!!ages ? age : defaultAge}/>
</div>
</>
);
};

Answer 2

const Index: FunctionComponent = () => {
const { ages, agesLoading } = useAgeGroups();
return (
<>
<div>
{agesLoading && <div>loading</div>}
{ages && <AgeComponent age={ages}/>}
</div>
</>
);
};
export default Index;

通过这种方式，TS将推断ages是在传递给道具时定义的