萌新在vue项目中使用typescript的一些问题

Question

萌新学习使用ts，从最开始的any， 到现在基本可以正常开发项目了，但是在公司项目实战中还是有一些细节上的不懂，希望大触们可以帮我解答一下

一 Vuex中的state类型定义，在.vue文件中如何知道呢

//store.interface.ts

export interface UserInfo {
    userCode: string;
    userName: string;
}

export interface State {
    token: string,
    userInfo: UserInfo | null,
}
 
//store.ts
import { State } from "./store.interface.ts"
export default new Vuex.Store<State>({
  state: {
    userInfo: null,
    token: ''
  }
  ...
 
//index.vue
import { Component, Vue, Watch } from "vue-property-decorator";
import { State } from "vuex-class";
import { UserInfo ,State as myState} from "@/store/store.interface.ts"
imrpot { Store } from "vuex"
@Component<Login>({
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.token &&
        next({
          name: "index"
        });
    });
  },
  components: { },
  name: "login"
})
export default class Login extends Vue {
  @State token!: string;
  @state userInfo!: UserInfo 
  //这个地方我又从store的接口定义里面又去引入进来，才知道的类型， 感觉很麻烦，每次都要这样， 
  //vuex-class有什么方式可以直接知道这个state的类型吗？让我可以不需要引入userInfo接口,又或者大佬们是如何定义这个userinfo的声明呢？
  created(){
    this.$store.state.userInfo.xxxxx 
     //假如我这里需要知道$store.userInfo
     //(property) Store<any>.state: any  我查看了一下vuex给vue $store挂在了一个Store<any>泛型，如果我在.vue文件中this.$store想指定这个类型是我定义的那个 如何搞呢？  
     //我目前的解决方案是
    (<Store<myState>>this.$store).state //这样我又需要当前组件引用vuex 以及我自己的State声明， 感觉如果很多页面， 组件， 以及我以后修改会很麻烦，很不科学。
     
  }
 }

这个主要问题在上面的注释 是我有关vuex在项目中使用的一些问题，求大佬们帮助我一下，感谢

二、axios在项目中使用的情况

//index.d.ts

declare interface AjaxResponse<T> {
  data: T;
  success: boolean;
  status: string;
  messages: string;
  debugMessage: string;
  paging: string;
}

//user.interfac.ts
export interface LoginParams {
    userName: string;
    passWord: string;
}

export interface UserInfo {
    userCode: string;
    userName: string;
}

export interface LoginResponse {
    token: string;
    userInfo: UserInfo
}

//user.service.ts

import { api } from '@/axios';
import { LoginParams, LoginResponse} from './user.interface'

export const userService = {
    login(data: LoginParams) {
        return api.get<AjaxResponse<LoginResponse>>('//login', {
            params: data
        })
    }
}

这个主要问题是，大佬们在实战开发中都要手写入参和返回Response的interface吗？ 我这样写有问题吗？？或者有什么更好的方式吗？

三 一些ui组件库， 例如ElementUi

//login.vue
<template>
     <el-cascader
      @active-item-change="activechange"
  ></el-cascader>
</template>
import { Form } from "iview/types";
export default class Login extends Vue
  ...
  handleSubmit(name: string) {
    (this.$refs[name] as Form).validate(valid => {
      if (valid) {
        this.login();
      }
    });
  },
  activechange(arr:any[]){
      //因为这个是template  element的el-cascader组件的回调参数，会返回各父级选项组成的数组，但是我并不知道这个类型是什么？我需要按数据类型手动写interface吗？如果写是在当前页面写，还是提出去写。

   }  
  }
   

    


}

这个主要问题是，都是从Ui组件库的tpyes里面引用类型定义的嘛的吗？template里面的组件回调的方法参数， 如何定义，是否需要定义类型。

一些在开发过程中碰到的一些小问题， 虽然不影响我项目，但是一直想知道如何最优解决，以及外面的大佬们是如何做的。渴望大佬们的回答。

如果能看到这里，也再次感谢。
感谢。

Answer 1

二、axios在项目中使用的情况

在axios中其实服务端应该返回一个固定的消息结构

interface ResponseData<T = any> {
   code: number;
   message: string | null;
   data: T
}

axios.getAjaxResponse<ResponseData>()
// 写不写都可以
axios.getAjaxResponse<ResponseData<LoginResponse>>()

三、一些ui组件库， 例如ElementUi
针对组件库，如果index.d.ts中没有导出的，你需要从它的具体的组件声明文件中来导入

import { CascaderOption } from "element-ui/types/cascader";