JavaScript ベースの Vue.js プロジェクトのデータ構造を JSON Schema を使って守る ref: https://qiita.com/potato4d/items/3e40ae9f69fb9e012769

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <AppUser :user="user" />
  </div>
</template>

<script>
import AppUser from './components/AppUser.vue'

export default {
  name: 'app',
  components: {
    AppUser
  },
  computed: {
    user() {
      return {
        id: 1,
        screen_name: 'potato4d',
        display_name: 'potato4d',
        bio: 'foobar',
        avatar_url: 'https://potato4d.me/icon.png'
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

AppUser.vue

<template>
  <div>
    {{user.display_name}}(@{{user.screen_name}})
  </div>
</template>

<script>
import { UserProp } from '../schema/validator'

export default {
  props: {
    user: UserProp
  }
}
</script>

definitions.json

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "definitions": {
        "user": {
            "title": "user",
            "type": "object",
            "properties": {
                "id": {
                    "type": "number",
                    "title": "id"
                },
                "screen_name": {
                    "type": "string",
                    "title": "screen_name"
                },
                "display_name": {
                    "type": "string",
                    "title": "display_name"
                },
                "bio": {
                    "type": "string",
                    "title": "bio"
                },
                "avatar_url": {
                    "type": "string",
                    "title": "avatar_url"
                }
            },
            "required": [
                "avatar_url",
                "bio",
                "display_name",
                "id",
                "screen_name"
            ]
        }
    }
}

definitions.ts

export interface user {
  id: number
  screen_name: string
  display_name: string
  bio: string
  avatar_url: string
}

terminal

$ yarn add jsonschema

user.js

import definitions from './definitions.json'

export default {
  $schema: definitions.$schema,
  definitions: definitions.definitions,
  properties: {
    user: {
      $ref: '#/definitions/user'
    },
    required: [
      'user'
    ]
  }
}

validator.js

import { Validator } from 'jsonschema'
import user from './user'

const validator = new Validator

export function isUser(value) {
  return validator.validate({ user: value }, user).valid
}

export const UserProp = {
  type: Object,
  required: true,
  validator(value) {
    return isUser(value)
  }
}