Angular 15项目HTML枚举赋值报错但运行正常，VSCode如何配置？

针对你遇到的模板中使用枚举字符串值时VSCode报类型错误但项目运行正常的问题，有以下几种解决方案：

方案1：调整Angular编译器配置（快速解决） #

在项目根目录的tsconfig.json文件中，修改angularCompilerOptions下的类型检查规则，细粒度关闭严格输入类型检查：

{
  "compilerOptions": {
    // 其他TypeScript配置
  },
  "angularCompilerOptions": {
    "strictTemplates": true, // 保留整体模板严格检查能力
    "strictInputTypes": false // 关闭输入属性的严格类型校验
  }
}

修改后，VSCode的红色下划线报错会消失，同时不会完全丢失模板类型检查的防护。

方案2：模板中直接使用枚举成员（类型安全最优解） #

不修改配置，而是通过在组件类中暴露枚举，让模板绑定枚举成员：

1. 在使用<icon>标签的组件类中，把IconSize枚举赋值给类属性：

import { Component } from '@angular/core';
import { IconSize } from './icon';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 暴露枚举给模板使用
  IconSize = IconSize;
}

2. 模板中改用属性绑定的方式使用枚举成员：

<icon key="x" [size]="IconSize.Medium"></icon>

这种方式完全符合TypeScript类型规范，不会有任何报错，同时保持完整的类型安全。

方案3：放宽Input的类型定义（兼顾灵活性与类型安全） #

修改icon.ts中的@Input()类型，允许枚举值或对应的字符串字面量：

import { Input } from '@angular/core';

export enum IconSize {
  Small = 'icon-sm',
  Medium = 'icon-md'
}

@Component({
  selector: 'icon',
  templateUrl: './icon.component.html'
})
export class IconComponent {
  // 允许枚举类型或枚举值对应的字符串字面量
  @Input() size: IconSize | `${IconSize}` = IconSize.Medium;
}

${IconSize}会自动生成枚举所有值的字符串字面量联合类型，模板中写"icon-md"时类型检查会通过，同时仍能限制输入为枚举允许的合法字符串值。

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