このサイトは、特にやりたいこともなく無気力に生きる汚い中年おじさんデザイナー佐藤文彦のポートフォリオサイトです。
応援よろしくお願いします。

Typescriptでのエラー対処法

2021/09/24

Object is possibly 'null'.

@Component({
  async asyncData({ $content, params }) {
    const posts = await $content('posts/' + params.slug).fetch()
    return { posts }
  },
})
export default class Index extends Vue {
  head() {
    return {
      title: this.posts.title
    }
  }
}

this.posts.titleがnullになる場合があるとのことで以下のエラーが発生しました。

Object is possibly 'null'.

対処法1

簡単な対処法として、対象のオブジェクトに!の修飾子を追加します。

export default class Index extends Vue {
  head() {
    return {
      title: this.posts!.title
    }
  }
}

対処法2

nullでないことを保証する。

export default class Index extends Vue {
  head() {
    return {
      title: this.posts ? this.posts.title : ''
    }
  }
}

対処法3

tsconfig.jsonに"strictNullChecks":falseを追加する。

{
  ...
  "strictNullChecks":false,
  ...
}

カテゴリ

新規記事