在泛型数组中使用扩展语法，能否避免类型断言及as const？

去掉as const后出现类型错误的根源是：TypeScript默认会把对象字面量里的字符串值推断为宽泛的string类型，而不是你定义的NavIconsName中的具体字面量类型，导致iconName的类型和NavIconsName不兼容。

这种问题完全可以避免，不用as const或数组级的类型断言，有两种简洁的解决方式：

方法一：给可选分支的数组显式标注类型 #

把条件判断的结果单独提取为一个带明确类型的变量，让TypeScript自动检查内部对象是否符合INavLinkBase<NavIconsName>的要求：

export type NavIconsName =
  | 'home-filled'
  | 'home-regular'
  | 'folder-filled'
  | 'folder-regular';

export interface INavLinkBase<T = {}> {
  linkName: string;
  svgIcon?: ISvgIconProps<T>;
  selectedSvgIcon?: ISvgIconProps<T>;
}

export interface ISvgIconProps<IconType> {
  iconName: IconType;
}

const shouldAddLink = true;
// 显式标注数组类型，TypeScript会自动校验内部对象的类型
const optionalNavLinks: INavLinkBase<NavIconsName>[] = shouldAddLink ? [
  {
    linkName: 'test4',
    svgIcon: {
      iconName: 'folder-regular'
    }
  }
] : [];

const navLinks: INavLinkBase<NavIconsName>[] = [
  ...optionalNavLinks,
  {
    linkName: 'test',
    svgIcon: {
      iconName: 'folder-regular'
    },
    selectedSvgIcon: {
      iconName: 'folder-filled'
    }
  }
];

方法二：用辅助函数约束类型 #

定义一个简单的辅助函数，它的返回值被约束为INavLinkBase<T>，TypeScript会基于这个约束自动推断出iconName的具体字面量类型：

export type NavIconsName =
  | 'home-filled'
  | 'home-regular'
  | 'folder-filled'
  | 'folder-regular';

export interface INavLinkBase<T = {}> {
  linkName: string;
  svgIcon?: ISvgIconProps<T>;
  selectedSvgIcon?: ISvgIconProps<T>;
}

export interface ISvgIconProps<IconType> {
  iconName: IconType;
}

// 辅助函数，确保输入的链接符合指定类型
function createNavLink<T>(link: INavLinkBase<T>): INavLinkBase<T> {
  return link;
}

const shouldAddLink = true;
const navLinks: INavLinkBase<NavIconsName>[] = [
  ...(shouldAddLink ? ([
    createNavLink({
      linkName: 'test4',
      svgIcon: {
        iconName: 'folder-regular'
      }
    })
  ]) : []),
  createNavLink({
    linkName: 'test',
    svgIcon: {
      iconName: 'folder-regular'
    },
    selectedSvgIcon: {
      iconName: 'folder-filled'
    }
  })
];

这两种方法都能让TypeScript正确识别iconName属于NavIconsName类型，同时避免使用你不想用的as const或数组级类型断言。

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