Merge pull request #3 from typescript-cheatsheets/chiubaca-getting-started

Author: swyxio

README.md

@@ -1,12 +1,42 @@
-# vue-typescript-cheatsheet
+# Vue+TypeScript Cheatsheets
 
 Cheatsheets for experienced Vue developers getting started with TypeScript
 
-- https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
+# Section 1: Setup
 
+## Prerequisites
 
-## 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`
+1. A good understanding of [Vue.js](https://vuejs.org/)
+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)
+
+## 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. 
+
+  ```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. [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.
+
+  ```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`
 ```json
 // tsconfig.json
 {
@@ -19,19 +49,40 @@ note: `strict:true` stricter inference for data properties on `this`. If you do
 }
 ```
 
-## Usage in .vue files
-add `lang="ts"` to the script tag to declare TS as the lang used.
-```html
+## Usage in `.vue` files
+Add `lang="ts"` to the script tag to declare TS as the `lang` used.
+```js
 <script lang="ts">
   ...
 </script>
 ```
 
-use `defineComponent` to get type inference in Vue component options
+In Vue 2.x you need  to define components with `Vue.component` or `Vue.extend`:
+
+```js
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+
+  // type inference enabled
+  name: "HelloWorld",
+  props: {
+    msg: String
+  }
+});
+</script>
+```
+
+In Vue 3.x you can use `defineComponent` to get type inference in Vue component options
+
 ```js
 import { defineComponent } from 'vue'
 
 const Component = defineComponent({
   // 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/