Skip to content

katoto/vue3-typescipt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

开始

npm install
npm run serve
npm run build

vue3.x 结合 typescript 初体验

一、Vue3.0 的设计目标

  • 更小\更快 - Vue 3.0 大小大概减少一半,只有 10kB
  • 加强 TypeScript 支持
  • 加强 API 设计一致性 - 易读
  • 提高自身可维护性
  • 开放更多底层功能

vue3.x 采用 Function-based API 形式组织代码,使其更容易压缩代码且压缩效率也更高,由于 修改了组件的声明方式,以函数组合的方式完成逻辑,天然与 typescript 结合。(vue2.x 中的组件是通过声明的方式传入一系列 options 的,所以在 2.x 下使用 typeScript 需要装饰器的方式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>

二、typescript 有什么优点

1、增加代码的可读性与可维护性

  • 大部分函数看类型定义就知道是干嘛的
  • 静态类型检查,减少运行时错误

2、社区活跃,大牛都在用

  • 在 vue3 热潮下,之后 typescript 要成为主流,快学

三、搭建 vue3.x + typescript + vue-router 环境

1、全局安装 vue-cli

npm install -g @vue/cli

2、初始化 vue 项目

vue create vue-next-project

这里在输入命令后,需要选择Manually select features, 至少要把 babel typescript router 选上,(vuex 看自身情况是否需要)。如下图:

不清楚 vue-cli 的可参考文章

3、升级为 vue3.x 项目

cd vue-next-project
vue add vue-next

这个命令会自动帮你把 vue2.x 升级到 vue3.x ,包括项目中对应的依赖进行升级与模板代码替换,像:vue-router vuex

完成以上三步主体环境算搭建完成,看刚才创建的目录里多了个 tsconfig.json 配置文件,可以根据自身与项目需要,进行配置。

接下来需要简单处理一下,使其支持 typescript 形式。(模板 cli 还没完善 typescript 的模板代码)

  • shims-vue.d.ts文件中的内容修改一下,这步操作应该会少了一些报错。
// 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
}
  • 组件里使用需声明 script lang="ts" ,然后用defineComponent进行包裹,即可。
<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>

生命周期对应

四、附上学习 vue-next 与 typescript 的官方秘籍

五、不想搭建你也可以直接拉去 github demo

vue3+typescript 环境

About

vue3.x结合typescript环境

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published