You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+33-29Lines changed: 33 additions & 29 deletions
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,8 @@
2
2
3
3
Cheatsheets for experienced Vue developers getting started with TypeScript
4
4
5
+
-[Vue 3 specifics](vue-3.md)
6
+
5
7
#Section 1: Setup
6
8
7
9
##Prerequisites
@@ -11,53 +13,54 @@ Cheatsheets for experienced Vue developers getting started with TypeScript
11
13
12
14
##Vue + TypeScript Starter Kits
13
15
14
-
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.
16
+
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.
15
17
16
-
```bash
17
-
# 1. Install Vue CLI, if it's not already installed
18
-
npm install --global @vue/cli
18
+
```bash
19
+
# 1. Install Vue CLI, if it's not already installed
20
+
npm install --global @vue/cli
19
21
20
-
# 2. Create a new project, then choose the "Manually select features" option
21
-
vue create<my-project-name>
22
-
```
22
+
# 2. Create a new project, then choose the "Manually select features" option
23
+
vue create<my-project-name>
24
+
```
23
25
24
26
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.
25
27
26
-
>⚠ Currently in beta. Do not use in production.
28
+
>⚠ Currently in beta. Do not use in production.
27
29
28
-
```bash
29
-
npm init vite-app<project-name>
30
-
cd<project-name>
31
-
npm install
32
-
npm run dev
33
-
```
30
+
```bash
31
+
npm init vite-app<project-name>
32
+
cd<project-name>
33
+
npm install
34
+
npm run dev
35
+
```
34
36
35
37
#Section 2: Getting Started
36
38
37
39
##Recommended`ts.config` setup
38
40
39
-
>note:`strict:true` stricter inference for data properties on`this`. If you do not use it,`this` will always be treated as`any`
41
+
>note:`strict:true` stricter inference for data properties on`this`. If you do not use it,`this` will always be treated as`any`
42
+
40
43
```json
41
44
// tsconfig.json
42
45
{
43
-
"compilerOptions": {
44
-
"target":"esnext",
45
-
"module":"esnext",
46
-
"strict":true,
47
-
"moduleResolution":"node"
48
-
}
46
+
"compilerOptions": {
47
+
"target":"esnext",
48
+
"module":"esnext",
49
+
"strict":true,
50
+
"moduleResolution":"node"
51
+
}
49
52
}
50
53
```
51
54
52
55
##Usage in`.vue` files
56
+
53
57
Add`lang="ts"` to the script tag to declare TS as the`lang` used.
58
+
54
59
```js
55
-
<script lang="ts">
56
-
...
57
-
</script>
60
+
<script lang='ts'>...</script>
58
61
```
59
62
60
-
In Vue 2.x you needto define components with`Vue.component` or`Vue.extend`:
63
+
In Vue 2.x you need to define components with`Vue.component` or`Vue.extend`:
61
64
62
65
```js
63
66
<script lang="ts">
@@ -77,12 +80,13 @@ export default Vue.extend({
77
80
In Vue 3.x you can use`defineComponent` to get type inference in Vue component options
78
81
79
82
```js
80
-
import {defineComponent }from'vue'
83
+
import {defineComponent }from'vue';
81
84
82
85
constComponent=defineComponent({
83
-
// type inference enabled
84
-
})
86
+
// type inference enabled
87
+
});
85
88
```
86
89
87
90
#Other Vue + TypeScript resources
88
-
- Views on Vue podcast -https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
91
+
92
+
- Views on Vue podcast -https://devchat.tv/views-on-vue/vov-076-typescript-tell-all-with-jack-koppa/
