Vue3.0+TS 项目上手教程-技术圈

转自：Vue3拥抱TypeScript的正确姿势：https://juejin.im/post/6875713523968802829

一个完整的Vue3+Ts项目,支持.vue和.tsx写法

项目地址：https://github.com/vincentzyc/vue3-demo.git

TypeScript 是JS的一个超集，主要提供了类型系统和对ES6的支持，使用 TypeScript 可以增加代码的可读性和可维护性，在 react 和 vue 社区中也越来越多人开始使用TypeScript。从最近发布的 Vue3 正式版本来看， Vue3 的源码就是用 TypeScript 编写的，更好的 TypeScript 支持也是这一次升级的亮点。当然，在实际开发中如何正确拥抱 TypeScript 也是迁移至 Vue3 的一个小痛点，这里就针对 Vue3 和 TypeScript 展开一些交流。

96.8%的代码都是TypeScript，支持的力度也是相当大?

Vue3入口: https://github.com/vuejs/vue-next

项目搭建

在官方仓库的 Quickstart 中推荐用两种方式方式来构建我们的 SPA 项目：

vite

npm init vite-app sail-vue3 # OR yarn create vite-app sail-vue3

vue-cli

npm install -g @vue/cli # OR yarn global add @vue/cli
vue create sail-vue3
# select vue 3 preset

vite 是一个由原生ESM驱动的Web开发构建工具，打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript ，甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量，开箱即用的特点，满足了大部分开发场景的需求，作为快速启动本地 Vue 项目来说，这是一个非常完美的工具。

后面的演示代码也是用vite搭的

从 vue2.x 走过来的掘友肯定知道 vue-cli 这个官方脚手架， vue3 的更新怎么能少得了 vue-cli 呢， vue-cli 更强调的是用 cli 的方式进行交互式的配置，选择起来更加灵活可控。丰富的官方插件适配，GUI的创建管理界面，标准化开发流程，这些都是 vue-cli 的特点。

vue-cli ✖ TypeScript STEP1

vue-cli ✖ TypeScript STEP2

想要预装TypeScript，就需要选择手动配置，并check好TypeScript

忘记使用选择 TypeScript 也没事，加一行cli命令就行了

vue add typescript

最后，别忘了在 .vue 代码中，给 script 标签加上 lang="ts"

<script lang="ts">

Option API风格

在 Vue2.x 使用过 TypeScript 的掘友肯定知道引入 TypeScript 不是一件简单的事情：

要用 vue-class-component 强化 vue 组件，让 Script 支持 TypeScript 装饰器

用 vue-property-decorator 来增加更多结合 Vue 特性的装饰器

引入 ts-loader 让 webpack 识别 .ts .tsx 文件

.....

然后出来的代码风格是这样的：

@Component({
    components:{ componentA, componentB},
})
export default class Parent extends Vue{
  @Prop(Number) readonly propA!: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC!: string | boolean | undefined

  // data信息
  message = 'Vue2 code style'

  // 计算属性
  private get reversedMessage (): string[] {
      return this.message.split(' ').reverse().join('')
  }

  // method
  public changeMessage (): void {
    this.message = 'Good bye'
  }
}

class 风格的组件，各种装饰器穿插在代码中，有点感觉自己不是在写 vue ，些许凌乱?，所以这种曲线救国的方案在 vue3 里面肯定是行不通的。

在 vue3 中可以直接这么写：

import { defineComponent, PropType } from 'vue'

interface Student {
  name: string
  class: string
  age: number
}

const Component = defineComponent({
  props: {
    success: { type: String },
    callback: {
      type: Function as PropType<() => void>
    },
    student: {
      type: Object as PropType

     

      ,

      
      

      required: 

      true

      
    }

      
  },

      
  data() {

      
     

      return {

      
        

      message: 

      'Vue3 code style'

      
    }

      
  },

      
  

      computed: {

      
    reversedMessage(): string {

      
      

      return 

      this.message.split(

      ' ').reverse().join(

      '')

      
    }

      
  }

      
})

