Merge pull request #7 from typescript-cheatsheets/vue-3

add vue-3 specific doc, add setup syntactic templating sugar.

Author: Roninii

README.md

@@ -2,6 +2,8 @@
 
 Cheatsheets for experienced Vue developers getting started with TypeScript
 
+-   [Vue 3 specifics](vue-3.md)
+
 # Section 1: Setup
 
 ## Prerequisites
@@ -11,53 +13,54 @@ Cheatsheets for experienced Vue developers getting started with TypeScript
 
 ## Vue + TypeScript Starter Kits
 
-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. 
+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.
 
-  ```bash
-  # 1. Install Vue CLI, if it's not already installed
-  npm install --global @vue/cli
+```bash
+# 1. Install Vue CLI, if it's not already installed
+npm install --global @vue/cli
 
-  # 2. Create a new project, then choose the "Manually select features" option
-  vue create <my-project-name>
-  ```
+# 2. Create a new project, then choose the "Manually select features" option
+vue create <my-project-name>
+```
 
 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.
 
-  > ⚠ Currently in beta. Do not use in production.
+> ⚠ Currently in beta. Do not use in production.
 
-  ```bash
-  npm init vite-app <project-name>
-  cd <project-name>
-  npm install
-  npm run dev
-  ```
+```bash
+npm init vite-app <project-name>
+cd <project-name>
+npm install
+npm run dev
+```
 
 # Section 2: Getting Started
 
 ## Recommended `ts.config` setup
 
->note: `strict:true` stricter inference for data properties on `this`. If you do not use it, `this` will always be treated as `any`
+> note: `strict:true` stricter inference for data properties on `this`. If you do not use it, `this` will always be treated as `any`
+
 ```json
 // tsconfig.json
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "moduleResolution": "node"
-  }
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "esnext",
+        "strict": true,
+        "moduleResolution": "node"
+    }
 }
 ```
 
 ## Usage in `.vue` files
+
 Add `lang="ts"` to the script tag to declare TS as the `lang` used.
+
 ```js
-<script lang="ts">
-  ...
-</script>
+<script lang='ts'>...</script>
 ```
 
-In Vue 2.x you need  to define components with `Vue.component` or `Vue.extend`:
+In Vue 2.x you need to define components with `Vue.component` or `Vue.extend`:
 
 ```js
 <script lang="ts">
@@ -77,12 +80,13 @@ export default Vue.extend({
 In Vue 3.x you can use `defineComponent` to get type inference in Vue component options
 
 ```js
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
 const Component = defineComponent({
-  // type inference enabled
-})
+    // type inference enabled
+});
 ```
 
 # Other Vue + TypeScript resources
-- Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
+
+-   Views on Vue podcast - https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/

vue-3.md

@@ -0,0 +1,32 @@
+# This document is for Vue-3 _specific_ syntax
+
+### Setup Template Attribute Syntax
+
+⚠️ 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.
+
+This provides a better DX when using the setup function in Vue SFCs.
+Type inference still works, and you don't need to use `defineComponent`..
+It's important to note that this is just **syntactic sugar**, and still get's compiled down to a component
+using `defineComponent` and the `setup` function.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+
+export const welcome = ref('Welcome to Vue 3 with TS!');
+</script>
+```
+
+`props` and the `context` object work as well.
+For TS inference, declare them using TS syntax.
+
+```vue
+<script setup="props, ctx" lang="ts">
+import { computed } from 'vue'
+
+declare const props: {
+    name: string
+}
+
+export const welcome = computed(() => `Welcome, ${props.name}!`)
+```