Vue.js新手求教：如何将TypeScript模型与组件分离

1. 新建类型文件并导出Forecasts #

创建一个独立的TypeScript文件（例如src/models/ForecastModel.ts，路径可根据项目结构调整），在其中声明并导出目标类型：

// src/models/ForecastModel.ts
// 先定义单条预报的类型（可选，但更灵活）
export type ForecastItem = {
  date: string,
  temperatureC: string,
  temperatureF: string,
  summary: string
};

// 导出数组类型，对应原来的Forecasts
export type Forecasts = ForecastItem[];

也可以直接导出组合后的数组类型，无需单独定义ForecastItem：

// 简化写法
export type Forecasts = {
  date: string,
  temperatureC: string,
  temperatureF: string,
  summary: string
}[];

2. 在原组件文件中导入并使用 #

修改你原来的Forecast.ts文件，删除原有Forecasts类型定义，替换为从新文件导入：

// src/scripts/Forecast.ts
import { defineComponent } from 'vue';
// 根据实际文件路径调整导入路径
import { Forecasts } from '../models/ForecastModel';

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

export default defineComponent({
  data(): Data {
    return {
      loading: false,
      post: null
    };
    // ... 剩余代码
  }
});

3. 迁移Data接口（后续操作） #

如果要把Data接口也分离出去，方法完全一致：

• 在类型文件中新增并导出Data接口：

// src/models/ForecastModel.ts
export interface Data {
  loading: boolean,
  post: null | Forecasts
}

• 在原组件文件中导入Data：

import { Forecasts, Data } from '../models/ForecastModel';

内容的提问来源于stack exchange，提问作者bilpor