账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    萌新在vue项目中使用typescript的一些问题
    24
    0

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

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

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

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部