Merge pull request #6 from typescript-cheatsheets/chiubaca-branch

Class Components & Props

Author: chiubaca

README.md

@@ -1,6 +1,6 @@
 # Vue+TypeScript Cheatsheets
 
-Cheatsheets for experienced Vue developers getting started with TypeScript
+Cheatsheets for experienced Vue developers getting started with TypeScript.
 
 -   [Vue 3 specifics](vue-3.md)
 
@@ -87,6 +87,114 @@ const Component = defineComponent({
 });
 ```
 
-# Other Vue + TypeScript resources
+### Class Components
+[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript.
+
+To have consistent support for decorators in your Vue components, it's also recommended to install [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator).
+
+
+To get started with both libraries in your existing Vue project, run: 
+```
+npm install vue-class-component vue-property-decorator
+```
+
+You only need to import `vue-property-decorator` into your `.vue` file as it extends `vue-class-component`. 
+
+You can now write TS in your components like this:
+
+```vue
+<template>
+  <div>
+    {{ count }}
+    <button v-on:click="increment">+</button>
+    <button v-on:click="decrement">-</button>
+    {{ computedValue }}
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+
+@Component
+export default class Hello extends Vue {
+
+  count: number = 0
+  vue: string = "vue"
+  ts: string = "ts"
+
+  // Lifecycle methods can be accessed like this
+  mounted() {
+    console.log('component mounted')
+  }
+
+  // Method are component methods
+  increment(): void {
+    this.count++
+  }
+
+  decrement(): void {
+    this.count--
+  }
+
+  // Computed values are getters
+  get computedValue(): string {
+    return `${vue} and ${ts} rocks!`
+  }
+}
+</script>
+```
+See the [full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data).
+
+> _Class components should not confused with the now abandoned [Class API proposal](https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121)._
+
+## Props
 
--   Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
+`PropType` can be used to annotate props with a particular object shape.
+
+```vue
+import Vue, { PropType } from 'vue'
+
+<script lang="ts">
+import Vue from "vue";
+
+interface PersonInfo { 
+  firstName: string,
+  surname: string,
+  age: number
+}
+
+export default Vue.extend({
+  
+  name: "InfoCard",
+  props: {
+    info: {
+      type: Object as PropType<PersonInfo>,
+      required: true
+    }
+  }
+});
+</script>
+```
+
+With vue-class-components and vue-property-decorator, you can use the `Prop` decorator:
+
+```vue
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+interface PersonInfo { 
+  firstName: string,
+  surname: string,
+  age: number
+}
+
+@Component
+export default class InfoCard extends Vue {
+  @Prop({ required: true }) readonly info: PersonInfo;
+}
+</script>
+```
+
+# Other Vue + TypeScript resources
+- Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
+- Focuses a lot on class components and vue-property-decorator - https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/