Initial section on Props and some formatting/typo fixes

chiubaca · chiubaca · commit 91ebd2bd5c6a · 2020-08-23T15:03:17.000+01:00
diff --git a/README.md b/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.
 
 # Section 1: Setup
 
@@ -84,21 +84,21 @@ const Component = defineComponent({
 })
 ```
 
-### Class Component
-[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components and it integrates well with TypeScript.
+### 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 recomended to install [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator).
 
 
-To get started with both libraries, in your existing Vue project, run: 
+To get started with both libraries in your existing Vue project, run: 
 ```
 npm install --save vue-class-component
 npm install --save vue-property-decorator
 ```
 
-You only need to import `vue-property-decorator` into your `.vue`  file as it extends off `vue-class-component`. 
+You only need to import `vue-property-decorator` into your `.vue` file as it extends `vue-class-component`. 
 
-You can now write components like this:
+You can now write TS in your components like this:
 
 ```vue
 <template>
@@ -110,10 +110,9 @@ You can now write components like this:
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
 
-
 @Component
 export default class Hello extends Vue {
 
@@ -144,8 +143,58 @@ export default class Hello extends Vue {
 ```
 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
+
+`PropType` can be used to annote 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 quite a lot on class components and third party libs like vue-property-decorator   https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/
+- Focuses a lot on class components and vue-property-decorator - https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/
