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

萌新学习使用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里面的组件回调的方法参数, 如何定义,是否需要定义类型。

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

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

回答:

二、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";

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注