Skip to content

Commit 437f4af

Browse files
authored
Merge pull request #6 from typescript-cheatsheets/chiubaca-branch
Class Components & Props
2 parents 16d104c + 7e41f6d commit 437f4af

File tree

1 file changed

+111
-3
lines changed

1 file changed

+111
-3
lines changed

README.md

Lines changed: 111 additions & 3 deletions
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
- [Vue 3 specifics](vue-3.md)
66

@@ -87,6 +87,114 @@ const Component = defineComponent({
8787
});
8888
```
8989

90-
# Other Vue + TypeScript resources
90+
### Class Components
91+
[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript.
92+
93+
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).
94+
95+
96+
To get started with both libraries in your existing Vue project, run:
97+
```
98+
npm install vue-class-component vue-property-decorator
99+
```
100+
101+
You only need to import `vue-property-decorator` into your `.vue` file as it extends `vue-class-component`.
102+
103+
You can now write TS in your components like this:
104+
105+
```vue
106+
<template>
107+
<div>
108+
{{ count }}
109+
<button v-on:click="increment">+</button>
110+
<button v-on:click="decrement">-</button>
111+
{{ computedValue }}
112+
</div>
113+
</template>
114+
115+
<script lang="ts">
116+
import { Vue, Component } from "vue-property-decorator";
117+
118+
@Component
119+
export default class Hello extends Vue {
120+
121+
count: number = 0
122+
vue: string = "vue"
123+
ts: string = "ts"
124+
125+
// Lifecycle methods can be accessed like this
126+
mounted() {
127+
console.log('component mounted')
128+
}
129+
130+
// Method are component methods
131+
increment(): void {
132+
this.count++
133+
}
134+
135+
decrement(): void {
136+
this.count--
137+
}
138+
139+
// Computed values are getters
140+
get computedValue(): string {
141+
return `${vue} and ${ts} rocks!`
142+
}
143+
}
144+
</script>
145+
```
146+
See the [full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data).
147+
148+
> _Class components should not confused with the now abandoned [Class API proposal](https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121)._
149+
150+
## Props
91151

92-
- Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
152+
`PropType` can be used to annotate props with a particular object shape.
153+
154+
```vue
155+
import Vue, { PropType } from 'vue'
156+
157+
<script lang="ts">
158+
import Vue from "vue";
159+
160+
interface PersonInfo {
161+
firstName: string,
162+
surname: string,
163+
age: number
164+
}
165+
166+
export default Vue.extend({
167+
168+
name: "InfoCard",
169+
props: {
170+
info: {
171+
type: Object as PropType<PersonInfo>,
172+
required: true
173+
}
174+
}
175+
});
176+
</script>
177+
```
178+
179+
With vue-class-components and vue-property-decorator, you can use the `Prop` decorator:
180+
181+
```vue
182+
<script lang="ts">
183+
import { Vue, Component, Prop } from "vue-property-decorator";
184+
185+
interface PersonInfo {
186+
firstName: string,
187+
surname: string,
188+
age: number
189+
}
190+
191+
@Component
192+
export default class InfoCard extends Vue {
193+
@Prop({ required: true }) readonly info: PersonInfo;
194+
}
195+
</script>
196+
```
197+
198+
# Other Vue + TypeScript resources
199+
- Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy