From ad61b453f1b65cb3cd5dee22ae3d4a35604c8332 Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Sun, 23 Aug 2020 09:58:32 +0100 Subject: [PATCH 01/12] Setting up Class components --- README.md | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/README.md b/README.md index 546d11a..bc2503b 100644 --- a/README.md +++ b/README.md @@ -84,5 +84,68 @@ const Component = defineComponent({ }) ``` +### Class Component +[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components and it integrates well with TypeScript. + +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). + + +To get started with both libraries, in your existing Vue project, run: +``` +npm install --save vue-class-component +npm install --save vue-property-decorator +``` + +You only need to import `vue-property-decorator` into your `.vue` file as it extends off `vue-class-component`. + +You can now write components like this: + +```vue + + + +``` +See the [full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data). + + + # Other Vue + TypeScript resources - Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/ +- 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/ \ No newline at end of file From 91ebd2bd5c6ab91eeea7ad9e147c30323eb2acbb Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Sun, 23 Aug 2020 15:03:17 +0100 Subject: [PATCH 02/12] Initial section on Props and some formatting/typo fixes --- README.md | 67 +++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 58 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index bc2503b..1f2d974 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Vue+TypeScript Cheatsheets -Cheatsheets for experienced Vue developers getting started with TypeScript +Cheatsheets for experienced Vue developers getting started with TypeScript. # Section 1: Setup @@ -84,21 +84,21 @@ const Component = defineComponent({ }) ``` -### Class Component -[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components and it integrates well with TypeScript. +### Class Components +[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript. 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). -To get started with both libraries, in your existing Vue project, run: +To get started with both libraries in your existing Vue project, run: ``` npm install --save vue-class-component npm install --save vue-property-decorator ``` -You only need to import `vue-property-decorator` into your `.vue` file as it extends off `vue-class-component`. +You only need to import `vue-property-decorator` into your `.vue` file as it extends `vue-class-component`. -You can now write components like this: +You can now write TS in your components like this: ```vue - + +``` + +With vue-class-components and vue-property-decorator, you can use the `Prop` decorator: + +```vue + + +``` # Other Vue + TypeScript resources - Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/ -- 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/ \ No newline at end of file +- Focuses a lot on class components and vue-property-decorator - https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/ \ No newline at end of file From 8c9b66272c207f05dc16262ed9135bb71de171b0 Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Mon, 24 Aug 2020 15:31:44 +0100 Subject: [PATCH 03/12] Update README.md Co-authored-by: swyx --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index d6920d4..a522df1 100644 --- a/README.md +++ b/README.md @@ -95,8 +95,7 @@ To have consistent support for decorators in your Vue components, it's also reco To get started with both libraries in your existing Vue project, run: ``` -npm install --save vue-class-component -npm install --save vue-property-decorator +npm install vue-class-component vue-property-decorator ``` You only need to import `vue-property-decorator` into your `.vue` file as it extends `vue-class-component`. From 7e41f6d5c153864ef884b733fe7302f08869f6cf Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Mon, 24 Aug 2020 16:02:58 +0100 Subject: [PATCH 04/12] Formatting and fixed typos --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a522df1..3758ecc 100644 --- a/README.md +++ b/README.md @@ -90,7 +90,7 @@ const Component = defineComponent({ ### Class Components [Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript. -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). +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). To get started with both libraries in your existing Vue project, run: @@ -149,7 +149,7 @@ See the [full guide for Vue Class Components](https://class-component.vuejs.org/ ## Props -`PropType` can be used to annote props with a particular object shape. +`PropType` can be used to annotate props with a particular object shape. ```vue import Vue, { PropType } from 'vue' @@ -174,7 +174,6 @@ export default Vue.extend({ } }); - ``` With vue-class-components and vue-property-decorator, you can use the `Prop` decorator: @@ -194,7 +193,6 @@ export default class InfoCard extends Vue { @Prop({ required: true }) readonly info: PersonInfo; } - ``` # Other Vue + TypeScript resources From f73c10f3d18550aa6b453a76e45d0af03303427c Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Sat, 29 Aug 2020 16:28:39 +0100 Subject: [PATCH 05/12] Initial section on vue data --- README.md | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/README.md b/README.md index 3758ecc..42d4e71 100644 --- a/README.md +++ b/README.md @@ -195,6 +195,53 @@ export default class InfoCard extends Vue { ``` +## Data Properties + +You can enforce types on Vue data properties by annotating the return data object: + +```ts +interface Post { + title: string; + contents: string; + likes: number; +} + +export default Vue.extend({ + data(): { newPost: Post } { + return { + newPost: { + title: "", + contents: "", + likes: 0 + } + }; + } +}); +``` + +It might be tempting to annotate your Vue data properties using `as` like this: + +```ts +interface Post { + title: string; + contents: string; + likes: number; +} + +export default Vue.extend({ + data() { + return { + newPost: { + title: "", + contents: "", + likes: 0 + } as Post // ❌ Avoid doing this + }; + } +}); +``` +Note that [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions) like this does not provide any type safety. If for example, the `contents` property was missing in `newPost`, TypeScript would not catch this error. + # Other Vue + TypeScript resources - Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/ - Focuses a lot on class components and vue-property-decorator - https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/ From 39c0be5b8c3365f9ba05d5fcf9dcafb2d6aa37cb Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Sun, 11 Oct 2020 09:01:13 +0100 Subject: [PATCH 06/12] Moved class components to a dedicated page --- README.md | 60 --------------------------------------------- class-components.md | 59 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 60 deletions(-) create mode 100644 class-components.md diff --git a/README.md b/README.md index 42d4e71..7261aa8 100644 --- a/README.md +++ b/README.md @@ -87,66 +87,6 @@ const Component = defineComponent({ }); ``` -### Class Components -[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript. - -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). - - -To get started with both libraries in your existing Vue project, run: -``` -npm install vue-class-component vue-property-decorator -``` - -You only need to import `vue-property-decorator` into your `.vue` file as it extends `vue-class-component`. - -You can now write TS in your components like this: - -```vue - - - -``` -See the [full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data). - -> _Class components should not confused with the now abandoned [Class API proposal](https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121)._ - ## Props `PropType` can be used to annotate props with a particular object shape. diff --git a/class-components.md b/class-components.md new file mode 100644 index 0000000..359a468 --- /dev/null +++ b/class-components.md @@ -0,0 +1,59 @@ +# Class Components +[Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript. + +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). + + +To get started with both libraries in your existing Vue project, run: +``` +npm install vue-class-component vue-property-decorator +``` + +You only need to import `vue-property-decorator` into your `.vue` file as it extends `vue-class-component`. + +You can now write TS in your components like this: + +```vue + + + +``` +See the [full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data). + +> _Class components should not confused with the now abandoned [Class API proposal](https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121)._ From d31fa1fece6ec0946753d3e119b02d2bd3470589 Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Sun, 11 Oct 2020 11:21:42 +0100 Subject: [PATCH 07/12] Moved over section re: props and class components over from readme.md --- class-components.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/class-components.md b/class-components.md index 359a468..146774e 100644 --- a/class-components.md +++ b/class-components.md @@ -1,4 +1,7 @@ # Class Components + +## Overview + [Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript. 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). @@ -57,3 +60,23 @@ export default class Hello extends Vue { See the [full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data). > _Class components should not confused with the now abandoned [Class API proposal](https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121)._ + +## Props +You can use the `Prop` decorator to annoate your prop types like so: + +```ts + +``` \ No newline at end of file From 7963ad93cad8230dee790e0c7845d552b01b6132 Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Sun, 11 Oct 2020 11:23:54 +0100 Subject: [PATCH 08/12] -Added link to class components md - Included section on Computed Properties --- README.md | 46 ++++++++++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 7261aa8..8d57f1d 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ Cheatsheets for experienced Vue developers getting started with TypeScript. - [Vue 3 specifics](vue-3.md) +- [Class Components & Decorators](class-components.md) # Section 1: Setup @@ -116,26 +117,7 @@ export default Vue.extend({ ``` -With vue-class-components and vue-property-decorator, you can use the `Prop` decorator: - -```vue - -``` - -## Data Properties +## Data Properties (Options API) You can enforce types on Vue data properties by annotating the return data object: @@ -182,6 +164,30 @@ export default Vue.extend({ ``` Note that [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions) like this does not provide any type safety. If for example, the `contents` property was missing in `newPost`, TypeScript would not catch this error. +## Computed Properties (Options API) + +Typing the return type for your computed properties is important especially when `this` is involved as TypeScript sometimes has trouble infering the type. + +```ts + +export default Vue.extend({ + data() { + return { + name: 'World', + } + }, + computed: { + greet(): string { //👈 Remember to annotate your computed properties like so. + return 'Hello ' + this.name + }, + } +}) + +``` + +> + + # Other Vue + TypeScript resources - Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/ - Focuses a lot on class components and vue-property-decorator - https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/ From 3908106341c303aaa402c8479be7f649563ad926 Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Thu, 15 Oct 2020 21:28:39 +0100 Subject: [PATCH 09/12] Expanded class components props example --- class-components.md | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/class-components.md b/class-components.md index 146774e..4e403c3 100644 --- a/class-components.md +++ b/class-components.md @@ -76,7 +76,33 @@ interface PersonInfo { @Component export default class InfoCard extends Vue { - @Prop({ required: true }) readonly info: PersonInfo; + @Prop() readonly info!: PersonInfo; + @Prop({ default: false }) readonly admin?: boolean; } +``` +Is equivalent to: + +```ts +import Vue from "vue-property-decorator"; +import Vue, { PropType } from 'vue' + +interface PersonInfo { + firstName: string, + surname: string, + age: number +} +export default { + props: { + info: { + type: Object as PropType, + required: true + }, + admin: { + type: Boolean, + default: false + } + }, +} + ``` \ No newline at end of file From ce4175bac07e4567490e4e17514b3cf3471c4113 Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Fri, 16 Oct 2020 17:30:53 +0100 Subject: [PATCH 10/12] Included alternative example to annoate props with anon function --- README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/README.md b/README.md index 8d57f1d..a4fc36c 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,33 @@ export default Vue.extend({ ``` +Alternatively, you can also annote your prop types with an anonymous function: + +```vue +import Vue from 'vue' + + +``` + ## Data Properties (Options API) You can enforce types on Vue data properties by annotating the return data object: From 6166ede2b1d57efcd959ae59e45801bd9ea6362f Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Mon, 19 Oct 2020 20:37:57 +0100 Subject: [PATCH 11/12] Typing ref's examples --- vue-3.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/vue-3.md b/vue-3.md index 62b93bb..5192996 100644 --- a/vue-3.md +++ b/vue-3.md @@ -30,3 +30,46 @@ declare const props: { export const welcome = computed(() => `Welcome, ${props.name}!`) ``` + +## Composition API + +### Refs + +Vue can infer the type of your `ref`'s but if you need to represent some more complex types you can do so with generics: + +```ts +import {ref} from "vue" + +interface PersonInfo { + firstName: string, + surname: string, + age: number +} + +const people = ref([]) + +``` + +Alternatively you can use casting with `as`. This should be used if the type is unknown. Consider this example where we create a composition wrapper function around `fetch` and we dont know the data structure that will be returned. + +```ts + +import { ref, Ref } from "vue"; + +type ApiRequest = () => Promise; + +// When using this function we can supply the type via generics +export function useAPI(url: RequestInfo, options?: RequestInit) { + + const response = ref() as Ref; // 👈 note we're typing our ref using `as` + + const request: ApiRequest = async () => { + const resp = await fetch(url, options); + const data = await resp.json(); + response.value = data; + }; + + return { response, request }; +} + +``` \ No newline at end of file From 81e087ea2c77bf41257b510284597e2ebbe08680 Mon Sep 17 00:00:00 2001 From: Alex Chiu Date: Mon, 19 Oct 2020 20:40:55 +0100 Subject: [PATCH 12/12] Added video by Modus Create, Inc to resources --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index a4fc36c..0d7ea93 100644 --- a/README.md +++ b/README.md @@ -218,3 +218,4 @@ export default Vue.extend({ # Other Vue + TypeScript resources - Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/ - Focuses a lot on class components and vue-property-decorator - https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/ +- Vue 3 Hooks and Type Safety with TypeScript - https://www.youtube.com/watch?v=aJdi-uEKYAc