ttian226 / vue-jsx-typescript

使用jsx和typescript配置vue开发环境

vue-jsx-typescript

使用jsx和typescript配置vue开发环境

使用vue-cli初始化vue环境

vue init webpack my-project

添加tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "jsx": "preserve",
    "jsxFactory": "h"
  }
}

安装ts-loader

npm i -D typescript ts-loader

安装vue-class-component

npm i vue-class-component

修改webpack.base.conf.js

entry.app

entry: {
  app: './src/main.ts'
}

resolve.extensions

resolve: {
  extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
}

module.rules

module: {
  rules: [
    {
      test: /\.ts$/,
      exclude: /node_modules|vue\/src/,
      loader: "ts-loader",
      options: {
        appendTsSuffixTo: [/\.vue$/]
      }
    },
    {
      test: /\.tsx$/,
      exclude: /node_modules|vue\/src/,
      loader: ['babel-loader', 'ts-loader']
    }
  ]
}

创建sfc.d.ts

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

创建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
    }
  }
}

把main.js改为main.ts

在ts文件中引用vue文件时，需要加上后缀.vue

import App from './App.vue'

修改vue文件

script标签修改为<script lang="ts">

import Vue from 'vue';
import Component from 'vue-class-component';

@Component
export default class Hello extends Vue {
  helloTimes: number = 0;

  sayHello () {
    this.helloTimes++;
  }
}

使用jsx

文件的扩展名为tsx

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

@Component
export default class World extends Vue {
  render(h: CreateElement) {
    return <p>This is rendered via TSX</p>
  }
}