Encountering a TS7016 error 'Could not find a declaration file for module '../composables/httpResponses'. '/Users/username/project/src/composables/httpResponses.js' implicitly has an 'any' type.' while attempting to import an array from a local .js file into a view component. The file structure is as follows:
httpResponses.js
export const httpResponses = [
{
"code": 301,
"message": "Moved Permanently",
},
{
"code": 401,
"message": "Unauthorized",
}
]
interface.ts
export interface HttpResponse {
code: number;
message: string;
description: string;
}
App.vue
<template>
<h1>testing</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { httpResponses } from './httpResponses';
import { HttpResponse } from './interface'
export default defineComponent({
name: 'App',
data() {
return {
matchingResponse: undefined as HttpResponse | undefined
}
},
mounted() {
this.matchingResponse = httpResponses.find(response =>
response.code === 401)
}
})
</script>
Seeking guidance on correcting this issue. How should this task be approached? Extensive research yielded information that such errors are common with third-party packages, but in this case, it's related to an internal file.
The original project can be accessed here. An attempt was made to create a minimal reproducible code sandbox here, however, unsuccessful due to the absence of Vue3/TS boilerplate support.