vue 对 props 进行复杂类型验证的时候，就直接用 PropType 进行强制转换， data 中返回的数据也能在不显式定义类型的时候推断出大多类型， computed 也只用返回类型的计算属性即可，代码清晰，逻辑简单，同时也保证了 vue 结构的完整性。

Composition API风格

在 vue3 的 Composition API 代码风格中，比较有代表性的api就是 ref 和 reactive，我们看看这两个是如何做类型声明的：

ref

import { defineComponent, ref } from 'vue'

const Component = defineComponent({
setup() {
  const year = ref(2020)
  const month = ref

     

      (

      '9')

      


      
  month.value = 

      9 

      // OK

      
  

      const result = year.value.split(

      '') 

      // => Property 'split' does not exist on type 'number'

      
 }

      
})

分析上面的代码，可以发现如果我们不给定 ref 定义的类型的话， vue3 也能根据初始值来进行类型推导，然后需要指定复杂类型的时候简单传递一个泛型即可。

Tips：如果只有setup方法的话，可以直接在defineComponent中传入setup函数

const Component = defineComponent(() => {
    const year = ref(2020)
    const month = ref

     

      (

      '9')

      


      
    month.value = 

      9 

      // OK

      
    

      const result = year.value.split(

      '') 

      // => Property 'split' does not exist on type 'number'

      
})

reactive

import { defineComponent, reactive } from 'vue'

interface Student {
  name: string
  class?: string
  age: number
}

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const student = reactive

     

      ({ 

      name: 

      '阿勇', 

      age: 

      16 })

      
    

      // or

      
    

      const student: Student = reactive({ 

      name: 

      '阿勇', 

      age: 

      16 })

      
    

      // or

      
    

      const student = reactive({ 

      name: 

      '阿勇', 

      age: 

      16, 

      class: 

      'cs' }) 

      as Student

      
  }

      
})

声明 reactive 的时候就很推荐使用接口了，然后怎么使用类型断言就有很多种选择了，这是 TypeScript 的语法糖，本质上都是一样的。

自定义Hooks

vue3 借鉴 react hooks 开发出了 Composition API ，那么也就意味着 Composition API 也能进行自定义封装 hooks ，接下来我们就用 TypeScript 风格封装一个计数器逻辑的 hooks （ useCount ）:

首先来看看这个 hooks 怎么使用：

import { ref } from '/@modules/vue'
import  useCount from './useCount'

export default {
  name: 'CountDemo',
  props: {
    msg: String
  },
  setup() {
    const { current: count, inc, dec, set, reset } = useCount(2, {
      min: 1,
      max: 15
    })
    const msg = ref('Demo useCount')

    return {
      count,
      inc,
      dec,
      set,
      reset,
      msg
    }
  }
}

出来的效果就是：

贴上 useCount 的源码：

import { ref, Ref, watch } from 'vue'

interface Range {
  min?: number,
  max?: number
}

interface Result {
  current: Ref

     

      ,

      
  

      inc: 

      (delta?: number) => 

      void,

      
  

      dec: 

      (delta?: number) => 

      void,

      
  

      set: 

      (value: number) => 

      void,

      
  

      reset: 

      () => 

      void

      
}

      


      


      export 

      default 

      function useCount(initialVal: number, range?: Range): Result {

      
  

      const current = ref(initialVal)

      
  

      const inc = (delta?: number): 

      void => {

      
    

      if (

      typeof delta === 

      'number') {

      
      current.value += delta

      
    } 

      else {

      
      current.value += 

      1

      
    }

      
  }

      
  

      const dec = (delta?: number): 

      void => {

      
    

      if (

      typeof delta === 

      'number') {

      
      current.value -= delta

      
    } 

      else {

      
      current.value -= 

      1

      
    }

      
  }

      
  

      const 

      set = (value: number): void => {

      
    current.value = value

      
  }

      
  

      const reset = 

      () => {

      
    current.value = initialVal

      
  }

      


      
  watch(current, (newVal: number, 

      oldVal: number) => {

      
    

      if (newVal === oldVal) 

      return

      
    

      if (range && range.min && newVal < range.min) {

      
      current.value = range.min

      
    } 

      else 

      if (range && range.max && newVal > range.max) {

      
      current.value = range.max

      
    }

      
  })

      


      
  

      return {

      
    current,

      
    inc,

      
    dec,

      
    

      set,

      
    reset

      
  }

      
}

