vue-cli 3+typescriptに基づくtsx開発テンプレート構築過程を共有する。

プロジェクトの作成vue-cli3+を用いてtsに基づくテンプレートを作成する。

vue-tsx-support
前のステップではtsベースのvueテンプレートが作成されましたが、開発方式は相変わらずtemplateのように、script中のjs部分をtsに変更して書いています。次に、テンプレート方式をtsxに変更します。ここでは、1つのライブラリ--vue-tsx-supportを借りる必要があります。
まずvue-tsx-supportをインストールします。 

npm install vue-tsx-support --save
# or
yarn add vue-tsx-support 

インストールが終わったら、私達は私達のファイルに小さな変更をしたいです。まず、メインエントランスファイルmain.tsに導入します。

npm install vue-tsx-support --save
# or
yarn add vue-tsx-support 

src/shims-tsx.d.tsファイルを削除し、vue-tsx-support/enable-checkと重複衝突を避ける。
最後に、vue.config.jsファイルのconfigureWebpack属性の下にresolveを追加します。

// vue.config.js

module.exports = {
 // ...
 configureWebpack: {
 resolve: {
 extensions: [".js", ".vue", ".json", ".ts", ".tsx"] //   ts   tsx
 }
 }
}

これでいいです。これから開発が始まります。/componentsの下に新しいファイルbutton.tsxを作成します。次に、tsxスタイルのvueコードを書き始めます。 

// components/button/button.tsx
import { Component, Prop } from "vue-property-decorator";
import * as tsc from "vue-tsx-support";

interface ButtonClick {
 (value: string): void
}

interface ButtonProps {
 text: string;
 btnClick?: ButtonClick
}

@Component
export default class ZButton extends tsc.Component<ButtonProps> {
 @Prop() text!: string;

 public btnClick(value: string): void {
 console.log("value is: ", value);
 }

 protected render() {
 return (
 <div>
 <button onClick={() => this.btnClick("click")}>{this.text}</button>
 </div>
 )
 }
}

これで簡単なtsxコンポーネントが完成しました。次に私達は元のHome.vueを書き換えてHome.tsxになります。

// views/Home.tsx
import { Component, Vue } from "vue-property-decorator";
import { Component as tsc } from "vue-tsx-support";
import ZButton from "@/components/button/button.tsx";

@Component
export default class HomeContainer extends tsc<Vue> {
 protected render() {
 return <Zbutton text="  ！"></Zbutton>;
 }
}

そして運転して、以下の効果が見られます。

このように簡単なtsxスタイルのvueプロジェクトを完成しました。
vue mixinsmixins/index.tsを新規作成し、index.tsにvue mixinを記入します。

// mixins/index.ts
import { Vue, Component } from "vue-property-decorator";

//                              
//    mixin       
declare module "vue/types/vue" {
 interface Vue {
 mixinText: string;
 showMixinText(): void;
 }
}
@Component
export default class MixinTest extends Vue {
 public mixinText: string = "    mixin";

 public showMixinText() {
 console.log(this.mixinText);
 }
}

次に、component/button/button.tsxで使用される。

// component/button/button.tsx
import { Component, Prop } from "vue-property-decorator";
import * as tsc from "vue-tsx-support";

import MixinTest from "@/mixins";

interface ButtonClick {
 (value: string): void;
}

interface ButtonProps {
 text: string;
 btnClick?: ButtonClick;
}

//  Component      mixin
@Component({
 mixins: [MixinTest]
})
export default class ZButton extends tsc.Component<ButtonProps> {
 @Prop() text!: string;

 public btnClick(value: string): void {
 console.log("value is: ", value);
 }

 //        mixin   
 protected render() {
 return (
 <div>
 <button onClick={() => this.showMixinText()}>{this.text}</button>
 </div>
 );
 }
}

vuexvuexのts変換には、vuex-classに基づく方法と、vue-module-decoratorsに基づく方法の2つがある。ここで使っているのはvuex-classです。
インストールvuex-class：

npm install vue-class --save
#or
yarn add vuex-class

systemのmoduleを新たに作成し、systemのstoreに対してそれぞれのファイルを作成します。

state.ts

getter.ts

muttionn-type.ts

muttions.ts

actions.ts

簡単な例を作成し、Vuexにuser情報を格納する：

// store/modules/system/state.ts

interface SystemState {
 user: Object
}

const state: SystemState = {
 user: {}
}

export default state;

// store/modules/system/mutation-type.ts
interface SystemMutationType {
 SET_USER_INFO: String;
}

const Mutation_Type: SystemMutationType = {
 SET_USER_INFO: "SET_USER_INFO"
}

export default Mutation_Type;

// store/modules/system/mutation.ts
import type from "./mutation-type";

const mutation: any = {
 [type.SET_USER_INFO as string](state: SystemState, user: Object) {
 state.user = user;
 }
}

export default mutation;

import type from "./mutation-type";
import { Commit } from "vuex";

export const cacheUser = (context: { commit: Commit }, user: Object) => {
 context.commit(type.SET_USER_INFO as string, user);
}

そしてsystemの入口ファイルindex.tsを作成してこれらを外に投げます。

// store/modules/system/index.ts
import state from "./state";
import mutations from "./mutation";
import * as actions from "./action";
import * as getters from "./getter";

export default {
 namespaced: true,
 state,
 getters,
 mutations,
 actions
};

最後にstoreの入口ファイルでmoduleを引用します。

// store/index.ts
import Vue from "vue";
import Vuex from "vuex";
import system from "./modules/system";

Vue.use(Vuex);

export default new Vuex.Store({
 modules: {
 system
 }
});

次に、私たちはコンポーネントbutton.tsxに行って使用する。 

// components/button/button.tsx
import { Component, Prop } from "vue-property-decorator";
import * as tsc from "vue-tsx-support";
//   store             
import { namespace } from "vuex-class";

//   namespace(module name)          store
const systemStore = namespace("system");

@Component
export default class ZButton extends tsc.Component<ButtonProps> {
 @Prop() text!: string;
 // store  state action   getter mutation  
 @systemStore.State("user") user!: Object;
 @systemStore.Action("cacheUser") cacheUser: any;

 public btnClick(value: string): void {
 console.log("value is: ", value);
 //     store action    user  
 //  state  user         vue-tools  
 this.cacheUser({ name: "  ", phone: "13333333333" });
 }

 //        mixin   
 protected render() {
 return (
 <div>
 <button onClick={() => this.btnClick()}>{this.text}</button>
 </div>
 );
 }
}

Tips：typescriptに基づくvuexは、まだより優れた方法を考えています。
Ps:初めて文章を書くので、どうしても緊張します。問題があれば、討論を歓迎します。ありがとうございます
最終的なtemplateはここですにあります。
締め括りをつける
ここで、vue-cli 3+typescriptに基づくtsx開発テンプレートを構築する記事について紹介します。これに関連して、vue typescriptテンプレートの内容は以前の文章を検索してください。または以下の関連記事を引き続きご覧ください。これからもよろしくお願いします。