How can I import an array in local file for use in a Vue 3 TypeScript project?

Question

I am getting a TS7016 'Could not find a declaration file for module '../composables/httpResponses'. '/Users/username/project/src/composables/httpResponses.js' implicitly has an 'any' type.' when I try to import an array from a local .js file into my view component. Here's the structure:

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>

What am I doing wrong? How is this supposed to be done? I searched the web and the Vue 3 docs and all I'm finding is that this usually happens to people incorporating 3rd party packages, but this isn't a package.

The actual project can be found here and I tried to create a minimum reproducible code sandbox here but failed (I don't think they offer a Vue3/TS boilerplate).

Boussadjra Brahim · Accepted Answer · 2021-08-25 22:24:42Z

1

Rename httpResponses.js to httpResponses.ts and type the returned array using the interface HttpResponse:

import {HttpResponse } from './interface'

export const httpResponses:Array<HttpResponse> = [
 .....
]

then in App.vue :

<script lang="ts">
import { defineComponent } from 'vue';
import { httpResponses } from './httpResponses';
import { HttpResponse } from './interface'

export default defineComponent({
  name: 'App',
  data() {
    return {
      matchingResponse: {} as HttpResponse | undefined
    }
  },
  mounted() {
    this.matchingResponse = httpResponses.find(response =>
    response.code === 401)
  }
})
</script>

answered Aug 25, 2021 at 22:24

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I import an array in local file for use in a Vue 3 TypeScript project?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related