Skip to content

Commit 91ebd2b

Browse files
committed
Initial section on Props and some formatting/typo fixes
1 parent ad61b45 commit 91ebd2b

File tree

1 file changed

+58
-9
lines changed

1 file changed

+58
-9
lines changed

README.md

+58-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Vue+TypeScript Cheatsheets
22

3-
Cheatsheets for experienced Vue developers getting started with TypeScript
3+
Cheatsheets for experienced Vue developers getting started with TypeScript.
44

55
# Section 1: Setup
66

@@ -84,21 +84,21 @@ const Component = defineComponent({
8484
})
8585
```
8686

87-
### Class Component
88-
[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components and it integrates well with TypeScript.
87+
### Class Components
88+
[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript.
8989

9090
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).
9191

9292

93-
To get started with both libraries, in your existing Vue project, run:
93+
To get started with both libraries in your existing Vue project, run:
9494
```
9595
npm install --save vue-class-component
9696
npm install --save vue-property-decorator
9797
```
9898

99-
You only need to import `vue-property-decorator` into your `.vue` file as it extends off `vue-class-component`.
99+
You only need to import `vue-property-decorator` into your `.vue` file as it extends `vue-class-component`.
100100

101-
You can now write components like this:
101+
You can now write TS in your components like this:
102102

103103
```vue
104104
<template>
@@ -110,10 +110,9 @@ You can now write components like this:
110110
</div>
111111
</template>
112112
113-
<script>
113+
<script lang="ts">
114114
import { Vue, Component } from "vue-property-decorator";
115115
116-
117116
@Component
118117
export default class Hello extends Vue {
119118
@@ -144,8 +143,58 @@ export default class Hello extends Vue {
144143
```
145144
See the [full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data).
146145

146+
> _Class components should not confused with the now abandoned [Class API proposal](https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121)._
147+
148+
## Props
149+
150+
`PropType` can be used to annote props with a particular object shape.
151+
152+
```vue
153+
import Vue, { PropType } from 'vue'
154+
155+
<script lang="ts">
156+
import Vue from "vue";
157+
158+
interface PersonInfo {
159+
firstName: string,
160+
surname: string,
161+
age: number
162+
}
163+
164+
export default Vue.extend({
165+
166+
name: "InfoCard",
167+
props: {
168+
info: {
169+
type: Object as PropType<PersonInfo>,
170+
required: true
171+
}
172+
}
173+
});
174+
</script>
175+
176+
```
177+
178+
With vue-class-components and vue-property-decorator, you can use the `Prop` decorator:
179+
180+
```vue
181+
<script lang="ts">
182+
import { Vue, Component, Prop } from "vue-property-decorator";
147183
184+
interface PersonInfo {
185+
firstName: string,
186+
surname: string,
187+
age: number
188+
}
189+
190+
@Component
191+
export default class InfoCard extends Vue {
192+
@Prop({ required: true }) readonly info: PersonInfo;
193+
}
194+
</script>
195+
196+
```
148197

149198
# Other Vue + TypeScript resources
150199
- Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
151-
- 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/
200+
- Focuses a lot on class components and vue-property-decorator - https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/

0 commit comments

Comments
 (0)