You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[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.
89
89
90
90
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).
91
91
92
92
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:
94
94
```
95
95
npm install --save vue-class-component
96
96
npm install --save vue-property-decorator
97
97
```
98
98
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`.
100
100
101
-
You can now write components like this:
101
+
You can now write TS in your components like this:
102
102
103
103
```vue
104
104
<template>
@@ -110,10 +110,9 @@ You can now write components like this:
110
110
</div>
111
111
</template>
112
112
113
-
<script>
113
+
<script lang="ts">
114
114
import { Vue, Component } from "vue-property-decorator";
See the [full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data).
146
145
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";
- 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