分析源码

这里首先是对 hooks 函数的入参类型和返回类型进行了定义，入参的 Range 和返回的 Result 分别用一个接口来指定，这样做了以后，最大的好处就是在使用 useCount 函数的时候，ide就会自动提示哪些参数是必填项，各个参数的类型是什么，防止业务逻辑出错。

接下来，在增加 inc 和减少 dec 的两个函数中增加了 typeo 类型守卫检查，因为传入的 delta 类型值在某些特定场景下不是很确定，比如在 template 中调用方法的话，类型检查可能会失效，传入的类型就是一个原生的 Event 。

关于 ref 类型值，这里并没有特别声明类型，因为 vue3 会进行自动类型推导，但如果是复杂类型的话可以采用类型断言的方式：ref(initObj) as Ref

小建议 ?

AnyScript

在初期使用 TypeScript 的时候，很多掘友都很喜欢使用 any 类型，硬生生把TypeScript 写成了 AnyScript ，虽然使用起来很方便，但是这就失去了 TypeScript 的类型检查意义了，当然写类型的习惯是需要慢慢去养成的，不用急于一时。

Vetur

vetur 代码检查工具在写vue代码的时候会非常有用，就像构建 vue 项目少不了 vue-cli一样，vetur 提供了 vscode 的插件支持，赶着升级 vue3 这一波工作，顺带也把 vetur 也带上吧。

一个完整的Vue3+ts项目

├─public
│      favicon.ico
│      index.html
└─src
    │  App.vue
    │  main.ts
    │  shims-vue.d.ts
    ├─assets
    │  │  logo.png
    │  └─css
    │          base.css
    │          main.styl
    ├─components
    │  │  HelloWorld.vue
    │  └─base
    │          Button.vue
    │          index.ts
    │          Select.vue
    ├─directive
    │      focus.ts
    │      index.ts
    │      pin.ts
    ├─router
    │      index.ts
    ├─store
    │      index.ts
    ├─utils
    │  │  cookie.ts
    │  │  deep-clone.ts
    │  │  index.ts
    │  │  storage.ts
    │  └─validate
    │          date.ts
    │          email.ts
    │          mobile.ts
    │          number.ts
    │          system.ts
    └─views
        │  About.vue
        │  Home.vue
        │  LuckDraw.vue
        │  TodoList.vue
        └─address
                AddressEdit.tsx
                AddressList.tsx

.vue写法



     



     

      "ts">

      
import dayjs from 

      "dayjs";

      
import { ref, reactive, onMounted } from 

      "vue";

      
import { Button, Step, Steps, NoticeBar } from 

      "vant";

      


      


      export default {

      
  components: {

      
    Button,

      
    Step,

      
    Steps,

      
    NoticeBar,

      
  },

      
  

      setup() {

      
    const nameinput = ref();

      
    const selectionStart = ref(0);

      
    const twoNow = dayjs().subtract(2, 

      "day").format(

      "YYYY-MM-DD HH:mm:ss");

      
    const now = dayjs().format(

      "YYYY-MM-DD HH:mm:ss");

      
    const now2 = dayjs().add(2, 

      "day").format(

      "YYYY-MM-DD HH:mm:ss");

      
    const formData = reactive({

      
      name: 

      "",

      
      phone: 

      "",

      
      code: 

      "",

      
    });

      


      
    onMounted(() => {

      
      (nameinput.value as HTMLInputElement).focus();

      
    });

      


      
    const insertName = () => {

      
      const index = (nameinput.value as HTMLInputElement).selectionStart;

      
      

      if (typeof index !== 

      "number") 

      return;

      
      formData.name =

      
        formData.name.slice(0, index) + 

      "哈哈" + formData.name.slice(index);

      
    };

      


      
    

      return {

      
      nameinput,

      
      formData,

      
      insertName,

      
      selectionStart,

      
      twoNow,

      
      now,

      
      now2,

      
    };

      
  },

      
};



     



     

      "ts">

      
