├── LICENSE
├── vue-3.md
├── class-components.md
└── README.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 typescript-cheatsheets
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/vue-3.md:
--------------------------------------------------------------------------------
 1 | # This document is for Vue-3 _specific_ syntax
 2 | 
 3 | ### Setup Template Attribute Syntax
 4 | 
 5 | ⚠️ This feature is still a WIP, and is an active RFC. [Follow the conversation](https://github.com/vuejs/rfcs/pull/182) to stay up to date with the lifecycle.
 6 | 
 7 | This provides a better DX when using the setup function in Vue SFCs.
 8 | Type inference still works, and you don't need to use `defineComponent`..
 9 | It's important to note that this is just **syntactic sugar**, and still get's compiled down to a component
10 | using `defineComponent` and the `setup` function.
11 | 
12 | ```vue
13 | <script setup lang="ts">
14 | import { ref } from 'vue';
15 | 
16 | export const welcome = ref('Welcome to Vue 3 with TS!');
17 | </script>
18 | ```
19 | 
20 | `props` and the `context` object work as well.
21 | For TS inference, declare them using TS syntax.
22 | 
23 | ```vue
24 | <script setup="props, ctx" lang="ts">
25 | import { computed } from 'vue'
26 | 
27 | declare const props: {
28 |     name: string
29 | }
30 | 
31 | export const welcome = computed(() => `Welcome, ${props.name}!`)
32 | ```
33 | 
34 | ## Composition API
35 | 
36 | ### Refs
37 | 
38 | 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:
39 | 
40 | ```ts
41 | import {ref} from "vue"
42 | 
43 | interface PersonInfo { 
44 |   firstName: string,
45 |   surname: string,
46 |   age: number
47 | }
48 | 
49 | const people = ref<PersonInfo[]>([])
50 | 
51 | ```
52 | 
53 | 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.
54 | 
55 | ```ts
56 | 
57 | import { ref, Ref } from "vue";
58 | 
59 | type ApiRequest = () => Promise<void>;
60 | 
61 | // When using this function we can supply the type via generics
62 | export function useAPI<T>(url: RequestInfo, options?: RequestInit) {
63 |   
64 |   const response = ref() as Ref<T>;  // 👈 note we're typing our ref using `as`
65 | 
66 |   const request: ApiRequest = async () => {
67 |     const resp = await fetch(url, options);
68 |     const data = await resp.json();
69 |     response.value = data;
70 |   };
71 | 
72 |   return { response, request };
73 | }
74 | 
75 | ```


--------------------------------------------------------------------------------
/class-components.md:
--------------------------------------------------------------------------------
  1 | # Class Components
  2 | 
  3 | ## Overview
  4 | 
  5 | [Vue Class Components](https://class-component.vuejs.org/) offers an alternative class-style syntax for Vue components which integrates well with TypeScript.
  6 | 
  7 | 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).
  8 | 
  9 | 
 10 | To get started with both libraries in your existing Vue project, run: 
 11 | ```
 12 | npm install vue-class-component vue-property-decorator
 13 | ```
 14 | 
 15 | You only need to import `vue-property-decorator` into your `.vue` file as it extends `vue-class-component`. 
 16 | 
 17 | You can now write TS in your components like this:
 18 | 
 19 | ```vue
 20 | <template>
 21 |   <div>
 22 |     {{ count }}
 23 |     <button v-on:click="increment">+</button>
 24 |     <button v-on:click="decrement">-</button>
 25 |     {{ computedValue }}
 26 |   </div>
 27 | </template>
 28 | 
 29 | <script lang="ts">
 30 | import { Vue, Component } from "vue-property-decorator";
 31 | 
 32 | @Component
 33 | export default class Hello extends Vue {
 34 | 
 35 |   count: number = 0
 36 |   vue: string = "vue"
 37 |   ts: string = "ts"
 38 | 
 39 |   // Lifecycle methods can be accessed like this
 40 |   mounted() {
 41 |     console.log('component mounted')
 42 |   }
 43 | 
 44 |   // Method are component methods
 45 |   increment(): void {
 46 |     this.count++
 47 |   }
 48 | 
 49 |   decrement(): void {
 50 |     this.count--
 51 |   }
 52 | 
 53 |   // Computed values are getters
 54 |   get computedValue(): string {
 55 |     return `${vue} and ${ts} rocks!`
 56 |   }
 57 | }
 58 | </script>
 59 | ```
 60 | See the [full guide for Vue Class Components](https://class-component.vuejs.org/guide/class-component.html#data).
 61 | 
 62 | > _Class components should not confused with the now abandoned [Class API proposal](https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121)._
 63 | 
 64 | ## Props
 65 | You can use the `Prop` decorator to annoate your prop types like so:
 66 | 
 67 | ```ts
 68 | <script lang="ts">
 69 | import { Vue, Component, Prop } from "vue-property-decorator";
 70 | 
 71 | interface PersonInfo { 
 72 |   firstName: string,
 73 |   surname: string,
 74 |   age: number
 75 | }
 76 | 
 77 | @Component
 78 | export default class InfoCard extends Vue {
 79 |   @Prop() readonly info!: PersonInfo;
 80 |   @Prop({ default: false }) readonly admin?: boolean;
 81 | }
 82 | </script>
 83 | ```
 84 | Is equivalent to:
 85 | 
 86 | ```ts
 87 | import Vue from "vue-property-decorator";
 88 | import Vue, { PropType } from 'vue'
 89 | 
 90 | interface PersonInfo {
 91 |   firstName: string,
 92 |   surname: string,
 93 |   age: number
 94 | }
 95 | export default {
 96 |   props: {
 97 |     info: {
 98 |       type: Object as PropType<PersonInfo>,
 99 |       required: true
100 |     },
101 |     admin: {
102 |       type: Boolean,
103 |       default: false
104 |     }
105 |   },
106 | }
107 | 
108 | ```


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue+TypeScript Cheatsheets
  2 | 
  3 | Cheatsheets for experienced Vue developers getting started with TypeScript.
  4 | 
  5 | -   [Vue 3 specifics](vue-3.md)
  6 | -   [Class Components & Decorators](class-components.md)
  7 | 
  8 | # Section 1: Setup
  9 | 
 10 | ## Prerequisites
 11 | 
 12 | 1. A good understanding of [Vue.js](https://vuejs.org/)
 13 | 2. Read the TypeScript support section in the Vue docs [2.x](https://vuejs.org/v2/guide/typescript.html) | [3.x](https://v3.vuejs.org/guide/typescript-support.html#typescript-support)
 14 | 
 15 | ## Vue + TypeScript Starter Kits
 16 | 
 17 | 1. Using the [Vue CLI](https://vuejs.org/v2/guide/installation.html#CLI) , you can select the [TypeScript plugin](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript) to be setup in a new a Vue project.
 18 | 
 19 | ```bash
 20 | # 1. Install Vue CLI, if it's not already installed
 21 | npm install --global @vue/cli
 22 | 
 23 | # 2. Create a new project, then choose the "Manually select features" option
 24 | vue create <my-project-name>
 25 | ```
 26 | 
 27 | 2. [Vite](https://github.com/vitejs/vite) is a new build tool by Evan You. It currently only works with Vue 3.x but supports TypeScript out-of-the-box.
 28 | 
 29 | > ⚠ Currently in beta. Do not use in production.
 30 | 
 31 | ```bash
 32 | npm init vite-app <project-name>
 33 | cd <project-name>
 34 | npm install
 35 | npm run dev
 36 | ```
 37 | 
 38 | # Section 2: Getting Started
 39 | 
 40 | ## Recommended `ts.config` setup
 41 | 
 42 | > note: `strict:true` stricter inference for data properties on `this`. If you do not use it, `this` will always be treated as `any`
 43 | 
 44 | ```json
 45 | // tsconfig.json
 46 | {
 47 |     "compilerOptions": {
 48 |         "target": "esnext",
 49 |         "module": "esnext",
 50 |         "strict": true,
 51 |         "moduleResolution": "node"
 52 |     }
 53 | }
 54 | ```
 55 | 
 56 | ## Usage in `.vue` files
 57 | 
 58 | Add `lang="ts"` to the script tag to declare TS as the `lang` used.
 59 | 
 60 | ```js
 61 | <script lang='ts'>...</script>
 62 | ```
 63 | 
 64 | In Vue 2.x you need to define components with `Vue.component` or `Vue.extend`:
 65 | 
 66 | ```js
 67 | <script lang="ts">
 68 | import Vue from "vue";
 69 | 
 70 | export default Vue.extend({
 71 | 
 72 |   // type inference enabled
 73 |   name: "HelloWorld",
 74 |   props: {
 75 |     msg: String
 76 |   }
 77 | });
 78 | </script>
 79 | ```
 80 | 
 81 | In Vue 3.x you can use `defineComponent` to get type inference in Vue component options
 82 | 
 83 | ```js
 84 | import { defineComponent } from 'vue';
 85 | 
 86 | const Component = defineComponent({
 87 |     // type inference enabled
 88 | });
 89 | ```
 90 | 
 91 | ## Props
 92 | 
 93 | `PropType` can be used to annotate props with a particular object shape.
 94 | 
 95 | ```vue
 96 | import Vue, { PropType } from 'vue'
 97 | 
 98 | <script lang="ts">
 99 | import Vue from "vue";
100 | 
101 | interface PersonInfo { 
102 |   firstName: string,
103 |   surname: string,
104 |   age: number
105 | }
106 | 
107 | export default Vue.extend({
108 |   
109 |   name: "InfoCard",
110 |   props: {
111 |     info: {
112 |       type: Object as PropType<PersonInfo>,
113 |       required: true
114 |     }
115 |   }
116 | });
117 | </script>
118 | ```
119 | 
120 | Alternatively, you can also annote your prop types with an anonymous function:
121 | 
122 | ```vue
123 | import Vue from 'vue'
124 | 
125 | <script lang="ts">
126 | import Vue from "vue";
127 | 
128 | interface PersonInfo { 
129 |   firstName: string,
130 |   surname: string,
131 |   age: number
132 | }
133 | 
134 | export default Vue.extend({
135 |   
136 |   name: "InfoCard",
137 |   props: {
138 |     info: {
139 |       type: Object as () => PersonInfo,
140 |       required: true
141 |     }
142 |   }
143 | });
144 | </script>
145 | ```
146 | 
147 | ## Data Properties (Options API)
148 | 
149 | You can enforce types on Vue data properties by annotating the return data object:
150 | 
151 | ```ts
152 | interface Post {
153 |   title: string;
154 |   contents: string;
155 |   likes: number;
156 | }
157 | 
158 | export default Vue.extend({
159 |   data(): { newPost: Post } {
160 |     return {
161 |       newPost: {
162 |         title: "",
163 |         contents: "",
164 |         likes: 0
165 |       }
166 |     };
167 |   }
168 | });
169 | ```
170 | 
171 | It might be tempting to annotate your Vue data properties using `as` like this:
172 | 
173 | ```ts
174 | interface Post {
175 |   title: string;
176 |   contents: string;
177 |   likes: number;
178 | }
179 | 
180 | export default Vue.extend({
181 |   data() {
182 |     return {
183 |       newPost: {
184 |         title: "",
185 |         contents: "",
186 |         likes: 0
187 |       } as Post // ❌ Avoid doing this
188 |     };
189 |   }
190 | });
191 | ```
192 | 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. 
193 | 
194 | ## Computed Properties (Options API)
195 | 
196 | Typing the return type for your computed properties is important especially when `this` is involved as TypeScript sometimes has trouble infering the type. 
197 | 
198 | ```ts
199 | 
200 | export default Vue.extend({
201 |   data() {
202 |     return {
203 |       name: 'World',
204 |     }
205 |   },
206 |   computed: {
207 |     greet(): string {  //👈 Remember to annotate your computed properties like so. 
208 |       return 'Hello ' + this.name
209 |     },
210 |   }
211 | })
212 | 
213 | ```
214 | 
215 | > 
216 | 
217 | 
218 | # Other Vue + TypeScript resources
219 | - Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
220 | - Focuses a lot on class components and vue-property-decorator - https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/
221 | - Vue 3 Hooks and Type Safety with TypeScript - https://www.youtube.com/watch?v=aJdi-uEKYAc
222 | 


--------------------------------------------------------------------------------