vue2.*集成typescript遇到的问题

1.element-ui按需加载时没有引入对应的css文件

解决方案：使用ts-import-plugin插件

const path = require('path')
const tsImportPluginFactory = require('ts-import-plugin')
const camel2Dash = require('camel-2-dash')

{
    test: /\.tsx?$/,
    loader: 'ts-loader',
    exclude: /node_modules/,
    options: {
      transpileOnly: true,
      getCustomTransformers: () => ({
        before: [tsImportPluginFactory({
          libraryName: 'element-ui',
          libraryDirectory: 'lib',
          camel2DashComponentName: true,
          style: (_path) =>
            path.join('element-ui', 'lib', 'theme-chalk', `${
              camel2Dash(path.basename(_path, '.js'))}.css`),
        })]
      }),
      compilerOptions: {
        module: 'es2015'
      },
      appendTsSuffixTo: [/\.vue$/],
    }
  },

这样就可以删除之前的 babel-plugin-component 按需引入代码了

2.vscode解析ts的装饰器时，报错

Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead

解决办法：在.eslintrc文件中添加legacyDecorators: true，该配置在babel-eslint 10.*的版本生效，在11之后取消了该配置，找了好久，在babel-eslint的issues中找到对应的配置

"parserOptions": {
    "parser": "babel-eslint", // 交给babel处理es6语法
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "legacyDecorators": true
    }
  }

3.在vue原型上添加属性或方法时，需要在添加声明文件，扩展vue模块。

我这边添加的vue.d.ts文件（该文件要在tsconfig.json配置的include包含的文件之中）

import Vue from 'vue'
declare module 'vue/types/vue' {
  interface Vue {
    $test: any // 测试
    $api: any // axios封装
  }
}

添加完，如果vscode还报错，重启vscode就可以了（貌似新建的声明文件必须重启......真是坑） 

4.集成jsx

1.需要添加jsx声明文件（eg：jsx.d.ts文件）

import Vue, { VNode } from "vue"

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

2.tsconfig.json中设置"jsx": "preserve"

3.将vue组件改成tsx文件

例如:test.jsx 

import Vue, { CreateElement } from 'vue'
import Component from 'vue-class-component'

@Component
export default class Test extends Vue {
  count:number = 0


  render (h: CreateElement) {
    return <div id="foo" onClick={this.increment}>【{this.count}】</div>
  }

  increment () {
    this.count++
  }
}

4.webpack中对tsx文件先进行进行babel转码配置

{
    test: /\.tsx?$/,
    exclude: /node_modules/,
    use: [
      'babel-loader',
      {
        loader: 'ts-loader',
        options: {
          /* 此处是针对element-ui的按需引入，如果不是该UI可去掉该配置
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [tsImportPluginFactory({
              libraryName: 'element-ui',
              libraryDirectory: 'lib',
              camel2DashComponentName: true,
              style: (_path) =>
                path.join('element-ui', 'lib', 'theme-chalk', `${
                  camel2Dash(path.basename(_path, '.js'))}.css`),
            })]
          }),
          compilerOptions: {
            module: 'es2015'
          },
          */
          appendTsSuffixTo: [/\.vue$/],
        }
      }
    ]
  },

5.如果配置了eslint，并且使用的eslint:recommend规则，需要设置关闭变量未使用规则，no-unused-vars:'off' 

因为在tsx中使用jsx时必须显示的传递h，然后在代码编写时不需要该方法

最后备注我理解的声明文件（*.d.ts）：

在ts的老版本，各类库没有写对应的声明文件，需要自己手动写声明文件，才能在ts中写获取对应类库的一些属性或方法（上述vue的声明文件中是针对vue进行扩展，vue的声明文件已经在该包中定义），之后各类库往ts靠齐，基本都统一给自己的类库加上了types声明文件（在类库的package.json中types或typing指定），typescript会在引入对应包时通过package.json找到对应的声明文件。