Javascript 财产'；x'；定义两种返回类型时不存在

以以下为例：

接口狗{
名称：string
}
常数likeDog=true
const getDog=（）：Dog | boolean=>{
const val=likeDog？{name:'fido'}：false
返回值
}
常量myComponent=（）：void=>{
const dog=getDog（）
//类型“boolean | Dog”上不存在属性“name”。
//类型“false”上不存在属性“name”
console.log（dog.name）//{
const[dog，setDog]=useState（false）
useffect（（）=>{
//我提出取回请求
fetchDog（）。然后（dog=>setDog（dog））
}, [])
如果（！狗）{
返回；
}
//类型“boolean | Dog”上不存在属性“name”。
//类型“false”上不存在属性“name”
返回{dog.name}
}

相同的编译器错误。在这种情况下，

dog

对于早期返回应该为false，但是在

getDog（）

解析之后，我们设置响应并进行渲染。我知道您可以执行

const[dog，setDog]=useState（）

和

if（dog）

的计算结果仍然是错误的，但这似乎不太明确。

这里正确的类型是

接口狗{
名称：string
}
常量myComponent=（）=>{
const[dog，setDog]=useState（false）//{
//我提出取回请求
fetchDog（）。然后（dog=>setDog（dog））
}, [])
如果（！狗）{
返回；
}
//类型“boolean | Dog”上不存在属性“name”。
//类型“false”上不存在属性“name”
返回{dog.name}
}

第二个代码片段在我看来非常合理。你觉得它有什么难看的地方吗？同意上面的说法。你也可以做

console.log（dog？.name？？false）

我觉得它也不难看，但是

{dog.name}

给我的编译错误与上面的代码片段相同。`boolean | Dog`类型上不存在`Property'name'，`false'类型上不存在`Property'name``您能提供一个指向显示此错误的web IDE的链接吗？现在。我缺少什么？啊哈！好的，我现在有布尔值，其中false是。`哦，先生！

interface Dog {
  name: string
}

const myComponent = () => {
  const [dog, setDog] = useState<Dog | false>(false) // <-- updated 

  useEffect(() => {
    // I make a fetch request
    fetchDog().then(dog => setDog(dog))
  }, [])

  if (!dog) {
    return;
  }

  // Property 'name' does not exist on type 'boolean | Dog'.
  // Property 'name' does not exist on type 'false'
  return <div>{dog.name}</div>
}