import dayjs from 

      "dayjs";

      
import { defineComponent } from 

      "vue";

      
import HelloWorld from 

      "@/components/HelloWorld.vue"; // @ is an 

      alias to /src

      
import { Button, Dialog, Toast } from 

      "vant";

      


      


      export default defineComponent({

      
  name: 

      "Home",

      
  components: {

      
    HelloWorld,

      
    Button,

      
  },

      
  

      data() {

      
    

      return {

      
      direction: 

      "top",

      
      pinPadding: 0,

      
      time: 

      "",

      
      timer: 0,

      
      color: 

      "red",

      
    };

      
  },

      
  methods: {

      
    

      showToast() {

      
      Toast(

      "字体颜色已改蓝色");

      
      this.color = 

      "blue";

      
    },

      
    

      handleClick() {

      
      Dialog({

      
        title: 

      "标题",

      
        message: 

      "这是一个全局按钮组件",

      
      });

      
    },

      
    

      initTime() {

      
      this.time = dayjs().format(

      "YYYY-MM-DD HH:mm:ss");

      
      this.timer = setInterval(() => {

      
        this.time = dayjs().format(

      "YYYY-MM-DD HH:mm:ss");

      
      }, 1000);

      
    },

      
  },

      
  

      created() {

      
    this.initTime();

      
  },

      
  

      beforeUnmount() {

      
    clearInterval(this.timer);

      
  },

      
});

      


      


      


      

       "{ color }">

       
.text-color {

       
  color: var(--color);

       
}

tsx写法

import { ref, reactive } from "vue";
import { AddressList, NavBar, Toast, Popup } from "vant";
import AddressEdit from './AddressEdit'
import router from '@/router'

export default {
  setup() {
    const chosenAddressId = ref('1')
    const showEdit = ref(false)

    const list = reactive([
      {
        id: '1',
        name: '张三',
        tel: '13000000000',
        address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
        isDefault: true,
      },
      {
        id: '2',
        name: '李四',
        tel: '1310000000',
        address: '浙江省杭州市拱墅区莫干山路 50 号',
      },
    ])
    const disabledList = reactive([
      {
        id: '3',
        name: '王五',
        tel: '1320000000',
        address: '浙江省杭州市滨江区江南大道 15 号',
      },
    ])

    const onAdd = () => {
      showEdit.value = true
    }
    const onEdit = (item: any, index: string) => {
      Toast('编辑地址:' + index);
    }

    const onClickLeft = () => {
      router.back()
    }

    const onClickRight = () => {
      router.push('/todoList')
    }

    return () => {
      return (
        

     

      
          

      

       
            title="地址管理"

       
            left-text="返回"

       
            right-text="Todo"

       
            left-arrow

       
            onClick-left={onClickLeft}

       
            onClick-right={onClickRight}

       
          />

       
          

       

        
            vModel={chosenAddressId.value}

        
            list={list}

        
            disabledList={disabledList}

        
            disabledText="以下地址超出配送范围"

        
            defaultTagText="默认"

        
            onAdd={onAdd}

        
            onEdit={onEdit}

        
          />

        
          

        

         
            

         

         
          

         
        

         
      );

         
    };

         
  }

         
};

结束

不知不觉， Vue 都到3的One Piece时代了， Vue3 的新特性让拥抱 TypeScript 的姿势更加从容优雅， Vue 面向大型项目开发也更加有底气了。

最近发现一个好网站，不需要梯子就能看Google Cloud Next ’20大会的视频和技术干货，速戳:https://sourl.cn/AnzYaG（点击阅读原文）

专注分享当下最实用的前端技术。关注前端达人，与达人一起学习进步！

长按关注"前端达人"