Как избежать предупреждения «Объект, возможно, нулевой» для свойств, которые будут заполнены в будущем

Question

Я использую Typescript с vue.Проблема в том, что я объявил свойство экземпляра с именем categoryList, которое будет заполнено, когда компонент будет отображаться во время выполнения с массивом из вызова API.Поэтому, когда я ссылаюсь на это свойство в другом методе, подобном этому:

this.categoryList.length && this.categoryList[0], поскольку я знаю, что это будет иметь некоторое значение, когда метод будет выполняться

TS выдает мне предупреждение.

Поскольку categoryList будет массивом Object, если я получу к нему доступ таким образом

this.categoryList[0].source_id

, я получу следующее предупреждение

Вместо этого, если я получу к нему доступ вот так this.categoryList[0]

Я получу следующее предупреждение

Но какможно ли избежать такого рода предупреждений в тех случаях, когда в будущем во время выполнения будет назначено значение, на которое ссылается свойство экземпляра.

class Alerts extends Vue {
    private activeView: number = VIEW.NEW; 
    private categoryList: [] = [];

    mounted() {
      this.fetchCategories()
    }

    /*
     * method to fetch from an api call
     */
    fetchCategories() {
      this.$axios.get(CATEGORY_URL).then((res) => {
          categoryList = res.data
      })
    }

    doSomethingWithCategories() {
       // have to use categoryList here
       const use = this.categoryList.length && this.categoryList[0] // This warns me that Object is possibly undefined
       // ...
    }

}

По рекомендации @Mark, я уже использую условные выражения, чтобыцените доступность, но все еще получаете предупреждение.

Answer 1

Вот ваша проблема:

 private categoryList: [] = [];

Должно быть:

 private categoryList: YourDataType[] = [];

Когда вы определяете массив как тип [], вы, по сути, говорите Typescript, что значение этой переменнойбудет только кортеж размером 0 или [].

Answer 2

Интересно отметить: если вы точно знаете, что categoryList будет иметь значение при выполнении кода, тогда вы можете избежать предупреждения с помощью следующего хака.Но не рекомендуется использовать его часто, так как мы должны применять нулевые / неопределенные проверки везде, где это необходимо.

this.categoryList![0].source_id

!сообщает машинописному тексту, что предшествующий ему объект всегда будет иметь значение при выполнении кода.

Для получения дополнительной информации, пожалуйста, проверьте этот ответ .