TypeScript(下)

一、项目需要使用typeScript

1. 引入和使用

webpack打包配置 => vue-cli - vue init/create ${myProject} ${template} => 配置webpack => 编译时

a. entry - 入口
b. extentions 加上ts文件area - 用于处理尝试的数据尾缀列表
c. loaders - ts-loader，增加对于ts的处理 => 工程化

TS配置

tsconfig.json

2. vue / vuex + typescript

  <template>
    <div>
      <vueComponent />
    </div>
  </template>

  <script lang="ts">
    // 1. 定义组件的方式上： 形式上 - extends
    // const Component = {
      // TS无法断定内部为vue组件，需要额外做申明处理 - Vue.prototype.xxxx
    // }

    // 申明当前组件模块 Vue.component or Vue.extend
    import Vue from 'vue'
    const Component = Vue.extend({
      // 类型推断
    })

    // 2. 全面拥抱面向对象 - 官方vue-class-component
    import Component from 'vue-class-component'

    // @Component 本质 —— 类装饰器 => 利用装饰器，统一描述vue模板等概念
    @Component({
      template: '<vueComponent />'
    })
    export default class myComponent extends Vue {
      message: string = 'Hello'
      onClick(): void {
        console.log(this.message);
      }
    }

    // 3. 申明 - 利用ts的额外补充模块declare => 实现独立模块的声明，使之可以被独立引用
    declare module '*.vue' {
      import Vue from 'vue'
      export default Vue
    }
    // 补充模块 - 通常使用.d.ts来做申明描述
    declare module '/typings/vuePlugin.d.ts' {
      interface Vue  {
        myProps: string
      }
    }
    // 实例中使用
    let vm = new Vue()
    console.log(vm.myProps)

    // 4. props - 提供propType原地声明复合变量
    import { propType } from 'vue'

    interface customPayload {
      str: string,
      number: number,
      name: string
    }

    const Component = Vue.extend({
      props: {
        name: String,  // 字符串类型
        success: { type: String }, // 普通对象类型
        payload: {
          type: Object as propType<customPayload>
        },
        callback: {
          type: Function as propType<() => void>
        }
      }
    })

    // 5. computed 以及 method中包含this且有return的方法 需要声明返回类型
    computed: {
      getMsg(): string {
        return this.click() + "!"
      }
    }

    methods: {
      click(): string {
        return this.message + 'zhaowa'
      }
    }

    // 6. vuex的接入ts - 声明使用
    // vuex.d.ts 声明模块 - ComponentCustomProperties
    import { ComponentCustomProperties } from 'vue'
    
    declare module '@vue/runtime-core' {
      interface State {
        count: number
      }

      interface ComponentCustomProperties {
        $store: Store<State>
      }
    }

    // 7. api形式编码实现 - 官方推荐
    // store.ts
    import { InjectionKey } from 'vue'
    import {
      createStore,
      Store
    } from 'vuex'

    export interface State {
      count: number
    }

    export const key: InjectionKey<Store<State>> = Symbol()

    export const store = createStore<State>({
      state: {
        count: 0
      }
    })
    // ##################################
    // main.ts
    import { createApp } from 'vue'
    import { store, key } from './store'

    const app = createApp({
      // 传入参数
    })

    // 利用了provider & inject
    app.use(store, key) // => 传入injection Key => vue高级使用里会提到vue.use

    app.mount('#app')

    // ####################################
    // 消费方
    import { useStore } from 'vuex'
    import { key } from './store'

    export default {
      const store = useStore(key)

      store.state.count
    }
    // 标准接口形式的功能引入，核心利用了vue的provide&inject

    // 8. vuex面向对象 - 使用vuex-class
    import { State, Action, Getter } from "vuex-class"

    export default class App extends Vue {
      // 属性装饰器，整合了store状态
      @State login: boolean;

      // 事件装饰器，整合了store方法
      @Action setInit: () => void;

      get isLogin: boolean;

      mounted() {
        this.setInit();
      }
    }
  </script>