Angular12项目中普通对象数组转Application接口数组的问题咨询

报错原因 #

TypeScript 会自动推导未显式声明类型的对象结构，你代码里environment.applications没有指定类型，被默认推导为{name: string; url: string;}[]匿名类型数组，严格类型校验下和显式定义的Application[]接口类型不兼容，所以抛出该错误。

解决方法 #

有两种常用方案，更推荐第一种从源头保证类型安全：

方案1：给environment配置显式添加类型（推荐） #

修改你的environment配置文件，导入Application接口后，给applications属性或整个environment对象指定类型：

// 替换为你定义Application接口的实际路径
import type { Application } from './path-to-application-interface';

// 方式A：仅给applications字段指定类型
export const environment = {
  production: false,
  applications: <Application[]>[
    { name: "Api", url: "https://localhost:5001" },
    { name: "Bot", url: "https://localhost:5003"}
  ],
};

// 方式B：给整个environment定义专属接口，类型更严谨
interface EnvironmentConfig {
  production: boolean;
  applications: Application[];
}

export const environment: EnvironmentConfig = {
  production: false,
  applications: [
    { name: "Api", url: "https://localhost:5001" },
    { name: "Bot", url: "https://localhost:5003"}
  ],
};

方案2：在service中做类型断言 #

如果不想修改environment配置，可在getter中直接对返回值做类型断言：

get applications() : Application[] { 
  return environment.applications as Application[];
}

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