VueTyped - Inheritance - Example #1

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.39/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('app').catch(console.log.bind(console));
  </script>
  </head>

  <body>
    <h2>VueTyped - Inheritance - Example #1</h2>
    <div id="app"></div>
  </body>

</html>

System.config({
  defaultJSExtensions: true,
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    'vue': 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js',
    'vue-typed': 'https://cdn.rawgit.com/budiadiono/vue-typed/dev/index.js',
    'typescript': 'https://raw.githubusercontent.com/Microsoft/TypeScript/master/lib/typescript.js',
  },
  packages: {
    app: {
      main: 'index.ts',
      defaultExtension: 'ts',
    }
  }
});

import { Component } from 'vue-typed'

@Component()
class Parent {
    foo: string = 'This is foo!'
} 

@Component({ template: '<div>{{foo}} {{bar}}</div>' })
class Child extends Parent {
    bar: string = 'This is bar!'
}


new Child().$mount('#app')