So I've got a ts file with the following code as my starter:

import { defineComponent } from 'vue';

type Forecasts = {
  date: string,
  temperatureC: string,
  temperatureF: string,
  summary: string
}[];

interface Data {
  loading: boolean,
  post: null | Forecasts
}

export default defineComponent({
  data(): Data {
  return {
    loading: false,
    post: null
  };....

and this is referenced in my vue component with

<script lang="ts" src="../scripts/Forecast.ts"></script>

The Forecasts type is really a model and to follow seperation of concern, I want to move that out of this ts file and into its own as I may want to use the model in a number of places and fo not want to duplicate (I'll probably want to do the same with the interface as well).

How should I declare my Forecasts type in another ts file and how can I then reference it in this file?

So I've got a ts file with the following code as my starter:

import { defineComponent } from 'vue';

type Forecasts = {
  date: string,
  temperatureC: string,
  temperatureF: string,
  summary: string
}[];

interface Data {
  loading: boolean,
  post: null | Forecasts
}

export default defineComponent({
  data(): Data {
  return {
    loading: false,
    post: null
  };....

and this is referenced in my vue component with

<script lang="ts" src="../scripts/Forecast.ts"></script>

The Forecasts type is really a model and to follow seperation of concern, I want to move that out of this ts file and into its own as I may want to use the model in a number of places and fo not want to duplicate (I'll probably want to do the same with the interface as well).

How should I declare my Forecasts type in another ts file and how can I then reference it in this file?

• vue.js

• It's unclear what is the problem. You can move Forecasts to a separate module and import it wherever it's needed – Estus Flask Commented Nov 20, 2024 at 20:53
• @EstusFlask I put the Forecaasts type into another ts file then tried to do an import { Forecasts } from 'models'; and it did not like it, hence my question, how do I declare this in another file and declare it for use in this one. – bilpor Commented Nov 21, 2024 at 9:09
• ' it did not like it' - what was the error and where was it observed? If you see the problem in ide only, it could be ide problem. Please, show what you exactly tried, if there's a problem, it needs to be specifically addressed. At least this requires 'models' to be relative path. – Estus Flask Commented Nov 21, 2024 at 10:08

1 Answer 1

Finally figured it out.

In the seperated file, the type needs to be declared with export :

  export type Forecasts = {
    date: string,
    temperatureC: string,
    temperatureF: string,
    summary: string
  }[];

then to call I need to add 'type' to the declaration:

import type { Forecasts } from 'src/models/models';