前端之旅（十八）- Vue3+ts常见问题解决之旅

前言

对于初学者来说，第一次使用Vue3+TypeScript可能会遇到一些问题，尤其是在遵循ESLint（Airbnb）规则的前提下。为了避免经常性使用any，我只能逼迫自己解决问题，并在此分享我的经验。

创建xxx.d.ts声明文件

第一步是创建一个xxx.d.ts声明文件。这个文件可以用来声明一些在类型系统中缺失的类型，例如：

declare module 'xxx' {
  export interface Xxx {
    // 这里定义Xxx的属性和方法
  }
}

然后，在tsconfig.json文件中引入这个声明文件。这可以通过在"include"或"typeRoots"字段中添加xxx.d.ts文件的路径来实现。

{
  "compilerOptions": {
    "include": ["xxx.d.ts"]
  }
}

这样，就可以在项目中使用xxx.d.ts中声明的类型了。

使用typeRoots代替include

如果不想使用include字段，也可以使用typeRoots字段。typeRoots字段指定了一个目录，TypeScript编译器会在其中查找类型声明文件。

{
  "compilerOptions": {
    "typeRoots": ["node_modules/@types"]
  }
}

解决常见问题

在使用Vue3+TypeScript结合ESLint（Airbnb）时，可能会遇到一些常见问题，例如：

• 无法访问Vue实例的方法和属性
• 无法使用Vuex中的getter和setter
• 无法使用Vue Router中的路由信息

这些问题通常可以通过在xxx.d.ts声明文件中添加相应的类型声明来解决。

例如，为了解决无法访问Vue实例的方法和属性的问题，可以在xxx.d.ts声明文件中添加如下声明：

declare module 'vue' {
  export interface Vue {
    $el: HTMLElement;
    $data: object;
    $props: object;
    $computed: object;
    $methods: object;
  }
}

为了解决无法使用Vuex中的getter和setter的问题，可以在xxx.d.ts声明文件中添加如下声明：

declare module 'vuex' {
  export interface Store<S> {
    getters: {
      [key: string]: (state: S) => any;
    };
    mutations: {
      [key: string]: (state: S, payload: any) => void;
    };
  }
}

为了解决无法使用Vue Router中的路由信息的问题，可以在xxx.d.ts声明文件中添加如下声明：

declare module 'vue-router' {
  export interface Route {
    path: string;
    name: string;
    params: object;
    query: object;
  }
}

总结

通过创建xxx.d.ts声明文件并解决常见问题，我成功地避免了在使用Vue3+TypeScript结合ESLint（Airbnb）时经常性使用any。希望我的经验能对其他开发人员有所帮助。