大厂面试TS(下)

一、项目需要使用typeScript

1、引入和使用

webpack 打包配置 => vue-cli init/create ${myProject} ${template} => 配置webpack => 主要是因为ts为编译时执行语言

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

2、TS配置

tsconfig.json

3、比如 vue / vuex + typescript 项目中

<template>
<div>
<vueComponent />
</div>
<script lang="ts">
// const Component = {
// TS 无法断定内部为vue组件，需要额外做声明 - Vueprototype.xxx    挂的东西还需要单独说明
// 上述方法比较累赘

// 声明当前组件模块  Vue.component or Vue.extend
import Vue from 'vue'
const Component = Vue.extend({
// 类型推断
})
// 2. 全面拥抱面向对象 - 官方 vue-class-component
import Component from 'vue-class-component'
// 类装饰器 本质 -- > 利用类装饰器，统一描述vue 模板等概念
@Component({
tempalate: '<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 '/typeings/vuePlugin.d.ts' {
   interface Vue {
      myProps: string
}
}
// 实例中使用
let vm = new Vue()
console.log(vm.myProps)

// 4.props - 

interface customPayload {
  str:string,
  number:number,
 name:string
}
import { propType} from 'vue'
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
computed:{
    getMsg():string {
       return this.click() + '!'  
  }
}

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

// 6. vuex 接入ts (全局状态机) - 声明使用
// vuex.d.ts 声明模块 -  ComponentCustomProperties 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.js
import {createApp} from 'vue'
import {store, key} from './store'

const app = createApp({
     // 传入参数
})
// 利用了provide & 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>
</template>