vue/cli 构建typescript与eslint踩坑笔记

前提

这里做下笔记，记录下项目中遇到的问题

---

eslint别名设置

• javascrpt开发

  没有使用typescript之前，只需要在webpack或者vue.config.js设置alias即可。

  // WEBPACK配置
  configureWebpack{
      resolve: {
        extensions: ['.js', '.less', '.sass', '.css', '.vue'],
        alias: {
          vue$: 'vue/dist/vue.common',
          src: path.resolve(__dirname, './src'),
          store: path.resolve(__dirname, './src/store'),
          common: path.resolve(__dirname, './src/common'),
          components: path.resolve(__dirname, './src/components'),
          assets: path.resolve(__dirname, './src/assets'),
        },
      },
   }
  

  
  如果使用了vscode里的vetur的话，最好在jsconfig.json里配置依赖

  {
    "include": ["./src/**/*"],
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "components/*": ["src/components/*"],
        "vue/dist/vue.esm.js": ["vue$"],
        "src/*": ["src/*"],
        "common/*": ["src/common/*"],
        "store/*": ["src/store/*"],
        "assets/*": ["src/assets/*"]
      }
    }
  }
  
  

---

• typescript开发

  如果使用了typescript开发，就不仅需要在webpack配置，还需要配置tsconfig.js即可。

  {
  	 "compilerOptions"{
  	 // 这里配置别名与路径
       "paths": {
  	      "@/*": ["src/*"],
  	      "@store/*": ["src/store/*"],
  	      "@components/*": ["src/components/*"]
  	    },
  	}
  }
  

  配置之后虽然可以找到对应的模块，但是eslint报错了。

  eslint配置

  需要安装 eslint-plugin-import与eslint-import-resolver-typescript插件，配置eslint使用tsconfig.js的path

  	settings: {
  	    'import/parsers': {
  	      '@typescript-eslint/parser': ['.ts', '.tsx'],
  	    },
  	    'import/resolver': {
  	      typescript: {
  	        project: path.join(__dirname, './tsconfig.json'),// 插件读取tsconfig配置的路径
  	        alwaysTryTypes: true, // always try to resolve types under
  	      },
  	}
  

  vue.config配置

   resolve:{
        alias : {
          '@': path.resolve(__dirname, './src'),
          '@store': path.resolve(__dirname, './src/store'),
          '@components': path.resolve(__dirname, './src/components'),
         
        },
  },
  

---

自定义.d.ts模块

模块引入

我们正常使用import的时候，可以正常导入node_module里的模块与@types里的类型文件

自定义@types文件

在项目中，需要自己引入.d.ts文件，我在src/@types的目录下，写好了文件，但是导入的时候报错了。

---

如何配置才能让typescript解析到模块呢？

官方说明文档中，可以通过npm安装@types/node包，获取到对应模块的声明文件。
举例：

1. 没有安装之前，直接使用lodash是没有提示的。
   

2. 安装@types/node包

   npm install --save @types/lodash
   
   
   vscode悬浮可以跳转到对应的声明文件，同时调用方法的时候就会出现提示。
   

不过现在主流的包基本都在模块里包含了声明文件了，如果没有才需要安装对应的@types，可以去搜索types包网址进行搜索

---

路径分析

开发过程中，会遇到一些指令调用，比如element-ui里的全局loading

使用断言缓存loading指令返回的vue实例，但是引入ElLoadingComponent接口时，不能直接引入

虽然vscode已经找到对应的模块，可以跳转进去，但是eslint却报错了。
这个是因为eslint的模块后缀名没有自动添加.d.ts后缀，所以导致找不到对应的模块。

可以加多.d解决。

修改eslint 使用eslint-plugin-import配置import/resolver

这样模块就能正常引入了。

使用eslint 使用eslint-plugin-import 与 import/resolver-typescript（推荐）

这只需要配置typescript即可。

---

引入自己的模块

我们回到最开始，我们在src/@types放了自己写的声明文件，虽然vscode已经找到了模块，但是eslint去报错导入失败。

这是因为typescript可以解析所有@types文件下的声明文件，如果使用了declear module声明的话，会解析成模块进行引入。官方说明外部模块

官方推荐使用相对路径来引入自己写的声明文件，但是有时候如果在组件使用的话，声明文件就需要写很长，我这里提供2种配置方法，大家可以参考下。

---

使用别名来替代

别名很简单，直接在`tsconfig.js`里配置`paths`，使用相对路径引入就不需要使用`declear module` 来声明，直接`export`导出即可。

tsconfig.js

CodeDiffHome.d.ts

直接引入

---

使用自定义模块解析路径直接引入

如果不想使用相对路径，想使用模块应用一样去引入，这个时候你也可以通过配置来实现。

	// CodeDiffHome.d.ts
	declare module 'codeDiffHome' {
	  export interface Filter1 {
	    a: number;
	  }
	}

这个时候直接引入，typescript是可以解析到的，这是因为我们的声明文件放置到@types文件夹下的，所以解析器可以识别到。

此时但是eslint会报错：

这个时候配置tsconfig.js的paths可以解决

这样，eslint解析codeDiffHome模块的时候，就会自动去检索对应的路径。

结果成功识别，eslint也不会报错。
但是运行本地环境会报错，如图：

这是因为tsconfig.json的配置vscode会自动引入，但是webpack读取eslint的时候，是不会引入这个配置的，这个时候结合前面引入的eslint-plugin-import 与 import/resolver-typescript，配置typescript读取的路径即可。

---

使用ref调用element组件方法

1. 推荐使用断言，element-ui提供了类型文件，使用断言就可以解决这个问题
   案例：如使用组件form的validate的方法

   import { Form } from 'element-ui';
   export default class App extends Vue {
   	 (this.$refs.form as Form).validate((v) => {
   	      if (v) {
   	        this.$emit('submit', this.filter);
   	      }
   	  });
   }
   

---

结合vuex-class引入vuex

在业务组件使用action时，有时候需要引入action后，使用返回值，但是目前vuex-class类型时引入不进来的，所以我使用断言去解决这个问题。

// 引入vuex里的类型
import { PerformanceList } from '@/store/pHome/index';
import { namespace } from 'vuex-class';

const PHomeStore = namespace('pHome');
export default class PHome extends Vue {
	 @PHomeStore.Action('actionGetPerformanceReport') actionGetPerformanceReport;
	   async searchSubmit(filter) {

    const result = (await this.actionGetPerformanceReport({
 		// 使用断言
    })) as PerformanceList;
    
  }
}

vuex的Module模块使用

这里导出的是其实是store的实例，这里可以引入vuex提供的types文件。

import { Module } from 'vuex';

export interface State {
  performarenceTableData: Array<string>;
}
const state: State = {
  performarenceTableData: [],
};

const store: Module<State, any> = {
  state,
  actions:{
  }
};
export default store;

Module的需要传入2个泛型 第一个就是state的接口，第二个是子module的接口，可以传入any