Vue3.x combined with typescript first experience

Start

npm install
npm run serve
npm run build

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 需要这样处理,详见官方文档 https://cn.vuejs.org/v2/guide/typescript.html
<script lang="ts">
    import Vue from 'vue'
    import Component from 'vue-class-component'
    @Component
    export default class App extends Vue {}
</script>

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

https://github.com/vuejs/vue-cli-plugin-vue-next

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 {
  defineComponent,
  ref,
  onMounted,
  onUpdated,
  onUnmounted,
} from "vue";

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

</script>

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: https://github.com/vue3/vue3-router4-typescript

#vuejs #vue #javascript