Vue3.x combined with typescript first experience


npm install
npm run serve
npm run build

Vue3.x combined with typescript first experience

1. Design goals of Vue3.0

  • Smaller\faster-Vue 3.0 is about half the size, only 10kB
  • Enhanced TypeScript support
  • Improve API design consistency-easy to read
  • Improve its maintainability
  • Open more low-level functions

vue3.x adopts Function-based API format to organize the code, making it easier to compress the code and the compression efficiency is higher. Due to the modification of the component declaration, the logic is completed in the way of function combination, which is naturally combined with typescript. (The components in vue2.x are passed in a series of options through declarations, so using typeScript under 2.x requires a decorator. vue-class-component)

  // vue2.x 要想使用ts 需要这样处理,详见官方文档
<script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    export default class App extends Vue {}

2. What are the advantages of typescript

1. Increase the readability and maintainability of the code
  • Most functions know what they are doing by looking at the type definition
  • Static type checking to reduce runtime errors
2. The community is active and big cows are using it
  • Under the upsurge of vue3, typescript will become mainstream afterwards, learn quickly

Three, build vue3.x + typescript + vue-router environment

1. Install vue-cli globally
npm install -g @vue/cli
2. Initialize the vue project
vue create vue-next-project

After entering this command, it is necessary to select Manually select featuresat least make babel typescript routerchosen, ( vuexsee whether their case). As shown below:

I don’t know the reference articles of vue-cli

3. Upgrade to vue3.x project

cd vue-next-project
vue add vue-next

This command will automatically help you upgrade vue2.x to vue3.x, including upgrading the corresponding dependencies in the project and replacing the template code, like:vue-router vuex

After completing the above three steps, the main environment is set up. Seeing that there is an additional tsconfig.json configuration file in the directory just created, you can configure it according to your own and project needs.

Next, we need to deal with it briefly to make it support TypeScript. (The template cli has not yet completed the typescript template code)

  • The shims-vue.d.tscontents of the file are changed a bit, this operation should be a little something error.
// declare module "*.vue" {
//   import Vue from 'vue';
//   export default Vue;
// }
declare module "*.vue" {
    import {defineComponent} from 'vue'
    const Component: ReturnType<typeof defineComponent>;
    export default Component
  • The use in the component needs to be declared script lang="ts", and then used defineComponentto wrap it.
<script lang="ts">
import {
} from "vue";

export default defineComponent({
  name: "hello world",
  props: {},
  setup(props: any) {
    const count = ref(0);
    const increase = (): void => {
    function test(x: number): string {
      return props.toString();
    // test('number');
    // 生命周期
    onMounted(() => {
      console.log("mounted vue3 typescript");
    onUpdated(() => {
      console.log("updated vue3 typescript");
    onUnmounted(() => {
      console.log("onUnmounted vue3 typescript");
    // 暴露给模板
    return {


Life cycle correspondence

Combined API corresponding to the 2.x version life cycle

beforeCreate → 使用 setup()

created → 使用 setup()

beforeMount → onBeforeMount

mounted → onMounted

beforeUpdate → onBeforeUpdate

updated → onUpdated

beforeDestroy → onBeforeUnmount

destroyed → onUnmounted

errorCaptured → onErrorCaptured

4. Attach the official cheats for learning vue-next and typescript

5. If you don’t want to build, you can also directly pull to the github demo

vue3+typescript environment

Download Details:

Author: vue3

Source Code:

#vuejs #vue #javascript

Vue3.x combined with typescript first experience
29.00 GEEK