Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit91ebd2b

Browse files
committed
Initial section on Props and some formatting/typo fixes
1 parentad61b45 commit91ebd2b

File tree

1 file changed

+58
-9
lines changed

1 file changed

+58
-9
lines changed

‎README.md

Lines changed: 58 additions & 9 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
#Section 1: Setup
66

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

87-
###ClassComponent
88-
[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue componentsand it integrates well with TypeScript.
87+
###ClassComponents
88+
[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue componentswhich 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 writeTS in yourcomponents 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-
- Focusesquitea lot on class components andthird party libs likevue-property-decoratorhttps://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)
[8]ページ先頭
©2009-2025 Movatter.jp