|
1 | 1 | #Vue+TypeScript Cheatsheets |
2 | 2 |
|
3 | | -Cheatsheets for experienced Vue developers getting started with TypeScript |
| 3 | +Cheatsheets for experienced Vue developers getting started with TypeScript. |
4 | 4 |
|
5 | 5 | -[Vue 3 specifics](vue-3.md) |
6 | 6 |
|
@@ -87,6 +87,114 @@ const Component = defineComponent({ |
87 | 87 | }); |
88 | 88 | ``` |
89 | 89 |
|
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 |
91 | 151 |
|
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/ |