Add namespace for Meikan

src/domain/index.ts

@@ -1,11 +1,11 @@
-export const GetAnimeList = async (userID: number): Promise<UserAnime[]> => {
+export const GetAnimeList = async (userID: number): Promise<Meikan.UserAnime[]> => {
 	 const res = await fetch(`https://api.meikan.moe/v1/users/${userID}/anime`)
-	 const anime: UserAnime[] = await res.json()
+	 const anime: Meikan.UserAnime[] = await res.json()
 
 	 return anime
 }
 
-export const FindUsers = async (name: string): Promise<User[]> => {
+export const FindUsers = async (name: string): Promise<Meikan.User[]> => {
 	const res = await fetch('https://api.meikan.moe/v1/users', {
 		method: 'POST',
 		mode: 'cors',
@@ -13,8 +13,7 @@ export const FindUsers = async (name: string): Promise<User[]> => {
 			name,
 		}),
 	})
-
+	const users: Meikan.User[] = await res.json()
-	const users: User[] = await res.json()
 
 	return users
 }

src/layouts/Base.vue

@@ -24,6 +24,6 @@ const user = namespace('user')
 
 @Component({})
 export default class Base extends Vue {
-	@user.Getter('currentUser') private currentUser!: User | null
+	@user.Getter('currentUser') private currentUser!: Meikan.User | null
 }
 </script>

src/store/module/user.ts

@@ -3,8 +3,8 @@ import { RootState } from '@/store'
 import { BareActionContext, getStoreBuilder } from 'vuex-typex'
 
 export interface UserState {
-	currentUser: User | null
+	currentUser: Meikan.User | null
-	foundUsers: User[]
+	foundUsers: Meikan.User[]
 }
 
 const initialState: UserState = {
@@ -23,11 +23,11 @@ const getterCurrentUser = builder.read(function currentUser(state: UserState) {
 })
 
 // Mutations
-function setUserList(state: UserState, foundUsers: User[]) {
+function setUserList(state: UserState, foundUsers: Meikan.User[]) {
 	state.foundUsers = foundUsers
 }
 
-function setCurrentUser(state: UserState, currentUser: User) {
+function setCurrentUser(state: UserState, currentUser: Meikan.User) {
 	state.currentUser = currentUser
 }
 
@@ -43,10 +43,11 @@ function resetFoundUsers(context: BareActionContext<UserState, RootState>) {
 }
 
 export const user = {
-	get foundUsers(): User[] {
+	get foundUsers(): Meikan.User[] {
 		return getterUserList()
 	},
-	getCurrentUser(): User | null {
+
+	get currentUser(): Meikan.User | null {
 		return getterCurrentUser()
 	},
 

src/store/module/userAnime.ts

@@ -3,7 +3,7 @@ import { RootState } from '@/store'
 import { BareActionContext, getStoreBuilder } from 'vuex-typex'
 
 export interface UserAnimeState {
-	anime: UserAnime[]
+	anime: Meikan.UserAnime[]
 }
 
 const initialState: UserAnimeState = {
@@ -17,12 +17,12 @@ const getterUserAnime = builder.read(function anime(state: UserAnimeState) {
 })
 
 // Mutations
-function setAnime(state: UserAnimeState, animeList: UserAnime[]) {
+function setAnime(state: UserAnimeState, animeList: Meikan.UserAnime[]) {
 	state.anime = animeList
 }
 
 // Action
-async function fetchUserAnime(context: BareActionContext<UserAnimeState, RootState>, user: User) {
+async function fetchUserAnime(context: BareActionContext<UserAnimeState, RootState>, user: Meikan.User) {
 	const list = await GetAnimeList(user.id)
 
 	userAnime.setAnime(list)
@@ -33,7 +33,7 @@ function resetUserAnime(context: BareActionContext<UserAnimeState, RootState>) {
 }
 
 export const userAnime = {
-	get anime(): UserAnime[] {
+	get anime(): Meikan.UserAnime[] {
 		return getterUserAnime()
 	},
 

src/types/shims-vue.d.ts

@@ -3,12 +3,14 @@ declare module '*.vue' {
 	export default Vue
 }
 
-interface User {
+declare namespace Meikan {
+	export interface User {
 		id: number
 		name: string
-}
+	}
 
-interface UserAnime {
+	export interface UserAnime {
 		id: number
 		title: string
+	}
 }

src/views/UserAnime.vue

@@ -29,16 +29,16 @@ const userAnime = namespace('userAnime')
 @Component({})
 export default class Home extends Vue {
 	@user.Getter
-	private currentUser!: User
+	private currentUser!: Meikan.User
 
 	@userAnime.Action
 	private resetUserAnime!: () => void
 
 	@userAnime.Action
-	private fetchUserAnime!: (user: User) => Promise<UserAnime[]>
+	private fetchUserAnime!: (user: Meikan.User) => Promise<Meikan.UserAnime[]>
 
 	@userAnime.Getter
-	private anime!: UserAnime[]
+	private anime!: Meikan.UserAnime[]
 
 	private created() {
 		if (this.anime.length === 0) {

src/views/UserSelect.vue

@@ -30,16 +30,16 @@ const userAnimeStore = namespace('userAnime')
 @Component({})
 export default class Home extends Vue {
 	@userStore.Mutation('setCurrentUser')
-	private setCurrentUser!: (user: User) => void
+	private setCurrentUser!: (user: Meikan.User) => void
 
 	@userStore.Action('findUsers')
-	private findUsers!: (name: string) => Promise<User[]>
+	private findUsers!: (name: string) => Promise<Meikan.User[]>
 
 	@userStore.Action('resetFoundUsers')
 	private resetFoundUsers!: () => void
 
 	@userStore.Getter('foundUsers')
-	private foundUsers!: User[]
+	private foundUsers!: Meikan.User[]
 
 	@userAnimeStore.Action
 	private resetUserAnime!: () => void
@@ -53,7 +53,7 @@ export default class Home extends Vue {
 		this.findUsers(name)
 	}, 200)
 
-	private onSelect(user: User) {
+	private onSelect(user: Meikan.User) {
 		this.setCurrentUser(user)
 		this.resetUserAnime()