vue.jsとtypescriptを使って開発しています
下記のエラーが出たのでUser.tsの型定義をしているファイルでnullを許容するように locality: null | string = ''と書いたのですがエラーが解消されませんでした。
わかる人いましたらご教授お願いしたいです。

bugsnag-vue.js?3181:30 TypeError: Cannot read property 'locality' of null

//User.ts
export class User {
  id: number = 0
  name: string = ''
  area: Area = []

export class Area {
  id: string = ''
  locality: null | string = ''
}

  <div>
   {{ user.area.id}}, {{ user.area.locality }}
  </div>
　　export default class UserPage extends Vue {
  　　user: User = new User()

  beforeMount() {
    this.fetchUser()
  }

  async fetchUser() {
    const res = await UserData.getUser(this.$axios, id)
    this.setUser(res)
  }

  setUser(user: User) {
    this.user = user
  }
}
</script>

miyabi_pudding

2020/06/25 10:53

Areaは、メソッドとかはつけないんでしょうか？であるならば、interfaceかtype定義の方が柔軟に構築できるかと。（そして、ある工夫ができます）

miyabi_pudding

2020/06/26 02:05

あれ、 Userの中もおかしい箇所ありますし、そのインスタンス定義もおかしいです。 area: Area = [] は、Area型のプロパティにも関わらず、空配列を代入していますが、それはなぜですか？というかその時点でエラー起きないのが不思議なくらいです。

行動規範の内容に同意します

回答1件

interfaceに変えていいなら、
下記のように、?をつけて、非必須プロパティにすればいいのではないでしょうか？
ただ、プロパティがない時は、undefinedとなるのは注意が必要です。

typescript
1export interface Area {
2  id: string;
3  locality?: string;
4}

追記

また、ちょいちょい構文がおかしいので、そこも解消すれば治るかもしれません。
Userクラスに関しても、特にメソッド定義などがなければ、
interfaceで十分かと思います。
（下記構文では、閉じてないことから、メソッドなどがあることを想定してクラスのままにしておきます）

typescript
1//User.ts
2// User
3export class User {
4  id: number = 0;
5  name: string = '';
6  // 型付きなら、[]（これだと配列オブジェクトになってしまう）ではなく、{}とし、初期化代入には、同型（同じプロパティを有する）のオブジェクトの代入が必要
7  area: Area = {id: ''};
8  
9  // 他にも定義などが続く想定
10}
11
12export interface Area {
13  id: string;
14  // プロパティがない事を許容する
15  locality?: string;
16}
17// あと、TypeScriptは、文末に";"はつけた方がいいかも。（一応セミコロンレスには対応しているが）

あと、根本的な原因として、テンプレートにて、user.areaがnullなのに、そのプロパティを呼び出そうとしてる、
だったようですね。
私の見落としでした。
下記のように、userにarea、localityがある場合に表示に、変更したらどうでしょうか。

html
1<div>
2<!-- とにかく、user.area.localityが存在する場合に、それを表示、という構文に変更 -->
3 {{ user.area.id}}, {{ typeof user.area !== undefined && typeof user.area !== null && typeof user.area.locality !== undefined && typeof user.area.locality !== null ? user.area.locality : '' }}
4</div>