Cheatsheets for experienced Vue developers getting started with TypeScript.
- Using the Vue CLI , you can select the TypeScript plugin to be setup in a new a Vue project.
# 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>- 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.
npm init vite-app <project-name>
cd <project-name>
npm install
npm run devnote:
strict:truestricter inference for data properties onthis. If you do not use it,thiswill always be treated asany
// tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"moduleResolution": "node"
}
}Add lang="ts" to the script tag to declare TS as the lang used.
<script lang='ts'>...</script>In Vue 2.x you need to define components with Vue.component or Vue.extend:
<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
import { defineComponent } from 'vue';
const Component = defineComponent({
// type inference enabled
});PropType can be used to annotate props with a particular object shape.
import Vue, { PropType } from 'vue'
<script lang="ts">
import Vue from "vue";
interface PersonInfo {
firstName: string,
surname: string,
age: number
}
export default Vue.extend({
name: "InfoCard",
props: {
info: {
type: Object as PropType<PersonInfo>,
required: true
}
}
});
</script>Alternatively, you can also annote your prop types with an anonymous function:
import Vue from 'vue'
<script lang="ts">
import Vue from "vue";
interface PersonInfo {
firstName: string,
surname: string,
age: number
}
export default Vue.extend({
name: "InfoCard",
props: {
info: {
type: Object as () => PersonInfo,
required: true
}
}
});
</script>You can enforce types on Vue data properties by annotating the return data object:
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:
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 like this does not provide any type safety. If for example, the contents property was missing in newPost, TypeScript would not catch this error.
Typing the return type for your computed properties is important especially when this is involved as TypeScript sometimes has trouble infering the type.
export default Vue.extend({
data() {
return {
name: 'World',
}
},
computed: {
greet(): string { //👈 Remember to annotate your computed properties like so.
return 'Hello ' + this.name
},
}
})- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent