classCar{privateengine:Engine;constructor(privatetype:string){this.engine=newEngine(type);}move(){this.engine.start();// ..処理}}classEngine{constructor(publictype:string){}start(){// ..処理}}constcar=newCar("Honda");car.move();

classCar{　// 初期化時に引数としてEngineのインスタンスを受け取るconstructor(privateengine:Engine){}move(){this.engine.start();// ..処理}}classEngine{constructor(publictype:string){}start(){// ..処理}}constengine=newEngine("Honda");// CarクラスにEngineのインスタンスを注入しているconstcar=newCar(engine);car.move();

interfaceIStartable{start:()=>void;}classCar{constructor(privateengine:IStartable){}move(){this.engine.start();// ..処理}}classEngineimplementsIStartable{constructor(publictype:string){}start(){// ..処理}}constengine=newEngine("Honda");constcar=newCar(engine);car.move();

import{Task}from"@/types/type";importaxios,{AxiosInstance}from"axios";exportclassApiClient{client:AxiosInstanceconstructor(){this.client=axios.create({baseURL:'https://example.com/api/v1',headers:{'X-Custom-Header':'foobar'}})}asyncfetchTasks(){const{data}=awaitthis.client.get<Task[]>('/tasks');returndata;}}

<template><div><divv-for="task in tasks":key="task.id"class="task"><h2>{{task.title}}</h2><p>{{task.note}}</p></div></div></template><scriptlang="ts">import{defineComponent,ref,onMounted}from"@vue/composition-api";import{Task}from"@/types/type";import{ApiClient}from"@/apis/apiClient";exportdefaultdefineComponent({setup(){constclient=newApiClient();consttasks=ref<Task[]>([]);onMounted(async()=>{try{tasks.value=awaitclient.fetchTasks();}catch(e){console.log(e);}});return{tasks};}});</script>

import{Task}from"@/types/type";importaxios,{AxiosInstance}from"axios";exportconstDefaultApiClient=Symbol("api")exportclassApiClient{client:AxiosInstanceconstructor(){this.client=axios.create({baseURL:'https://example.com/api/v1',headers:{'X-Custom-Header':'foobar'}})}asyncfetchTasks(){const{data}=awaitthis.client.get<Task[]>('/tasks');returndata;}}

importVuefrom"vue";importAppfrom"./App.vue";importVueCompositionApi,{provide}from"@vue/composition-api";import{ApiClient,DefaultApiClient}from"./apis/apiClient";Vue.use(VueCompositionApi);Vue.config.productionTip=false;constapiClient=newApiClient();newVue({render:h=>h(App),setup(){provide<ApiClient>(DefaultApiClient,apiClient);return{};}}).$mount("#app");

<template><div><divv-for="task in tasks":key="task.id"class="task"><h2>{{task.title}}</h2><p>{{task.note}}</p></div></div></template><scriptlang="ts">import{defineComponent,inject,ref,onMounted}from"@vue/composition-api";import{DefaultApiClient,ApiClient}from"@/apis/apiClient";import{Task}from"@/types/type";exportdefaultdefineComponent({setup(){constclient=inject<ApiClient>(DefaultApiClient);// injectの戻り値が T | void のUnion型のためif(!client){throw"provie missing.";}consttasks=ref<Task[]>([]);onMounted(async()=>{try{tasks.value=awaitclient.fetchTasks();}catch(e){console.log(e);}});return{tasks};}});</script>

import{Task}from"@/types/type";exportconstDefaultApiClient=Symbol("api");exportinterfaceIApi{fetchTasks:()=>Promise<Task[]>;}

import{IApi}from"@/interfaces/IApi";import{Task}from"@/types/type";importaxios,{AxiosInstance}from"axios";exportclassApiClientimplementsIApi{client:AxiosInstanceconstructor(){this.client=axios.create({baseURL:'https://example.com/api/v1',headers:{'X-Custom-Header':'foobar'}})}asyncfetchTasks(){const{data}=awaitthis.client.get<Task[]>('/tasks');returndata;}}

importVuefrom"vue";importAppfrom"./App.vue";importVueCompositionApi,{provide}from"@vue/composition-api";import{DefaultApiClient,IApi}from"./interfaces/IApi";import{ApiClient}from"./apis/apiClient";Vue.use(VueCompositionApi);Vue.config.productionTip=false;constapiClient=newApiClient();newVue({render:h=>h(App),setup(){provide<IApi>(DefaultApiClient,apiClient);return{};}}).$mount("#app");

<template><div><divv-for="task in tasks":key="task.id"class="task"><h2>{{task.title}}</h2><p>{{task.note}}</p></div></div></template><scriptlang="ts">import{defineComponent,inject,ref,onMounted}from"@vue/composition-api";import{DefaultApiClient,IApi}from"@/interfaces/IApi";import{Task}from"@/types/type";exportdefaultdefineComponent({setup(){constclient=inject<IApi>(DefaultApiClient);// injectの戻り値が T | void のUnion型のためif(!client){throw"provie missing.";}consttasks=ref<Task[]>([]);onMounted(async()=>{try{tasks.value=awaitclient.fetchTasks();}catch(e){console.log(e);}});return{tasks};}});</script>

import{IApi}from"@/interfaces/IApi";import{Task}from"@/types/type";exportclassFetchApiClientimplementsIApi{BASE_URL="https://example.com/api/v1";asyncfetchTasks():Promise<Task[]>{constresponse=awaitfetch(`${this.BASE_URL}/tasks`);returnawaitresponse.json();}}

importVuefrom"vue";importAppfrom"./App.vue";importVueCompositionApi,{provide}from"@vue/composition-api";import{DefaultApiClient,IApi}from"./interfaces/IApi";import{FetchApiClient}from"@/apis/fetchApiClient";Vue.use(VueCompositionApi);Vue.config.productionTip=false;constapiClient=newFetchApiClient();// ここでnew ApiClient()と差し替えるだけnewVue({render:h=>h(App),setup(){provide<IApi>(DefaultApiClient,apiClient);return{};}}).$mount("#app");

import{createLocalVue,shallowMount}from"@vue/test-utils";importTasksfrom"../../src/components/Tasks.vue";importVueCompositionApifrom"@vue/composition-api";import{DefaultApiClient,IApi}from"../../src/interfaces/IApi";constlocalVue=createLocalVue();localVue.use(VueCompositionApi);// IApiを実装したモックのクライアントclassMockClientimplementsIApi{asyncfetchTasks(){return[{id:1,title:"買い物",note:"人参、牛乳",completed:false},{id:2,title:"掃除",note:"リビング",completed:false}];}}describe("Tasks.vue",()=>{it("タスク一覧を表示する",async()=>{constmockClient=newMockClient();constwrapper=shallowMount(Tasks,{localVue,provide:{[DefaultApiClient]:mockClient}});awaitwrapper.vm.$nextTick();awaitwrapper.vm.$nextTick();consttasks=wrapper.findAll(".task");expect(tasks.length).toBe(2);expect(tasks.at(1).text()).toContain("掃除");expect(tasks.at(1).text()).toContain("リビング");});});