类型'never []上不存在属性，有什么问题？答案

【问题标题】：Property does not exist on type 'never[], What is wrong?类型'never []上不存在属性，有什么问题？
【发布时间】：2019-01-31 06:39:17
【问题描述】：

所有，我是 React+Typescript 主题的新手。在我的示例代码中，我得到 json 对象并将一个属性打印到控制台上。来自服务器的数据成功来了。但是通过尝试使输出我收到消息“Property 'album' does not exist on type 'never[]'”，尽管所有类型都已定义。我哪里错了？我应该以某种方式初始化该州的“画廊”吗？

    import React, { Component, Props } from 'react';
import axios from 'axios';


const API = 'http://www.mydomain/testapi/';
const DEFAULT_QUERY = 'test.php';


type Image = {
  id: number,
  name: string,
  title: string,
  date: string,
  size: number
}

type Album = {
  id: number,
  name: string,
  path: string,
  images: Image[]
}


interface State {
 jsonFromServer: string,
 isLoading: boolean,
 errorMsg: string,
 buttonClicked: boolean,
 gallery:Album[]
}


class App extends React.Component {

  state = {
    isLoading: false,
    errorMsg: '',
    buttonClicked: false,
    jsonFromServer: "",
    gallery:[] 
    }

  getInfo() {

    this.setState({ isLoading: true, buttonClicked: true });
    axios.get(API + DEFAULT_QUERY)
      .then(result => this.setState({
        gallery: result.data.gallery,
        isLoading: false,
        jsonFromServer: result.data

      }))
      .catch(error => this.setState({
        errorMsg: error.message,
        isLoading: false
      }));
  }

  render() {
    .....
    if (this.state.buttonClicked) {
      this.state.galerie.length > 0 ? console.log('=>', this.state.gallery.album.id) : '';
    }

 ......
  }
}

export default App;

【问题讨论】：

你能解释一下你到底想达到什么目标吗？

标签： reactjs typescript

【解决方案1】：

您定义了state，但没有指定它的类型。因此，Typescript 将根据初始化推断 state 的类型。由于galerie 是一个数组但没有元素，因此打字稿可以推断出的最佳和最安全的类型是never[]

解决办法是给state成员注解：

class App extends React.Component {

  state:State  = {
    isLoading: false,
    errorMsg: '',
    buttonClicked: false,
    jsonFromServer: "",
    gallery:[] 
  }
  //...
}

【讨论】：

这个解决方案对我有用，但我不明白为什么。您提到“由于 galerie 是一个数组但没有元素，因此打字稿可以推断的最佳和最安全的类型永远是 []”，我可以理解自从状态初始化为空以来没有元素，但是为什么打字稿推断既然状态接口将 galery 定义为一个专辑，它也有一个指定其类型的接口？为什么他从不使用接口中指定的类型？ “注释状态成员”是什么意思（除了代码修改）？

【解决方案2】：

您的图库是一个数组，您正试图像访问对象一样访问它。试试这个渲染方法：

  render() {
    .....
    if (this.state.buttonClicked) {
      this.state.galerie.length > 0 ? console.log('=>', this.state.gallery!.album.id) : ''; //it should work now
    }

 ......
  }

【讨论】：